jQuery 1.x 版本和 2.x 版本有什么區(qū)別
- 2.x版本不在支持IE6\7\8，如果在IE9/10版本中使用“兼容性視圖”模式也將會受到影響。
- jQuery2.x的體積減少12%
jQuery 常見的選擇器
jQuery選擇器返回的是一個jQuery類數(shù)組的封裝對象。
jQuery對象
- 基本選擇器
$('#id') // id選擇器。
$('div') // 標簽選擇器，
$('.class') // 類選擇器，
$('*') // 選取文檔中所有的元素
- 組合選擇器
$('div,ul') // 多元素選擇器，同時匹配多個元素
$('div ul') // 后代選擇器，匹配div元素中后代元素ul
$('div>ul') // 子元素選擇器，匹配div元素中素有的子元素ul
$('div+ul') // 直接相鄰選擇器，匹配div元素之后的直接相鄰的同級元素ul
$('div~ul') // 普通相鄰先選擇器，匹配div元素之后的同級元素ul
$('.class1.class2') // 匹配同時包含class1和class2的元素
- 基本過濾選擇器
$('div:first') // 選擇頁面中所有div中第一
$('div:last') // 選擇頁面中所欲div中的最后一個
$('div:not(:empty)') //選擇頁面中不為空的div，括號內(nèi)為選擇器可以填#id,.class等
$('div:even') // 所有div中index是偶數(shù)的div
$('div:odd') // 所有div中index是奇數(shù)的div
$('div:eq(n)') //所有div中index為n的div
$('div:agt(n)') // 所有div中index大于n的元素
$('div:lt(n)') //所有div中index小雨n的元素
$(':header') // 選擇好h1~h6元素
$('div:animated') // 選擇正在執(zhí)行動畫效果的元素
- 內(nèi)容過濾器
$('div:contains(text)') // 內(nèi)容中包含text的div元素
$('div:empty') //所有 內(nèi)容為空的元素
$('div:has(ul)') //子元素中有ul的div元素
$('div:parent') // 所有不為空的div元素
- 可視化選擇器
$('div:hidden') // 所有被隱藏的div
$('div:visible') //所有可見的div
- 屬性過濾選擇器
$('div[attr]') // 含有屬性attr的div元素
$('div[attr=value]') //屬性attr=value的元素
$('div[attr!=value]') //屬性attr!=value的元素
$('div[attr^=value]') //屬性attr以value開頭的div
$('div[attr$=value]') //屬性attr以value結(jié)尾的div
$('div[attr \*=value]') // 屬性attr包含value的div
- 子元素過濾器
$('ul li:nth-child(n)') //ul中第n個li子節(jié)點
$('ul li:nth-child(3n+1)') //ul中index符合3n+1的li節(jié)點
$('ul li:nth-child(even)') // ul中index為偶數(shù)的li子元素
$('ul li:nth-child(odd)') // ul中index為奇數(shù)的li子元素
$(‘ul li:first-child’) //ul中第一個li子節(jié)點
$('ul li:last-child') //ul中最后一個li子節(jié)點
$('ul li:only-child') //ul中只包含一個li元素的ul中的li
- 表單元素選擇器
$('input:text') // 含有中type=text的input
$(':checked') //被選中的radio/checkbox/option
選擇相關(guān)的函數(shù)
- .eq(index)，.get([index])
$('div').eq(2) // 獲取結(jié)果中index為2的jQuery對象
$('div').get(2) //獲取結(jié)果中index為2的jQuery對象后轉(zhuǎn)化為DOM對象,get()中不寫入?yún)?shù)則把所有jQuery對象轉(zhuǎn)換為DOM對象
- .next([selector])，.prev([selectro])
$('div').next() //返回每個div緊鄰的后面的同輩元素。如果提供一個選擇器，那么只有緊跟著的兄弟元素滿足選擇器時，才會返回此元素。
$('div').prev() // 返回每個div緊鄰的前面的同輩元素。如果提供一個選擇器，那么只有緊跟著的兄弟元素滿足選擇器時，才會返回此元素。
- .nextAll([selector]), .prevAll([selector])
$('div').nextAll() //獲得每個div元素集合中每個元素所有后面的同輩元素，選擇性篩選的選擇器，prevAll與之相反，獲取元素前面的同輩元素
- .siblings([selector])
$('div').siblings() // 獲得每個div元素的兄弟元素。
- .parent([selector])
$('li').parent() //獲取每個li的父元素
- .parents([selector])
$('li').parents([selector]) // 獲取每個li元素的祖先元素
- .children([selector])
$('ul').children() // 獲得每個ul元素的子元素
- .find([selector])
$('ul').find('li.active') // 查找每個子元素中 class為active的li子元素
- .first()
$('div').first(); //獲取所有div元素中的第一個
- .last()
$('div').last() //獲取所有div元素中最后一個
- .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(String/Element/jQuery/Function類型)
is()函數(shù)實際上是判斷當前jQuery對象所匹配的元素與指定表達式expr所表示的元素是否存在交集，如果存在交集就返回true，否則返回false。
如果expr參數(shù)為字符串，則將其視作jQuery選擇器，用以表示該選擇器所匹配的元素。
如果expr參數(shù)為函數(shù)，is()函數(shù)將根據(jù)匹配的所有元素遍歷執(zhí)行該函數(shù)，函數(shù)中的this將指向當前迭代的元素。is()還會為函數(shù)傳入一個參數(shù)：即該元素在匹配元素中的索引。
函數(shù)expr的返回值應(yīng)該為true或者false。該函數(shù)的返回值將決定is()的返回值。循環(huán)執(zhí)行時，只要該函數(shù)的返回值有一次為true，is()函數(shù)就立即返回true，否則返回false。
- .has(selector), .has(dom)
篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素
$('li').has('span')
