JQuery $()用法總結

這次帶給大家JQuery $()用法總結，使用JQuery $()的注意事項有哪些，下面就是實戰案例，一起來看一下。

JQuery $()的用法：主要有三種，取表達式、取元素、取函數。

1、標籤選擇器$('p')、類別選擇器$('.myClass')、id選擇器 $('#myId')相對簡單，不多說。不過有一點－$('p>ul')和$('p ul')是有差別的， 

$('p>ul')是e388a4556c0f65e1904146cc1a846bee的直接後代裡找ff6d136ddc5fdfeffaf53ff6ee95f185；而$('p ul')是在e388a4556c0f65e1904146cc1a846bee的所有後代裡找ff6d136ddc5fdfeffaf53ff6ee95f185。
所以，$('#sId>li')所選擇的是id為"sId"的所有25edfb22a4f469ecb59f1190150159c6孩子節點，即使這個25edfb22a4f469ecb59f1190150159c6的後代還有25edfb22a4f469ecb59f1190150159c6也不是它所找的範圍（所找到的DOM對象，只是它本級的DOM對象。）。而$('#sId li:not(.horizo​​ntal)')，就是指類別名稱"sId"裡面的所有li的子孫中沒有horizo​​ntal類別的所有元素。 ——這裡的not()是一個negation pseudo class. 

這裡回傳的是一個jQurey對象，一個陣列對象，這個jQuery物件的長度可用.length()得到。

2、XPath選擇器 
如：選擇所有帶有title 屬性的鏈接，我們會這樣寫：$('a[@title]') 
[]裡帶@，說明[ ]裡的是元素的屬性；是個屬性選擇器 
[]裡沒@，說明[]裡的是元素的子孫。 
$('ul li')和$('ul[li]')雖然回傳的都是一個jQuery數組，但兩者的意思正好相反。前者是要找ff6d136ddc5fdfeffaf53ff6ee95f185下所有25edfb22a4f469ecb59f1190150159c6子孫，而後者卻是在找所有子孫為25edfb22a4f469ecb59f1190150159c6的ff6d136ddc5fdfeffaf53ff6ee95f185陣列。
在XPath中，要找一個「以...開頭」的屬性，用^=，如找一個name屬性是以mail開頭的input元素，就用 
$('input[@name^ ="mail"]') 
要找一個「以...結尾」的屬性，要用$= 
要找一個「不頭」的屬性，用*= 
3、不屬於上述的CSS和XPath的選擇器，就是自訂的選擇器了，用「:」表示，這裡要用的就是:first，:last，:parent ，:hidden，:visible，:odd，:even ，:not('xxx')， ":eq(0)"（始於0)，:nth(n），:gt(0)，:lt(0)，:contains("xxx") 
如：$('tr:not([th]):even')意為a34de1251f0d9fe1e645927f19a896e8元素的子孫中不含b4d429308760b6c2d20d6300079ed38e的所有子孫的偶數項 
4、還有幾個，簡單不解釋了 

$('th').parent()—— 
$(&#39;td:contains("Henry")&#39;).prev()——内容包含有"Henry"的<td>的上一个节点 
$(&#39;td:contains("Henry")&#39;).next()——内容包含有"Henry"的<td>的下一个节点 
$(&#39;td:contains("Henry")&#39;).siblings()——内容包含有"Henry"的<td>的所有兄弟节点

還有一個，就是end()，這個方法肯定是用在某個DOM節點執行了某一動作之後，還想在與其相關的節點上執行類似動作，這裡就要用到end()。用過end()方法之後，所回傳的是執行動作的那個節點的父節點上。舉例 
$(...).parent().find(...).addClass().end() 
這裡執行動作的節點是find(...)，就是陣列對象，它所做的動作是“addClass()”，之後，用了個end()，這時所返回的東東就是指向了parent()所指向的節點，也就是執行“addClass()”動作的那個數組物件的父節點。 
5、要直接存取DOM元素，可用get(0)的方法，如 
$('#myelement').get(0)，也可縮寫成$('#myelement')[0]            

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼操作頁面、視覺區、螢幕等寬高屬性

怎麼使用Web Storage存儲

以上是JQuery $()用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！