層次選擇器:
$('div p');//選取
div下的所有的p元素
$('div>p').css('border','1px solid red');//只選取
div下的直接子元素
//相鄰的元素
$('div ~ p).css('border','1px solid red');與
$('div').nextall('p')
等價;//
表示div
後面的所有p
兄弟元素
$('div ~ *').css('border','1px solid red');//表示
div後面的所有兄弟元素
$('div +p').css('border','1px solid red');與
$('div').next('p')
等價//
這種寫法表示
div後
只找緊挨著的第乙個兄弟元素,並且該元素是p
。獲得兄弟元素的方法:
next(); //當前元素之後的緊鄰著的第乙個兄弟元素(下乙個)
nextall();//當前元素之後的所有兄弟元素
prev();//當前元素之前的緊鄰著的兄弟元素(上乙個)
prevall();//當前元素之前的所有兄弟元素
siblings();//當前元素的所有兄弟元素
基本過濾選擇器:
$('p:first')與
$('p').first()
是等價的。獲取所有
p元素中的第乙個p元素
$('p:last')與
$('p').last()
$('p:eq(2)')在所有的
p元素中找到索引為
2的元素
$('p:even')選取所有奇數的p標籤
$('p:odd')選取所有偶數的p標籤
$('p:not(.tst)').css();選取所有的不應用
.tst
這種樣式的p元素
not後面寫乙個選擇器名稱
$('p:gt(1)')選取所有索引值大於1的
p元素$('p:lt(3)')選取所有索引值小於3的
p元素。
$(':header')選取頁面上所有的
h1-h6
的元素。(如果這樣寫的話,中間絕對不能有空格。)
屬性過濾選擇器:
$("div[id]")選取有
id屬性的
$("div[title=test]")選取
title
屬性為「
test」的,
jquery
中沒有對
getelementsbyname
進行封裝,用$("input[name=abc]")
$("div[title!=test]")選取
title
屬性不為「
test
」的還可以選擇開頭【name^=
值】、結束【
name$=
值】、包含【
name*=
值】等,條件還
可以復合。【[
屬性1=a][
屬性2=b]
…】(*
)表單物件屬性選擇器(過濾器):
$("#form1 :enabled")選取id為
form1
的表單內所有啟用的元素
$("#form1 :disabled")選取id為
form1
的表單內所有禁用的元素
$(「input:checked」)
選取所有選中的元素(
radio
、checkbox),
這個中間不能加空格
.$("select :selected")選取所有選中的選項元素(下拉列表)
表單濾選擇器:
$('#form1:enabled');//這個表示能夠啟用的且id為
form1
的標籤$('#form1 :enabled');
//這個表示能夠啟用的且id為
form1
下的所有啟用的元素。
$('input:checked')
$('input:disabled')
$ ('select:selected')
$(「:input")
選取所有、、
和元素。和
$("input")
不一樣,
$("input")只獲得
$(":text")選取所有單行文字框,等價於
$("input[type=text]"),$(『
input[type=text]
』),$(
『:text』);
$(「:password」)
選取所有密碼框。
內容過濾選擇器:
:contains(text):過濾出包含給定文字的元素。
:empty
包含沒有子元素的或者是內容為空的元素。
:has(selecttor)
:parent 獲得有子元素的元素。
可見性過濾器:
:hidden
選取所有不可見元素包括:(
如果直接寫
:hidden
則會包含
head\title\script\style….)
1.表單元素
type=
「hidden
」2.設定
css的
display:none
3.高度和寬度明確設定為
0的元素。
4.父元素時隱藏的,所以子元素也是隱藏的
visibility: hidden 與
opacity為0
不算,因為還佔位所以不認為是
hidden.(
與之前版本
jquery不太一樣,
1.3.2之前)
:visible
選取所有可見元素
子元素過濾選擇器:
first-child 與
first
的區別:
first
只能選取第乙個,而
first-child,
則能選取每個子元素的第乙個元素。
last-child:
only-child:匹配當前父元素中只有乙個子元素的元素。
nth-child:對比
eq()
來理解,
eq()
值匹配乙個,
nth-child()
為每個父元素都要匹配乙個子元素。
nth-child(index),index從1開始
nth-child(even)
nth-child(odd)
nth-child(3n),選取
3的倍數的元素
nth-child(3n+1)滿足
3的倍數
+1的元素
注意:1.通過
jquery
選擇器選擇的物件本身就是乙個
jquery
物件,選擇器具有隱式迭代 的作用,例如:
$('p').click(function());
是為所有的p
都注釋了
click
事件。2.
無論選擇器選擇了幾個元素返回的乙個元素都是乙個集合物件,如果沒有找到相應的元素,則這個集合物件的length值為0
,如果選擇到了元素,這個
length
的元素就是選擇的元素的索引值。所以也根據這個屬性來判斷元素是否存在。例如:
iif($('#div').length>0)//判斷元素是否存在
3.在事件中
this
還是表示當前觸發事件的元素的物件,但是這裡的
this
是dom
物件而不是
jquery
物件。如果需要執行
jquery
中的方法或屬性時,應該把
this
轉換為jquery
物件轉換方式為:$(this);
jQuery中常用的選擇器 (常用的選擇器有哪些)
一 基本選擇器 基本選擇器是jquery中最常用也是最簡單的選擇器,它通過元素的id class和標籤名等來查詢dom元素。1 id選擇器 id 描述 根據給定的id匹配乙個元素,返回單個元素 注 在網頁中,id名稱不能重複 示例 katex parse error expected eof got...
jquery 常用選擇器
myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用myclass類的css的所有元素 選擇文件中的所有的元素,可以運用多種的選擇方...
jQuery常用選擇器
1.所有的函式大體分為四組 1 dom操作函式 2 事件處理函式 3 動畫函式 4 ajax操作 2.jquery函式的特性 1 幾乎所有的函式都自帶迴圈功能,可以對選中的元素進行遍歷 2 幾乎所有的函式都返回jquery物件本身,可以實現方法的鏈式呼叫 3 jquery物件轉換為dom物件 div...