首頁 > web前端 > H5教程 > 主體

JQuery $()用法總結

php中世界最好的语言
發布: 2018-06-04 11:59:07
原創
2300 人瀏覽過

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

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

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

$('p>ul')是

的直接後代裡找

    ;而$('p ul')是在

    的所有後代裡找


      所以,$('#sId>li')所選擇的是id為"sId"的所有
    • 孩子節點,即使這個
    • 的後代還有
    • 也不是它所找的範圍(所找到的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數組,但兩者的意思正好相反。前者是要找

        下所有
      • 子孫,而後者卻是在找所有子孫為
        • 陣列。
          在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')意為元素的子孫中不含的所有子孫的偶數項 
          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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板