jQuery選擇器解釋和說明

2022-03-14 12:22:37 字數 2983 閱讀 6481

jquery選擇器的意義在於快速的找出特定的dom元素,然後新增相應的行為。

基本選擇器

//

選擇 id為 one 的元素

$('#btn1

').click(function());

//選擇 class 為 mini 的所有元素

$('#btn2

').click(function());

//選擇 元素名是 div 的所有元素

$('#btn3

').click(function());

//選擇 所有的元素

$('#btn4

').click(function());

//選擇 所有的span元素和id為two的div元素

$('#btn5

').click(function());

層次選擇器

//

選取所有後代元素

$("ancestor descendant")

//選取父元素下的子元素(注意和第乙個的區別)

$("parent>child")

//選取緊跟在prev後面的next元素

$("prev+next")

/*選取prev元素之後的所有siblings元素,

可以用next方法來替代

eg:$(".one+div");等價於$(".one").next("div"); */

$("prev~siblings")

/*(注意和siblings()方法的區別,

siblings()和前後位置無關,匹配所有同輩節點)

可以用nextall()方法來替代

*/

過濾選擇器

1基本過濾選擇器

$('

#btn1

').click(function())

//選擇最後乙個div元素.

$('#btn2

').click(function())

//選擇class不為one的 所有div元素.

$('#btn3

').click(function())

//選擇 索引值為偶數 的div元素。

$('#btn4

').click(function())

//選擇 索引值為奇數 的div元素。

$('#btn5

').click(function())

//選擇 索引等於 3 的元素

$('#btn6

').click(function())

//選擇 索引大於 3 的元素

$('#btn7

').click(function())

//選擇 索引小於 3 的元素

$('#btn8

').click(function())

//選擇 所有的標題元素.比如h1, h2, h3等等...

$('#btn9

').click(function())

//選擇 當前正在執行動畫的所有元素.

$('#btn10

').click(function());

//選擇 當前獲取焦點的所有元素.

$('#btn11

').click(function());

2內容過濾選擇器

//

選取含有文字"di"的div元素.

$('#btn1

').click(function())

//選取不包含子元素(或者文字元素)的div空元素.

$('#btn2

').click(function())

//選取含有class為mini元素 的div元素.

$('#btn3

').click(function())

//選取含有子元素(或者文字元素)的div元素.

$('#btn4

').click(function())

3可見性過濾選擇器

//

給id為mover的元素新增動畫.

function animateit()

animateit();

//選取所有不可見的元素.包括.

$('#btn_hidden

').click(function())

//選取所有可見的元素.

$('#btn_visible

').click(function())

4屬性過濾選擇器

//

選取 屬性title值 以 en 開始 的div元素.

$('#btn1

').click(function())

//選取 屬性title值 含有 en 的div元素.

$('#btn2

').click(function())

//選取 屬性title等於en或以en為字首(該字串後跟乙個連字元'-')的元素

$('#btn3

').click(function())

//選取 屬性title用空格分隔的值中包含字元uk的元素.

$('#btn4

').click(function())

5子元素過濾選擇器

//

選取每個父元素下的第2個子元素

$('#btn1

').click(function())

//選取每個父元素下的第乙個子元素

$('#btn2

').click(function())

//選取每個父元素下的最後乙個子元素

$('#btn3

').click(function())

//如果父元素下的僅僅只有乙個子元素,那麼選中這個子元素

$('#btn4

').click(function())

jquery選擇器例項說明

選擇器 例項選取 所有元素 id lastname id lastname 的元素 class intro 所有 class intro 的元素 element p 所有 元素 class.class intro.demo 所有 class intro 且 class demo 的元素 first ...

jquery選擇器和css選擇器

今天開發中碰到乙個問題。class maindiv class mydiv name id div class mydiv name id div class mydiv name id div class mydiv name id div div 是這樣,我獲取class mydiv 下面的某乙...

jquery選擇器和dom選擇器區別

1.jquery選擇器css file loading css visibility visible 2.dom選擇器stylrdocument.getelementbuyid file loading style.visibility visible 因為jquery沒有.css屬性 3.jque...