jQuery

1.jQuery入口函數(shù)其他寫法

? 1.? ?$(document).ready(function(){});

? 2.? ?jQuery(document).ready(function(){});

? 2.? ?$(function(){});? //常用的

? 2.? ?jQuery(function(){});

2.jQuery沖突問題

<script></script>可能會引入多個js或者jquery文件

根據(jù)順序不同，優(yōu)先級也不同?？赡軙采w前一個，比如$

解決$沖突問題

1.釋放$的使用權(quán)

? ?釋放操作必須在編寫其他jQuery代碼之前編寫

? ?釋放之后就不能使用$，改為使用jQuery

? ?jQuery.noConflict();

? ?jQuery(function(){});

2.自定義一個訪問符號

? var a= jQuery.noConflict();

? ?a(function(){});

3.jQuery核心函數(shù)

?1.接收一個函數(shù)

? ? $(function(){});

?2.接收一個字符串選擇器? (返回一個jQuery對象，對象中保存了找到的DOM元素)

? ? var $div2=$(".box1");

? ? var $div3=$("#box2");

3.接收一個字符串或字符串代碼片段（返回一個jQuery對象，對象中保存了創(chuàng)建的DOM元素)

? ? var $p=$("<p>我是一個段落</p>");

? ? $div2.append($p);

4.接收一個DOM元素（會被包裝成jQuery對象返回給我們)

? ?var span=document.getElementsByTagName("span")[0];

? ?var $span=$(span);

4.jQuery對象

? jQuery是一個偽數(shù)組(有0到length-1的屬性，并且有l(wèi)ength屬性)

5.靜態(tài)方法和實例方法

1.定義一個類

? ? ? ?function AClass(){}

2.給這個類添加一個靜態(tài)方法 ，直接添加給類的就是靜態(tài)方法

? ? ? ?AClass.staticMethod=function()

? ? ? ?{

? ? ? ? ?alert("staticMethod");

? ? ? ?}

? ? ? ?//靜態(tài)方法通過類名調(diào)用

? ? ? ?AClass.staticMethod();

? 3.給這個類添加一個實例方法

? ? ? ?AClass.prototype.instanceMethod=function()

? ?{

? ? ? ? ?alert("instanceMethod");

? ? ? ?}

? //實例方法通過類的實例調(diào)用 創(chuàng)建一個實例(創(chuàng)建一個對象)

? ?var a=new AClass();

? ? a.instanceMethod();

6.靜態(tài)方法each方法

? ?1.利用jQuery的each靜態(tài)方法遍歷數(shù)組

? ? 第一個參數(shù):當前遍歷到的索引，第二個參數(shù):遍歷到的元素

? ? ? var arr=[1,3,5,7,9];

? ? ? $.each(arr, function(index,value) {

? ? ? ? ? ?console.log(index,value);

? ? ? ?});

? 2.利用jQuery的each靜態(tài)方法遍歷偽數(shù)組

? ? ?var obj={0:2,1:4,2:6,3:8,4:10,length:5};

? ? ?$.each(obj, function(index,value) {

? ? ? ? ?console.log(index,value);

? ? ? });

7.靜態(tài)方法map方法

? ?1.利用jQuery的map靜態(tài)方法遍歷數(shù)組

? ?第一個參數(shù):要遍歷的數(shù)組

? ?第二個參數(shù):每遍歷一個元素之后執(zhí)行的回調(diào)函數(shù)?

? ? ? ? ? ? ? ? ? ? ? ? ?回調(diào)函數(shù)的參數(shù): 第一個參數(shù):遍歷到的元素,第二個參數(shù);遍歷到的索引

? ? ???var arr=[1,3,5,7,9];

? ? ? ?$.map(arr,function(value,index)

? ? ?{

? ? ? ? ? console.log(index,value);

? ? ?});

??2.利用jQuery的map靜態(tài)方法遍歷偽數(shù)組
? ? ? var obj={0:2,1:4,2:6,3:8,4:10,length:5};

? ? ? $.map(obj,function(value,index)

? ? ? {

? ? ? ? ? ? ? console.log(index,value);

? ? ? ? ?});

?3.each和map的區(qū)別

? each靜態(tài)方法默認的返回值就是:遍歷誰就返回誰

? map靜態(tài)方法默認的返回值就是一個空數(shù)組

? each靜態(tài)方法不支持在回調(diào)函數(shù)中對遍歷的數(shù)組進行處理

? map靜態(tài)方法可以在回調(diào)函數(shù)中通過return對遍歷的數(shù)組進行處理

8.jQuery中其他靜態(tài)方法

? ?1.$.trim()?

? ? ? 作用：去除字符串兩端的空格

? ? ? 參數(shù):需要去除空格的字符串

? ? ? 返回值:去除空格之后的字符串

? ?2.$.isWindow()

? ? ?作用:判斷傳入的對象是否是window對象

? ? ?返回值:true/false

?? 3.$.isArray()

? ? ?作用:判斷傳入的對象是否是真數(shù)組

? ? ?返回值:true/false

? 4.$.isFunction() （jQuery本質(zhì)是一個函數(shù))

? ? ?作用:判斷傳入的對象是否是一個函數(shù)

? ? ?返回值:true/false


9.靜態(tài)方法holdReady方法

? ? $(function()

? ? {

? ? ? ?alert("ready");

? ? });

? ? $.holdReady(true)：暫停ready執(zhí)行

? ? $.holdReady(false): 恢復(fù)ready執(zhí)行

10.jQuery內(nèi)容選擇器

?1. :empty?

? ? ? 作用:找到既沒有文本內(nèi)容也沒有子元素的指定元素

? ? ? var $div=$("div:empty");

?2. :parent

? ? ?作用:找到有文本內(nèi)容或有子元素的指定元素

? ? ?var $div=$("div:parent");

?3. :contains(text)

? ? ?作用:找到包含指定文本內(nèi)容的指定元素

? ? ?var $div=$("div:contains('我是div')");

?4. :has(slelector)

? ? ? 作用:找到包含指定子元素(選擇器)的指定元素

? ? ??var $div=$("div:has('span')");

11.jQuery-attr方法

? ? 1. attr(name | pro | key,val | fn)

? ? 作用：獲取或設(shè)置屬性節(jié)點的值

? ?可以傳遞一個參數(shù)，也可以傳遞兩個參數(shù)

? ?如果傳遞一個參數(shù)，代表獲取屬性節(jié)點的值

? ?如果傳遞兩個參數(shù)，代表設(shè)置屬性節(jié)點的值

? ? var $div=$("span").attr("class");

? ? var $div=$("span").attr("class","box");

? ? var $div=$("span").attr("abc","123");

? ? 注意點:

? ? ?如果是獲取：無論找到多少個元素，都只會返回第一個元素指定的屬性節(jié)點的值

? ? ?如果是設(shè)置：找到多少個元素就會設(shè)置多少個元素

? ? ?如果是設(shè)置:如果設(shè)置的屬性節(jié)點不存在，那么系統(tǒng)會自動新增

? ?2. removeAttr(name)

? ? ?作用:刪除屬性節(jié)點

? ? var $div=$("span").removeAttr("class");

? ? var $div=$("span").removeAttr("class name");?//刪除多個屬性需要用空格隔開刪除class 和 name屬性


12.jQuery-prop方法

?1. prop(name | pro | key,val | fn)?

? ? 特點和attr方法一致

?2.removeProp(name)

? ?特點和removeAttr方法一致

注意事項:prop不僅能夠操作屬性,還能操作屬性節(jié)點

官方推薦在操作屬性節(jié)點時，具有 true 和 false兩個屬性的屬性節(jié)點，如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

13.jQuery操作相關(guān)方法

1.? addClass(class | fn)

? ?作用:添加一個類（如果要添加多個，多個類名之間用空格隔開)

2. removeClass(class | fn)

? ?作用:刪除一個類 (如果像刪除多個，多個類名之間用空格隔開)

3.toggleClass(class|fn[,sw])

? ?作用:切換類 (有就刪除，沒有就添加)

? ?$(function()

? {

? ? ? var btns=document.getElementsByTagName("button");

? ? ?btns[0].onclick=function()

? ? {

? ? ? ? $("div").addClass("class1 class2");

? ? }

? ?btns[1].onclick=function()

? ?{

? ? ? $("div").removeClass("class2 class1");

? ?}

? btns[2].onclick=function()

? {

? ? ?$("div").toggleClass("class2 class1");

? }

? ?});

14. jQuery文本值相關(guān)的方法

? ?1. html([val | fn])

? ? ? ?和原生js中的innerHTML一模一樣

? ?2. text([val | fn])

? ? ? ?和原生js中的innerText一模一樣

? ?3. val([val | fn | array])

? ? ?var btns=document.getElementsByTagName("button");

? ? ?btns[0].onclick=function()

? ?{

? ? ? ?$("div").html("<p>我是段落<span>我是span</span></p>");

? }

? ?btns[1].onclick=function()

? {

? ? ?console.log($("div").html());

? }

? ?btns[2].onclick=function()

?{

? ?$("div").text("<p>我是段落<span>我是span</span></p>");

?}

? btns[3].onclick=function()

{

? ?console.log($("div").text());

}

?btns[4].onclick=function()

?{

? ?$("input").val("請輸入內(nèi)容");

}

?btns[5].onclick=function()

{

? ? console.log($("input").val());

}

15.jQuery操作css樣式的方法

? 1. 逐個設(shè)置

? ? $("div").css("width","100px");

? ? $("div").css("height","100px");

? ? $("div").css("background","red");

? 2. 鏈式設(shè)置? （注意點：鏈式操作如果大于三步，建議分開)?

? ? $("div").css("width","100px").css("height","100px").css("background","red");

??3. 批量設(shè)置

? ? ?$("div").css({

? ? ? ?width:"100px",

? ? ? ?height:"100px",

? ? ? ?background:"red"

? ? });

?4.獲取css樣式值

? ? $("div").css("width" );

16.jQuery尺寸與位置操作

? ? 1.尺寸操作

? ? ?var btns=document.getElementsByTagName("button");

? ? ? ?btns[0].onclick=function()

? ? ? ?{

? ? ? ? ? ?console.log($(".father").width()); //獲取

? ? ? ?}

? ? ? ? ?btns[1].onclick=function()

? ? ? ?{

? ? ? ? ?$(".father").width("500px");? //設(shè)置

? ? ? ?}

? ? 2.位置操作

? ? ? ? offset()?

? ? ? ? ?作用: 獲取或設(shè)置元素距離窗口的偏移位

? ? ? ? ? ? 獲取距離窗口左邊的偏移位? $(".son").offset().left；

? ? ? ? ? ? 獲取距離窗口上邊的偏移位? $(".son").offset().top;

? ? ? ? ? ? 設(shè)置距離窗口左邊的偏移位??$(".son").offset({left:10 });

? ? ? ? ? ??設(shè)置距離窗口上邊的偏移位??$(".son").offset({top:10 });

? ? ?position()? 只能獲取，不能設(shè)置

? ? ? ?作用: 獲取元素距離定位元素的偏移位

? ? ? ? ? ??獲取距離定位元素的偏移位? $(".son").position().left；

? ? ? ? ? ? 獲取距離定位元素的偏移位? $(".son").position().top;

17.jQuery的scrollTop方法

? 1.獲取滾動的偏移位

? ? $(".scroll").scrollTop()

? 2.設(shè)置滾動的偏移位

? ? $(".scroll").scrollTop("300");

? 3.獲取網(wǎng)頁滾動的偏移位 (為了保證瀏覽器的兼容性需要按照如下寫法）

? ? $("body").scrollTop()+$("html").scrollTop());

? 4.設(shè)置網(wǎng)頁滾動偏移位 (為了保證瀏覽器的兼容,設(shè)置網(wǎng)頁滾動偏移位的時候必須按照如下寫法）

? ?$("html,body").scrollTop(300);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,506評論 0贊 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,276評論 0贊 1
  • //------------------------- 第一章 認識JQuery ----------------...
    米塔塔閱讀 808評論 0贊 9
  • JQuery 1、JQuery特點 (1)輕量級(2)鏈式語法(3)簡單(4)寫的更少，做的更多 2、本地調(diào)用： ...
    Lizzy95閱讀 308評論 0贊 1
  • jQuery遍歷 - each() 方法 jQuery對象和DOM對象使用說明 Jquery css元素 默認情況...
    海里Hai閱讀 447評論 0贊 1

友情鏈接更多精彩內(nèi)容