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 前面的乙個兄弟節...