jQuery學習筆記之選擇器(繼基礎核心篇)

2021-07-30 07:37:50 字數 3591 閱讀 8954

常規選擇器

1、$('input[屬性]').val();獲取表單內容

表單選擇器

:input 選取所有input button select textarea元素

:text

:password

:radio

:chechbox

:submit

:reset

:image

:button

:file

:hidden

都是選取對應的屬性的集合元素

表單過濾器

:enabled 選取所有可用元素

:disabled 選取所有不可用元素

:cheched 選取所有被選中的元素。單選和複選字段

:selected選取所有被選中的元素,下拉列表

過濾選擇器jquery可以相容ie6-8不相容的偽類選擇器(根據元素的特殊狀態來選取元素,它們就是偽類和偽元素。)

基本過濾選擇器

選取第乙個元素(:first)

//選擇第乙個div元素.

$('#btn1').click(function())

選取最後乙個元素(:last)

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

$('#btn2').click(function())1

去除所有的與給定選擇器匹配的元素(:not(selector))

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

$('#btn3').click(function())

選取索引是偶數的所有元素,索引從0開始(:even)

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

$('#btn4').click(function())

選取索引是奇數的所有元素,索引從0開始(:odd)

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

$('#btn5').click(function())

選取索引等於指定index的元素,索引從0開始(:eq(index))

//選擇 索引等於 3 的元素,從上往下是0,1,2……從下往上是-1,-2,-3……(注意不是從0開始)

$('#btn6').click(function())

選取索引大於指定index的元素,索引從0開始(:gt(index))

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

$('#btn7').click(function())

選取索引小於指定index的元素,索引從0開始(:lt(index))

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

$('#btn8').click(function())

選取標題元素(:header)

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

$('#btn9').click(function())

選取當前正在執行的動畫的所有元素(:animated)

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

$('#btn10').click(function());

選取當前獲取焦點的所有元素(:focus)

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

$('#btn11').click(function());

內容過濾選擇器

選取包含指定文字的元素(:contains(text))

//選取含有文字"di"的div元素.注意,裡面乙個用單引號乙個用雙引號,不能全都單引號或者全都雙引號

$('#btn1').click(function())

選取不包含子元素或文字的空元素(:empty)

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

$('#btn2').click(function())

選取含有選擇器匹配元素的元素(:has(selector))

//選取其子元素含有class為mini的元素.注意選擇的是其子元素

$('#btn3').click(function())

選取包含子元素或文字的空元素(:parent)

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

$('#btn4').click(function())

注意這裡不能再外面寫$('div').parent().css……因為jquery裡有parent的方法,即獲取父元素

可見性過濾器

選取不可見的元素(:hidden)

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

$('#btn_hidden').click(function())//將隱藏的內容設定背景色,並3秒鐘慢慢顯現

選取可見的元素(:visible)

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

$('#btn_visible').click(function())

子元素過濾選擇器

選取每個父元素下的第乙個子元素,返回集合元素

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

$('#btn2').click(function())

選取每個父元素下的最後乙個子元素,返回集合元素

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

$('#btn3').click(function())

選取每個父元素下的唯一子元素,返回集合元素

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

$('#btn4').click(function())

選取每個父元素下的第index個子元素或者奇偶元素odd/even,index從1算起

//選取每個父元素div下的第3的倍數個子元素

$('#btn1').click(function())

其他方法

is 判斷方法,舉例$('li').is('.class')或$('.class').is($('li'))

就是整體檢測li中是否有class為.class,返回true和false

精確檢測比如$('.class').is($('li').first())就是檢測第乙個li元素

$('.calss').is(function())

這裡注意,必須使用$(this)來表示要判斷的元素,否則,不管function裡面是否返回true或false都和呼叫的元素無關了

hasclass $('li').eq(2).hasclass(.class)和is一樣只不過只能傳遞class

slice $('li').slice(0,4)從第0個位置選到第4個位置,若slice(2)則是從第二個位置到最後,若slice(-2),則是從-2的位置一直往前選,若slice(2,-2)則是從2往下選從-2往上選

end() 返回當前元素前乙個狀態的節點 $('#box').find('li').end().get(0)      end() 方法結束當前鏈條中的最近的篩選操作,並將匹配元素集還原為之前的狀態

contents() 返回子節點(包含文字)的數量$('#box').find('li').contents()

$('#box').find('li').children().size()是只獲取文字的數量不包含子節點

filter() $('li').filter('.claass',:first,:last).css……復合選擇

filter裡面可以新增function,比如

$('li').filter(function()).css……

JQuery學習筆記之選擇器

dom物件獲取方式 var dom div1 document.getelementbyid test1 var dom div2 document.getelementbyclassname test2 jquery物件獲取方式 var jq div1 test1 id選擇器 var jq div...

jQuery之層級選擇器學習筆記

層級選擇器 總共有4 種 子元素選擇器 後代元素選擇器 緊鄰同輩元素選擇器 相鄰同輩元素選擇器。1 子元素選擇器 用於在給定父元素下查詢父元素下的子元素。語法 parent child parent為任意有效的選擇器 child 也是乙個選擇器,且是 parent 的子元素。eg 匹配form 下所...

JQuery 選擇器學習筆記

img removeattr title 移除指定元素屬性值 p last addclass lastp addclass 為指定元素新增class,p last 為最後乙個p元素 p first addclass firstp 同上,只不過是第乙個p元素 p last removeclass 移除...