jQuery
來源饑人谷課件赠潦，轉(zhuǎn)載請注明出處
jQuery介紹
為什么要用 jQuery
DOM API
難用
存在兼容性問題
功能太少稚铣，不能與時俱進
jQuery
兼容性好
API 友好
功能強大矛双，與時俱進
jQuery使用場景
DOM 操作較多（事件監(jiān)聽）
簡單的 AJAX
需要兼容多款瀏覽器
什么時候不用 jQuery
頁面交互極為簡單
頁面對流量有苛刻的要求
上級強制蛹找、團隊已經(jīng)有了 jQuery 的代替品
jQuery 做什么
選擇網(wǎng)頁元素
改變結(jié)果集
元素的操作：取值和賦值
元素的操作：移動
元素的操作：復(fù)制屹篓、刪除和創(chuàng)建
工具方法
事件操作
特殊效果
AJAX
jQuery 的兩種 API(只有這兩種用法,全是方法操作)
$.noConflict()
$.each()
$('ul').addClass()
$('p').text('hi')
簡記：$.abc() $('.xxx').abc()
ready
$(callback)
window.onload 事件
document 的 DOMContentLoaded 事件
$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )
jQuery選擇器
引用jQuery
BootCDN
使用unpkg.com發(fā)送至npm(主流)
使用jQuery獲取元素
我們可以通過document.getElementById等方法獲取DOM對象靶瘸，但是方法名稱長晃危，使用不方便，而且功能有限梨水，不能像CSS選擇器那樣靈活
jQuery定義了一套選擇器規(guī)則拭荤，和CSS選擇器目的一樣，都是為了選擇出符合特定規(guī)則的元素疫诽。講jQuery不得不提到其選擇器舅世，這是jQuery能夠快速流行的非常重要的原因旦委，為了方便使用者jQuery刻意和CSS選擇器使用相同的語法，幾乎支持所有類型的CSS3選擇器雏亚，當然也有一些其特定的選擇器
選擇器
基本選擇器
$('\*') 匹配頁面所有元素
$('#id') id選擇器
$('.class') 類選擇器
$('element') 標簽選擇器
組合/層次選擇器
$('E,F') 多元素選擇器缨硝，用”,分隔，同時匹配元素E或元素F
$('E F') 后代選擇器评凝，用空格分隔追葡，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
$(E>F) 子元素選擇器奕短，用”>”分隔宜肉，匹配E元素的所有直接子元素
$('E+F') 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F
$('E~F') 普通相鄰選擇器（弟弟選擇器）翎碑，匹配E元素之后的同級元素F（無論直接相鄰與否）
$('.class1.class2') 匹配類名中既包含class1又包含class2的元素
基本過濾選擇器
$("E:first") 所有E中的第一個
$("E:last") 所有E中的最后一個
$("E:not(selector)") 按照selector過濾E
$("E:even") 所有E中index是偶數(shù)
$("E:odd") 所有E中index是奇數(shù)
$("E:eq(n)") 所有E中index為n的元素
$("E:gt(n)") 所有E中index大于n的元素
$("E:lt(n)") 所有E中index小于n的元素
$(":header") 選擇h1~h6 元素
$("div:animated") 選擇正在執(zhí)行動畫效果的元素
內(nèi)容過濾器
$('E:contains(value)') 內(nèi)容中包含value值的元素
$('E:empty') 內(nèi)容為空的元素
$('E:has(F)') 子元素中有F的元素谬返，$('div:has(a)'):包含a標簽的div
$('E: parent') 父元素是E的元素，$('td: parent'):父元素是td的元素
可視化選擇器
$('E:hidden') 所有被隱藏的E
$('E:visible') 所有可見的E
屬性過濾選擇器
$('E[attr]') 含有屬性attr的E
$('E[attr=value]') 屬性attr=value的E
$('E[attr !=value]') 屬性attr日杈！=value的E
$('E[attr ^=value]') 屬性attr以value開頭的E
$('E[attr $=value]') 屬性attr以value結(jié)尾的E
$('E[attr \*=value]') 屬性attr包含value的E
$('E[attr][attr \*=value]') 可以連用
子元素過濾器
$('E:nth-child(n)') E的第n個子節(jié)點
$('E:nth-child(3n+1)') E的index符合3n+1表達式的子節(jié)點
$('E:nth-child(even)') E的index為偶數(shù)的子節(jié)點
$('E:nth-child(odd)') E的index為奇數(shù)的子節(jié)點
$('E:first-child') 所有E的第一個子節(jié)點
$('E:last-child') 所有E的最后一個子節(jié)點
$('E:only-child') 只有唯一子節(jié)點的E的子節(jié)點
表單元素選擇器
$('E:type') 特定類型的input
$(':checked') 被選中的checkbox或radio
$('option: selected') 被選中的option
.eq(index), .get([index])
對于一個特定結(jié)果集遣铝，我們想獲取到指定index的jQuery對象，可以使用eq方法
$('div').eq(3);//獲取結(jié)果集中的第四個jQuery對象
我們可以通過類數(shù)組下標的獲取方式或者get方法獲取指定index的DOM對象莉擒，也就是我們說的jQuery對象轉(zhuǎn)DOM對象
$('div')[2];
$('div').eq(2);
get()不寫參數(shù)把所有對象轉(zhuǎn)為DOM對象返回酿炸。addClassList,removeClassList同樣適用
兄弟元素的獲取
.next([selector]), .prev([selector])
next取得匹配元素集合中的每一個元素緊鄰的后面同輩元素的元素集合。如果提供一個選擇器涨冀，那么只有緊跟著的兄弟元素滿足選擇器時填硕，才會返回次元素。prev真好相反鹿鳖，獲取元素之前的同輩元素
$('.test').next();
$('.test').prev('li');
.nextAll([selector]), .prevAll([selector])
nextAll獲得每個匹配元素集合中每個元素所有后面的同輩元素扁眯，選擇性篩選的選擇器，而prevAll與之相反翅帜，獲取元素前面的同輩元素
.siblings([selectors])
獲得匹配元素集合中每個元素的兄弟元素姻檀，可以提供一個可選的選擇器
$('li.third-item').siblings()
父子元素獲取
.parent([selector])
取得匹配元素集合中，每個元素的父元素涝滴，可以提供一個可選的選擇器
$('li.item-a').parent()
.parents([selector])
獲得集合中每個匹配元素的祖先元素绣版，可以提供一個可選的選擇器作為參數(shù)
$('li.item-a').parents('div')
.children([selector])
獲得匹配元素集合中每個元素的子元素，選擇器選擇性篩選
$('ul.level-2').children()
.find([selector])
查找符合選擇器的后代元素
$('ul').find('li.current');
篩選當前結(jié)果集
.first()
獲取當前結(jié)果集中的第一個對象
.last()
獲取當前結(jié)果集的最后一個對象
.filter(selector), .filter(function(index))
篩選當前結(jié)果集中符合條件的對象歼疮，參數(shù)可以是一個選擇器或者一個函數(shù)
$('li').filter(':even')
$('li').filter(function(index) {
return index % 3 == 2;
})
.not(selector), .not(function(index))
從匹配的元素集合中移除指定的元素杂抽，和filter相反
.is(selector), is(function(index)), is(dom/jqObj)
判斷當前匹配的元素集合中的元素，是否為一個選擇器腋妙，DOM元素，或者jQuery對象讯榕，如果這些元素至少一個匹配給定的參數(shù)骤素，那么返回true
if ( $target.is("li") ) {
$target.css("background-color", "red");
}
.has(selector), .has(dom)
篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素
$('li').has('span')
