jQuery基礎知識2 jQuery選擇器

2021-08-21 19:35:54 字數 3836 閱讀 2928

jquery選擇器是其核心功能,按照選擇的元素類別可以分為4種:

id選擇器             根據元素id選擇     $('#divid')選擇id為divid的元素

標籤選擇器         根據元素的名稱選擇   $('a')選擇所得元素

css樣式類選擇器   根據應用到dom元素的css類進行選擇    $('.beg')選擇所有css類為beg的元素

*萬用字元選擇器       選擇所有元素,使用萬用字元*   $('*')選擇頁面所有元素

selector1,selector2,selector3    可以將幾個選擇器用「,」分隔開,會同時選擇這個選擇器匹配的內容  $('#divid,a,.beg')

ancestor descendant(後代選擇器)      $('.beg div')選擇css類為beg的元素中的所有元素

parent>child(父子選擇器)                    $('.mylist>li')選擇css類為mylist元素中的直接子節點物件

prev+next(相鄰選擇器)    prev和next是兩個同級別的元素,選中在prev元素後面的next元素    $('#hid+img')選擇img元素

prev~siblings(平級選擇器)  選擇prev後面的根據siblings過濾的元素   $('#som~[title]')選擇id為som後面所有帶屬性title的元素

基本過濾選擇器

:first   匹配找到的第乙個元素   $('tr:first')查詢**第一行

:last   匹配找到的最後乙個元素   $('tr:last')查詢**的最後一行

:not(selector)  去除所有與給定選擇器匹配的元素   $('input:not(:checked)')查詢所有未選中的input元素

:odd  匹配所有牽引值為奇數的元素,從0開始。    $('input:odd')查詢**的1、3、5...行

:even 匹配所有牽引值為偶數的元素,從0開始。 $('tr:even')查詢**的2、4、6...行

:eq(index) 匹配乙個給定索引值的元素   $('tr:eq(1)')查詢第二行

:gt(index) 匹配所有大於給定索引值的元素,從0開始   $('tr:gt(0)')查詢第二行、第三行......

:lt(index) 匹配結果集中索引小於n的元素   $('tr;lt(2)')查詢第一行、第二行

:header  選擇所有的h1/h2/h3一類的header標籤  $(':header'),css('background','red')給頁面內所有標題加上背景色

:animated  匹配所有正在執行動畫效果的標籤   $('#run').click(function(),1000);});針對不在執行動畫效果的元素執行乙個動畫效果。

內容過濾選擇器

:contains(text)   匹配包含給定文字的元素  $("div:contains('john')")查詢所有包含『john』的div元素。

:empty  匹配所有不包含子元素或者文字的空元素   $('td:empty')查詢所有不包含子元素或者文字為空的td元素。

:has(selector) 匹配含有選擇器所匹配的元素的元素 $('div:has(p)').addclass('test')給所有包含p元素的div元素新增乙個test類。

:parent  匹配含有子元素或者文字的元素   $('td:parent')查詢所有含有子元素或者文字的td元素

可見性過濾選擇器

:hidden   匹配所有的不可見元素     $('tr:hidden')查詢所有不可見的tr元素

會匹配如下幾種格式的元素:

:visible    匹配所有的可見元素        $('tr:visible')查詢所有可見的tr元素

指在螢幕上占用布局空間的元素,可見性元素的寬度和高度大於0時顯示。

css屬性visibility:hidden或者是opacity:0被認為可見,因為他們仍然占用布局空間。

屬性過濾選擇器

[attribute]  匹配包含給定屬性的元素    $('div[id]')查詢所有含有id屬性的div元素

[attribute=value]  匹配給定的屬性是某個特定值的元素  $("input[name='newsletter']").attr('checked',true);

[attribute!=value]  匹配給定的屬性不包含某個特定值的元素  $("input[name!='newsletter']").attr('checked',true);

[attribute^=value] 匹配給定的屬性是以某些值開始的元素    $("input[name^='new']")

[attribute$=value] 匹配給定的屬性是以某些值結尾的元素    $("input[name$='letter']")

[attribute*=value] 匹配給定的屬性是以包含某些值的元素    $("input[name*='man']")

[attribute1][...][attributen] 復合屬性選擇器,需要同時滿足多個條件  $("input[id][name$='nam']")找到所有含有id屬性,並且它的name屬性是以man結尾的。

子元素過濾選擇器

:nth-child(index/even/odd/equation)  匹配其父元素下的第n個子元素或奇偶元素,從1開始。  $("ul li:nth-child(3n+1)")

:first-child  匹配第乙個子元素   $("ul li:first-chlid")  在每個ul中查詢第乙個li

:last-child  匹配最後乙個子元素  $("ul li:last-chlid")

:only-child  如果某個元素值父元素中惟一的子元素,那將會被匹配。如果父元素中含有其他元素,那將不會被匹配。$("ul li:only-chlid") 在ul中查詢是唯一子元素的li 

表單物件屬性性過濾器

:enabled  匹配所有可用元素   $('input:enabled')查詢所有可用的input元素

:disabled  匹配所有不可用元素  $('input:disabled')查詢所有不可用的input元素

:checked  匹配所有被選中元素(核取方塊、單選框等,不包括select中的option)  $('input:checked')查詢所有選中的核取方塊、單選按鈕

:selected  匹配所有選中的option元素  $('select option:selected')查詢所有選中的選項元素

:input   匹配所有input、textarea、select和button元素     $(':input')查詢所有的input元素

:text     匹配所有的文字框   $(':text')查詢所有文字框

:password  匹配所有的密碼框  $(':password')查詢所有密碼框

:radio   匹配所有單選按鈕     $(':radio')查詢所有單選按鈕

:checkbox   匹配所有核取方塊  $(':checked')查詢所有核取方塊

:submit   匹配所有提交按鈕  $(':submit')查詢所有提交按鈕

:image  匹配所有影象域  $(':image')匹配所有影象域

:reset   匹配所有重置按鈕 $(':reset')匹配所有重置按鈕

:button  匹配所有按鈕  $(':button')匹配所有按鈕

:file    匹配所有文件域  $(':file')查詢所有檔案域

jquery 基礎知識

1,取物件 根據id取 物件的id 根據class取 物件的id 2,設定 獲取值 innerhtml val text innerhtml innertext 3,設定 獲取 table 中某行某列的值 設定table7,第2個tr的第乙個td的值。table7 tr eq 1 td nth ch...

Jquery基礎知識

1 寫得少,做得多 2 執行速度快 jqurey通過選擇器獲取標籤 myid 選擇 id為myid的網頁元素 myclass 選擇 class為myclass的元素 li 選擇所有的 li元素 ul1 li span 選擇 id為為ul1元素下的所有li下的span元素 input name fir...

JQuery基礎知識

jquery是js的封裝庫,提供了大量的apl,是目前使用最流行最廣泛的js庫。在head和body中都可以引入,注意放在頁面的標籤後面必須新增入口函式 function 父節點 parent 子節點 children 所有的兄弟節點 siblings 後面的乙個兄弟節點 next 前面的乙個兄弟節...