JQuery，簡(jiǎn)單易學(xué)的JavaScript庫，大伙們應該不陌生吧，但越簡(jiǎn)單的東西，很多東西越容易被忽視掉。

下面介紹一些JQuery中往往容易被忽視的知識點(diǎn)（文章不會(huì )全方面介紹JQuery，以下大部分知識，大家平常都用的相對較少，但卻不可忽視）~

0、js/jQuery入口函數

$(function() {

});

是

$(document).ready(function() {

});

的簡(jiǎn)寫(xiě)形式

js入口：

window.onload = function() {

}

1、隱藏/顯示/隱藏顯示切換

// 隱藏、顯示

$(selector).hide(speed, callback);

$(selector).show(speed, callback);

$(selector).toggle(speed, callback);

// 淡入、淡出

$(selector).fadeIn(speed, callback);

$(selector).fadeOut(speed, callback);

$(selector).fadeToggle(speed, callback);

$(selector).fadeTo(speed, opacity callback); // 第2個(gè)參數為透明值，透明值從1漸變到opacity

// 滑入、滑出

$(selector).slideDown(speed, callback);

$(selector).slideUp(speed, callback);

$(selector).slid(speed, callback);

重點(diǎn)在于方法里面的2個(gè)參數：

speed：顯示/隱藏速度，填入毫秒數，有一種動(dòng)畫(huà)的效果

callback：執行完后，回調的函數（輸入需要回調的函數名稱(chēng)，不要加括號）

2、動(dòng)畫(huà)：

// 動(dòng)畫(huà)

$(selector).animate({params},speed,callback);

// 停止動(dòng)畫(huà)，在播放動(dòng)畫(huà)的途中，可以停止動(dòng)畫(huà)

$(selector).stop();

params：形成動(dòng)畫(huà)的CSS屬性，例如：{left: '100px', top: '100px'}

speed：動(dòng)畫(huà)的時(shí)間

callback：回調函數

3、JQuery鏈：

一般我們是一次寫(xiě)一條jquery語(yǔ)句，jquery里面有一種“鏈”，在相同的元素下，運行多條命令

如：$(selector).hide(1000).show(1000);

優(yōu)點(diǎn)：瀏覽器就不必多次查找相同的元素了

4、元素屬性的設置與讀取

// 獲取屬性值

$(selector).attr(屬性名稱(chēng));

// 設置屬性值

$(selector).attr(屬性名稱(chēng)， 屬性值);

例如：

$(selector).attr({

'href':'baidu.com',

'title': '哇咔咔'

});

5、添加元素：

append() - 在被選元素的結尾插入內容

prepend() - 在被選元素的開(kāi)頭插入內容

after() - 在被選元素之后插入內容

before() - 在被選元素之前插入內容

例如：

$(selector).append(txt1, txt2, txt3);

6、刪除元素：

remove() - 刪除被選元素（及其子元素）

remove(過(guò)濾規則) - 刪除指定的元素

empty() - 從被選元素中刪除子元素

例如：

$(selector).remove();

$(selector).empty();

// 刪除選中的所有p元素中class=‘tmp’的元素們

$('p').remove('.tmp');

7、CSS類(lèi)：

addClass() - 向被選元素添加一個(gè)或多個(gè)類(lèi)

removeClass() - 從被選元素刪除一個(gè)或多個(gè)類(lèi)

toggleClass() - 對被選元素進(jìn)行添加/刪除類(lèi)的切換操作

css() - 設置或返回樣式屬性

其中的參數都是css樣式名稱(chēng)，如：

addClass('myColor1 myColor2');

$(selector).css({

'width': '100px',

'height': '100px'

});

8、元素尺寸的計算方式：

補充：

$(selector).offset().top - 上邊距

$(selector).offset().bottom - 下邊距

$(selector).offset().left - 左邊距

$(selector).offset().right - 右邊距

9、祖先/后代/同胞

parent() - 直接父元素

parents([x]) - 所有父元素，參數可選（加入參數，可以過(guò)濾想要的父元素）

parentsUntil([x]) - 返回2個(gè)元素之間的所有父元素，參數可選（不加入參數，默認和parents功能一樣）

children([x]) - 返回所有直接子元素，參數可選（加入參數，可以過(guò)濾想要的子元素）

find(x) - 通過(guò)參數，查找給定的元素，參數必須

siblings([x]) - 所有同胞元素（在同一級的所有元素），參數可選（加入參數，可以過(guò)濾想要的同胞元素）

next() - 下一個(gè)同胞元素

nextAll([x]) - 跟隨其后的是所有同胞元素

nextUntil([x]) - 介于2個(gè)元素之間的所有元素

prev() - 同上

prevAll([x]) - 同上

prevUntil([x]) - 同上

例如：

$(selector).parents('p'); // 返回所有父元素中p節點(diǎn)元素

$('#div').parentsUtil('#div1'); // 返回id=div與id=div1之間的所有父元素

10、過(guò)濾：

first()

last()

eq(x) - 選取第x + 1個(gè)元素（下表從0開(kāi)始）

filter(x) - 根據參數，過(guò)濾想要的元素

not(x) - filter(x)返回結果相反

例如：

$('p').filter('.url');

小編的分享就到這了，喜歡的童鞋們可以點(diǎn)一波關(guān)注哦，后面會(huì )有更精彩的內容等著(zhù)大家~