jQuery 1.x 版本和 2.x 版本有什么區別
- 2.x版本不在支持IE6\7\8，如果在IE9/10版本中使用“兼容性視圖”模式也將會受到影響。
- jQuery2.x的體積減少12%
jQuery 常見的選擇器
jQuery選擇器返回的是一個jQuery類數組的封裝對象。
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，括號內為選擇器可以填#id,.class等
$('div:even') // 所有div中index是偶數的div
$('div:odd') // 所有div中index是奇數的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') // 選擇正在執行動畫效果的元素
- 內容過濾器
$('div:contains(text)') // 內容中包含text的div元素
$('div:empty') //所有 內容為空的元素
$('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結尾的div
$('div[attr \*=value]') // 屬性attr包含value的div
- 子元素過濾器
$('ul li:nth-child(n)') //ul中第n個li子節點
$('ul li:nth-child(3n+1)') //ul中index符合3n+1的li節點
$('ul li:nth-child(even)') // ul中index為偶數的li子元素
$('ul li:nth-child(odd)') // ul中index為奇數的li子元素
$(‘ul li:first-child’) //ul中第一個li子節點
$('ul li:last-child') //ul中最后一個li子節點
$('ul li:only-child') //ul中只包含一個li元素的ul中的li
- 表單元素選擇器
$('input:text') // 含有中type=text的input
$(':checked') //被選中的radio/checkbox/option
選擇相關的函數
- .eq(index)，.get([index])
$('div').eq(2) // 獲取結果中index為2的jQuery對象
$('div').get(2) //獲取結果中index為2的jQuery對象后轉化為DOM對象,get()中不寫入參數則把所有jQuery對象轉換為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))
\\篩選當前結果集中符合條件的對象，參數可以是一個選擇器或者一個函數
$('li').filter(':even')
$('li').filter(function(index) {
return index % 3 == 2;
})
- .not(selector), .not(function(index))
\\從匹配的元素集合中移除指定的元素，和filter相反
- .is(String/Element/jQuery/Function類型)
is()函數實際上是判斷當前jQuery對象所匹配的元素與指定表達式expr所表示的元素是否存在交集，如果存在交集就返回true，否則返回false。
如果expr參數為字符串，則將其視作jQuery選擇器，用以表示該選擇器所匹配的元素。
如果expr參數為函數，is()函數將根據匹配的所有元素遍歷執行該函數，函數中的this將指向當前迭代的元素。is()還會為函數傳入一個參數：即該元素在匹配元素中的索引。
函數expr的返回值應該為true或者false。該函數的返回值將決定is()的返回值。循環執行時，只要該函數的返回值有一次為true，is()函數就立即返回true，否則返回false。
- .has(selector), .has(dom)
篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素
$('li').has('span')
