jquery應用 查詢元素相關(選擇器)

2021-08-28 04:45:06 字數 2720 閱讀 1067

子元素選擇器:

//  大前提: 所選的 都是 修飾div的... div 是它父元素(沒有限定)的第乙個孩子嗎?是最後乙個孩子嗎?是第index個孩子嗎?是唯一的孩子嗎?

$('div:first-child') // 匹配所有為第乙個元素的div

$('div:last-child') // 匹配所有為最後乙個元素的div

$('div:nth-child(index)') // 匹配所有索引值為 index的div

$('div:only-child') // 匹配所有 為父元素唯一子元素的div

// 1.9+

// 大前提 div:first-of-type 是乙個整體 最後的結果 是父元素(div) 的第乙個為div的元素,最後乙個元素;

$('div:first-of-type') // 匹配所有為div內第乙個元素的div

$('div:last-of-type') // 匹配所有為div內最後乙個元素的div

$('div:nth-of-type(index)') // 匹配所有為div內索引值為index 的div元素

混淆選擇器:

用在類選擇器或者id選擇器中包含一些css特殊字元的時候;

基本選擇器:

$('*')

$( '#id')

$('.class')

$('element') // div p span ...

層級選擇器:

$('parent children') // parent 所有子元素;

$('parent > children') // parent 直接子元素;

$('prev + next') // prev 後所有next 元素;

$('prev ~ siblings') // 匹配所有sibllings 的兄弟元素;

屬性選擇器: 

$('div[attr]') // 選出所有擁有屬性 attr 的 div

$('div[attr = value]') // 選出所有屬性attr = value 的div

$('div[attr != value]') // 選出所有具有屬性attr 且attr不為value的div

$('div[attr ^= value]') // 選出所有attr 的值 以value 開頭的div

$('div[attr $= value]') // 選出所有attr 的值 以value 結尾的div

$('div[attr *= value]') // 選出所有attr 的值 包含value 的div

$('div[attr][attr1][attr2='value']') // 選出所有擁有且滿足條件的div

基本篩選器:

$('div:first') // 選擇出的jquery元素組中的第乙個div

$('div:last') // 選擇出的jquery元素組中的最後乙個div

$('div:not(selector)') // 將選出jquery物件組中的滿足selector 條件的 物件去除;

$('div:even');$('div:odd') // 匹配所有索引值為偶數/基數的元素;

$('div:eq(index)') // 匹配索引值為index的元素;

$('div:gt(index)') // 匹配所有索引值大於index的元素;

$('div:lt(index)') // 匹配所有索引值小於index的元素;

$(':header') // 匹配所有的header(h1-h6)元素;

$(':animated') // 匹配所有正在運動的元素;

$(':focus') // 匹配當前獲得焦點的元素;

// 1.9+

$('div:lang(language)') // 匹配乙個語言值所提供的語言**;

$(':root') // 文件根目錄;html元素;

$(':target') //

內容選擇器:

$('div:contains(text)') // 匹配包含給定文字的元素;

$('div:has(selector)') // 匹配包含給定元素的元素;

$('div:empty') // 匹配包含的空元素;

$('div:parent') // 匹配所有擁有子元素或者文字的元素;所有有內容的元素;

// div

demo 滿足

// demo 滿足 demo1 不滿足

可見性選擇器:

$('div:visible') // 匹配所有可見元素

$('div:hidden') // 匹配所有不可見元素,或者type值(首先元素得有type) 為hidden

表單元素選擇器:

:input 匹配所有input元素;

:text :password :radio :checkbox :submit :image :reset :button file匹配所有type 為text,password,radio,checkbox,submit,image,reset,button,file的元素;

表單物件屬性選擇器:

:enabled 可操作

:disabled 不可操作

:checked 已選擇

:selected 已選擇

jquery查詢元素

一 查詢元素 所有元素 element 該名稱的所有元素 p,input id 擁有指定id屬性的元素 class 擁有所有指定class屬性的元素 selector1,selector2 能匹配多個選擇器的元素 二 基本選擇器 div p 乙個元素是另乙個元素的後代 div p parent ch...

jquery 查詢元素技巧

div id 查詢所有含有 id 屬性的div元素。div id ajaxa 查詢 id 為 ajaxa 的 div 元素。div id ajaxa 查詢 id 不為 ajaxa 的 div 元素。div id ajaxa 查詢 id 以 ajaxa 開頭的 div 元素。div id ajaxa ...

jQuery元素查詢方法

myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用myclass類的css的所有元素 選擇文件中的所有的元素,可以運用多種的選擇方...