JQuery選擇元素

2021-07-10 12:30:35 字數 1766 閱讀 7365

參考《jquery基礎教程》雖然我個人覺得這本書的講解順序毫無邏輯,瞎搞

1.基於列表項的級別新增樣式

$(

'#selected-plays>li').addclass('horizontal');//查詢id為selected-plays的元素的子元素中所有的列表項

$('#selected-plays li:not(.horizontal)').addclass('sub-level');//沒有horizontal類的列表項

2.為鏈結新增樣式

$('a[href^="mailto:"]').addclass('mailto');//mailto:開頭

$('a[href$=".pdf"').addclass('pdflink');//.pdf結尾

$('a[href^="http"][href*="henry"]').addclass('henrylink');//任意位置包含henry

3.自定義選擇符

$(

'tr:nth-child(odd)').addclass('alt');//奇數行

$('td:contains(henry)').addclass('highlight');//包含henry

注:nth-child()是jquery中唯一從1開始計數的選擇符

4.基於表單的選擇符

5.dom遍歷

$('a').filter(function

() ).addclass('external');//篩選

$(

'td:contains(henry)').next().addclass('highlight');//下乙個元素 .nextall .prev .prevall

.siblings//同dom層次所有其他元素

6.連綴

$('td:contains(henry)') // find every cell containing "henry"

.parent() // select its parent

.find('td:eq(1)') // find the 2nd descendant cell

.addclass('highlight') // add the "highlight" class

.end() // return to the parent of the cell containing "henry"

.find('td:eq(2)') // find the 3rd descendant cell

.addclass('highlight'); // add the "highlight" class

7.訪問dom元素

var mytag =$('#my-element').get(0).tagname//帶有id="my-element"屬性的第乙個元素

var mytag =$('#my-element')[0].tagname//簡寫

jQuery元素選擇

1 查詢所有符合條件的元素 find 舉例 ul find li addclass tmpexample 查詢頁面中ul元素下的所有li元素,並為查詢到的li元素增加tmpexample樣式。2 查詢指定元素的兄弟節點 siblings 舉例 li tmpcarrot slblings addcla...

JQuery元素選擇

1.基本元素選擇器 p 選取元素 p.info 選取所有class info 的元素 p demo 選取id demo 的第乙個元素 分層選擇器 使用這種選擇器時,需要傳入多個值,並用空格或大於號分隔。例如 div input 選擇div下所有的input div input 選擇父元素 div 下...

jquery 選擇相鄰元素 jQuery學習

不甘於 本該如此 多選引數 值得關注 選擇器名稱 描述返回 例項 id id選擇器 根據給定的id匹配乙個元素。單個元素 box 選取id為box元素 element 元素選擇器 根據給定的元素名匹配所有元素 集合元素 span 選取所有元素 class 類選擇器 根據給定的類匹配元素。集合元素 b...