jQuery學習總結歸納

jQuery學習總結歸納

常用版本：jQuery-1.12.4.js（未壓縮） jQuery-1.12.4.min.js（已壓縮）

//	引入jQuery
<script src = 'jQuery-1.12.4.js'></script>

一.jQuery與DOM

1.DOM與jQuery相比：

（1）獲取元素名字太長
（2）程式碼冗餘（for）
（3）onclick註冊事件存在覆蓋問題，addEventListener()註冊事件不存在覆蓋問題，但有相容性問題
（4）沒有動畫效果，如果需要，就必須手動封裝

2.dom物件與jQuery物件的轉換

dom物件和jQuery物件不能混用，轉換
（1）dom物件轉成jQuery物件

$(dom物件)

（2）jQuery物件轉成dom物件
① 通過中括號[]
② get()方法

3.this的使用

this是個dom物件，所以this要使用jQuery的方法，一定要先轉成jQuery物件 $(this)

二.$符號

$的來源：jQuery
型別：函式
作用：根據引數的不同，作用不同
1.選擇器：可以獲取元素 $(‘div’)
2.函式：入口函式的作用 $(function(){})
3.dom物件：將dom物件轉成jQuery物件 $(document)
4.HTML字串：建立節點 $(‘HTML字串’)

多庫共存：jQuery釋放$符號的控制權

// 釋放$符號，並且把$符號的能力給C
var c = $.noConflict();

三.選擇器

1.CSS選擇器（將js中的選擇器放入jQuery的$裡面）

（1）id選擇器 $(’#ZhangSan’)
（2）標籤選擇器 $(‘li’)
（3）類選擇器 $(’.rendering’)
（4）並集選擇器 $(’.xiaoming, #ZhangSan’)
（5）交集選擇器 $(’.xiaoming.handsome’)
（6）子代選擇器 $(’.xiaoming>ol>li’)
（7）後代選擇器 $(‘xiaoming li’)

2.過濾選擇器

（1）:odd 從獲取到的元素中過濾出下標為奇數的元素
（2）:even 從獲取到的元素中過濾出下標為偶數的元素
（3）:first 從獲取到的元素中過濾出第一個元素
（4）:lase 從獲取到的元素中過濾出最後一個元素
（5）:eq 從獲取到的元素中過濾出指定下標的元素

$('li:odd')
$('li:even')
$('li:first')
$('li:last')
$('li:eq(4)')		// 獲取到裡li裡面的第5個元素

3.篩選選擇器

（1）children()
jq提供的children()方法，可以獲取元素內的所有子元素，支援傳參，引數為選擇器，可以根據選擇器篩選出指定的子元素

$(this).children('ul').show();
$(this).chileren('ul').hide();

（2）find() 找後代元素

$(this).find('li')

（3）sibilings() 獲取當前元素的所有兄弟元素，不包含自己

// 排他，突出等
$(this).css('opacity', 1);
$(this).sibings().css('opacity', 5);
// 簡化上面倆行程式碼，鏈式程式設計
$(this).css('opacity', 1).sibings().css('opacity', 5)

（4）next()和nextAll()
下一個兄弟元素和後面所有兄弟元素
（5）prev()和prevAll()
上一個兄弟元素和前面所有兄弟元素
（6）parent() 查詢父元素
（7）eq() 查詢指定下標元素

// 獲取li的第三個元素
$('li').eq(2);	// 相當於$('li:eq(2)');

四.樣式操作和屬性操作

1.css()操作

（1）獲取樣式

css(name)	// 只能獲取第一個

（2）設定樣式
① css(name, value)：
引數：name：樣式名 value：樣式值
② css(obj)
引數：包含多個樣式的物件

// 給li標籤設定樣式
$('li').css('fontSize', '50px');
$('li').css('color':'red', 'fontSize':'50px');

2.class操作

新增類選擇器：addClass()
移除類選擇器：removeClass()
判斷是否有該選擇器：hasClass()
切換類名（有就移除，沒有就新增）：toggleClass()

3.屬性attr操作

獲取屬性：attr(name)
設定單個屬性：attr(name, value)
設定多個屬性（引數為物件）：attr(obj)
移除屬性：removeAttr(name)

$(selector).attr(attribute)
$(selector).attr(attribute,value)
$(selector).attr({attribute:value, attribute:value ...})

prop方法和attr方法
① 對於表單元素的checked，selected，disable屬性，使用prop操作
② 除了表單元素的三個屬性使用prop方法外，其它都可以使用attr方法
③ 對於自定義屬性，使用attr方法(abc, index)
④ 對固有屬性，使用prop方法(title, id, style, checkd, selected, disable)

五.節點操作

1.新增節點

在元素裡面新增節點的方法：append() appendTo() prepend() prependTo()
（1）append()
語法：parent.append(child);
作用：把children新增到parent裡面，在最後面

$('div').append($('.outerP'))

（2）appendTo()
語法：children.appendTo(parent);
作用：把children新增到parent裡面，在最後面

$('.outerP').appendTo('div')
// 在每個 <p> 元素的結尾插入 <span> 元素
$("<b>Hello World!</b>").appendTo("p");	

（3）prepend()
語法：parent.prepend(child);
作用：把children新增到parent裡面，在最前面

$('div').prepend($('.outerP'))

（4）prependTo()
語法：children.prependTo(parent);
作用：把children新增到parent裡面，在最後面

$('.outerP').prependTo('div')
// 在每個 <p> 元素的開頭插入 <span> 元素
$("<span>Hello World!</span>").prependTo("p");

在元素前面後面新增節點的方法：append() appendTo() prepend() prependTo()
（5）after()和before()
A.after(B); 把B放在A前面
A.before(B); 把B放在A前面

$('div').after($($('div p')));
$('div').before($($('div p')));

2.清除節點

empty()

$('div').empty()

3.刪除節點

remove()

$('div').remove();

4.克隆節點

語法：$(selector).clone(true|false)
預設為深拷貝（拷貝元素裡面的內容）
參數列示是否克隆元素的事件，預設不拷貝事件
引數為布林型別值

var $P = $('.outerP').clone(true);
$('div').append($P);

jQuery庫

1. $為函式，引數不同，作用不同：
   (1) 選擇器：獲取元素 $(“div”)
   (2) 函式：作為入口函式 $(function(){ })
   (3) DOM物件：轉換成jQuery $(this)
   (4) HTML字串：建立節點 $(“HTML字串”)
2. 選擇器：CSS選擇器 過濾選擇器 篩選選擇器
3. CSS樣式操作 class樣式操作 attr(prop)屬性操作
4. 新增節點 清空節點 刪除節點
5. jQuery的特殊屬性操作：
   (1) val方法：設定和獲取表單元素的值($(“input”.val(“表單值”)))
   (2) html方法和text方法：同js中的innerHTML和innerText
6. 動畫：
   (1) show系列：show(speed, easing, callback) hide toggle
   (2) slide系列(使用同show系列)：slideDown slideUp slideToggle
   (3) fade系列：fadeIn fadeout fadeToggle
   (4) animate(obj, speed, easing, callback)及stop
7. jQuery事件：簡單事件，bind， delegate， on(type, selector, data, fn) 及off解綁
8. 阻止事件傳播與瀏覽器預設行為：return false
9. jQuery的特點：隱式迭代(偷偷地遍歷) 鏈式程式設計(通過.繼續操作，end方法(上次返回的物件))
10. 事件的迴圈機制：js是一門單執行緒結構(同步非同步問題)
    (1) 非同步程式碼：延時器 定時器 註冊事件中的事件處理函式
    (2) 巨集任務(script timeout)和微任務(promise)：先主執行緒執行完(事件迴圈)，再執行非同步程式碼(下一次迴圈)
11. 外掛：原理：(jQuery的原型：$.fn().外掛名(){ }) 懶載入外掛(引入，配置)等