Jquery中的選取器

來源:互聯網
上載者:User

標籤:jquery

Jquery隨著自身的發展,已經有越來越多的人開始瞭解Jquery,並且慢慢喜歡上了她,她是那麼的簡潔,那麼的令人著迷,並吸引了一批愛好者為她做嫁衣。好了,讓我來介紹一下Jquery的選取器吧。Jquery中的選取器有很多類,比如Id選取器,class選取器,html標籤選取器等。
Id選取器:就是通過一個html元素的id來選擇它,因為html中的id是唯一的,所以通過id,我們可以找到唯一的html元素。比如:<div id="div1" class="balck_tree"><p></p></div>我們可以通過$("#div1")來選擇外面的div,#是用來表示我進行的是通過id的選擇。
Class選取器:就是通過css中的class來選擇一個元素或者多個元素。比如上面的例子中,我們也可以通過class來選擇外面的div,$(".balck_tree"),括弧裡的.表示我進行的是通過class的選擇。
Html標籤選取器:通過html的標籤來選擇元素,比如還是上面的例子,我們也可以用$("div")來選擇,不過要記住,這樣會選擇頁面上所有的div,所以他一般是用來選擇那些大類,然後配合其他的選取器來使用。
下面介紹一些常用的選取器的用法:
$("*") 所有元素
$("#lastname") id="lastname" 的元素
$(".intro") 所有 class="intro" 的元素
$("p") 所有 <p> 元素
$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
   
$("p:first") 第一個 <p> 元素
$("p:last") 最後一個 <p> 元素
$("tr:even") 所有偶數 <tr> 元素
$("tr:odd") 所有奇數 <tr> 元素
   
$("ul li:eq(3)") 列表中的第四個元素(index 從 0 開始)
$("ul li:gt(3)") 列出 index 大於 3 的元素
$("ul li:lt(3)") 列出 index 小於 3 的元素
$("input:not(:empty)") 所有不為空白的 input 元素
   
$(":header") 所有標題元素 <h1> - <h6>

   
$(":contains(‘W3School‘)") 包含指定字串的所有元素
$(":empty") 無子(元素)節點的所有元素
$("p:hidden") 所有隱藏的 <p> 元素
$("table:visible") 所有可見的表格
   
$("[href]") 所有帶有 href 屬性的元素
$("[href=‘#‘]") 所有 href 屬性的值等於 "#" 的元素
$("[href!=‘#‘]") 所有 href 屬性的值不等於 "#" 的元素
$("[href$=‘.jpg‘]") 所有 href 屬性的值包含以 ".jpg" 結尾的元素
   
$(":input") 所有 <input> 元素
$(":text") 所有 type="text" 的 <input> 元素
$(":password") 所有 type="password" 的 <input> 元素
$(":radio") 所有 type="radio" 的 <input> 元素
$(":checkbox") 所有 type="checkbox" 的 <input> 元素
$(":submit") 所有 type="submit" 的 <input> 元素
$(":reset") 所有 type="reset" 的 <input> 元素
$(":button") 所有 type="button" 的 <input> 元素
$(":image") 所有 type="image" 的 <input> 元素
$(":file") 所有 type="file" 的 <input> 元素
   
$(":enabled") 所有啟用的 input 元素$(":disabled")  所有禁用的 input 元素
$(":selected") 所有被選取的 input 元素
$(":checked") 所有被選中的 input 元素

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.