在前面的章節中,我們展示了一些有關如何選取 html 元素的例項。
關鍵點是學習 jquery 選擇器是如何準確地選取您希望應用效果的元素。
jquery 元素選擇器和屬性選擇器允許您通過標籤名、屬性名或內容對 html 元素進行選擇。
選擇器允許您對 html 元素組或單個元素進行操作。
在 html dom 術語中:
選擇器允許您對 dom 元素組或單個 dom 節點進行操作。
jquery 使用 css 選擇器來選取 html 元素。
$("p") 選取 元素。
$("p.intro") 選取所有 class="intro" 的 元素。
$("p#demo") 選取所有 id="demo" 的 元素。
jquery 使用 xpath 表示式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jquery css 選擇器可用於改變 html 元素的 css 屬性。
下面的例子把所有 p 元素的背景顏色更改為紅色:
this is a paragraph.
this is another paragraph.
click me
語法描述
$(this)
當前 html 元素
$("p")
所有 元素
$("p.intro")
所有 class="intro" 的 元素
$(".intro")
所有 class="intro" 的元素
$("#intro")
id="intro" 的元素
$("ul li:first")
每個 的第乙個 元素
所有帶有以 ".jpg" 結尾的屬性值的 href 屬性
$("div#intro .head")
id="intro" 的 元素中的所有 class="head" 的元素
選擇器例項選取
*$("*")
所有元素
#id$("#lastname")
id="lastname" 的元素
.class
$(".intro")
所有 class="intro" 的元素
element
$("p")
所有 元素
.class.class
$(".intro.demo")
所有 class="intro" 且 class="demo" 的元素
:first
$("p:first")
第乙個 元素
:last
$("p:last")
最後乙個 元素
:even
$("tr:even")
所有偶數 元素
:odd
$("tr:odd")
所有奇數 元素
:eq(index)
$("ul li:eq(3)")
列表中的第四個元素(index 從 0 開始)
:gt(no)
$("ul li:gt(3)")
列出 index 大於 3 的元素
:lt(no)
$("ul li:lt(3)")
列出 index 小於 3 的元素
:not(selector)
$("input:not(:empty)")
所有不為空的 input 元素
:header
$(":header")
所有標題元素 -
:animated
所有動畫元素
:contains(text)
$(":contains('w3school')")
包含指定字串的所有元素
:empty
$(":empty")
無子(元素)節點的所有元素
:hidden
$("p:hidden")
所有隱藏的 元素
:visible
$("table:visible")
所有可見的**
s1,s2,s3
$("th,td,.intro")
所有帶有匹配選擇的元素
[attribute]
$("[href]")
所有帶有 href 屬性的元素
[attribute=value]
$("[href='#']")
所有 href 屬性的值等於 "#" 的元素
[attribute!=value]
$("[href!='#']")
所有 href 屬性的值不等於 "#" 的元素
[attribute$=value]
所有 href 屬性的值包含以 ".jpg" 結尾的元素
:input
$(":input")
所有 元素
:text
$(":text")
所有 type="text" 的 元素
:password
$(":password")
所有 type="password" 的 元素
:radio
$(":radio")
所有 type="radio" 的 元素
:checkbox
$(":checkbox")
所有 type="checkbox" 的 元素
:submit
$(":submit")
所有 type="submit" 的 元素
:reset
$(":reset")
所有 type="reset" 的 元素
:button
$(":button")
所有 type="button" 的 元素
:image
$(":image")
所有 type="image" 的 元素
:file
$(":file")
所有 type="file" 的 元素
:enabled
$(":enabled")
所有啟用的 input 元素
:disabled
$(":disabled")
所有禁用的 input 元素
:selected
$(":selected")
所有被選取的 input 元素
:checked
$(":checked")
所有被選中的 input 元素
jQuery學習教程十七 jQuery 尺寸
通過 jquery,很容易處理元素和瀏覽器視窗的尺寸。jquery 提供多個處理尺寸的重要方法 width 方法設定或返回元素的寬度 不包括內邊距 邊框或外邊距 height 方法設定或返回元素的高度 不包括內邊距 邊框或外邊距 下面的例子返回指定的 元素的寬度和高度 顯示 div 的尺寸 widt...
jQuery學習之二 jQuery效果
1 jquery 效果之隱藏和顯示 selector toggle speed,callback 隱藏 顯示切換 可選的 speed 引數規定隱藏 顯示的速度,可以取以下值 slow fast 或毫秒。可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。利用隱藏和顯示功能可以實現tab...
二 jquery學習 jquery的效果
jquery的基本效果包括隱藏 顯示 切換,滑動,淡入淡出,以及動畫等等。一 隱藏與顯示 通過呼叫hide 和show 方法實現。語法如下 selector hide speed,callback selector show speed,callback 可選的 speed 引數規定隱藏 顯示的速度...