標籤: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 元素