jQuery學習筆記

標籤：

1： $ = jQuery    $() = jQuery()

2：CSS選擇符（多個選取器組合用”,"隔開）

　　①，屬性選擇符 $(‘a[href^="mailto:"]‘)表示href以“mailto:”開頭的a元素。同樣$表示結尾，*表示萬用字元。屬性可以寫多個，如$(‘a[href$=".pdf"][href*="strive"]‘)表示href以.pdf結束且含有strive的a元素

　　②，層次選取器

　　　　1，祖先後代選取器（空格）。$(“ancestor descendant”). 返回合格所有的後代元素。

　　　　2，父子選取器（ > ）。$(“parent > child”)。返回所有合格子項目。（子項目只有一輩，後代元素有很多輩）。

　　　　3，隔壁選取器 （+）（後向）。$(“prev + next”)。返回同輩中 緊鄰在prev元素之後的next元素。注意：只返回一個next,且要求prev和next同輩。 【效果類似next()方法】

　　　　4，鄰居選取器（~）(後向)。$(“prev ~ siblings”)。返回在prev元素之後所有同輩元素。 【效果類似nextAll()方法】

　　　　

3： 自訂選擇符 

　　用在CSS選取器後面，進一步篩選，文法類似CSS中的偽類，以冒號（:）開頭。
　　幾個自訂選擇符， ①, :eq(n) 第n個，從0開始計數

　　　　　　　　　　　 ②, :even/:odd 偶/奇

　　　　　　　　　　    ③, :nth-child(),參數可為數字或者odd/even，這是jQuery中唯一從1開始計數的選取器。（注意：瀏覽器選擇時是從右向左的）

　　　　　　　　　    　④, :contains() 參數為字串，但是不用加引號，區分大小寫

　　　　　　　　　　　⑤, :not() 否定式偽類選擇符. 參數為選擇符，不用加引號。如:not(.classname)。

　　　　　　　　　　　⑥, :has()。參數為選擇符，不用加引號。

4: DOM遍曆方法

　　①  filter()方法。篩選出與指定運算式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個運算式(同多個CSS選取器).參數可接受函數

　　②  next()方法。返回下一個緊鄰的同輩元素，(效果類似於CSS選擇符中的隔壁選取器)

　　     nextAll()方法。返回後面所有的同輩元素，(效果類似於CSS選擇符中的鄰居選取器)

　　　  prev()方法。返回前一個緊鄰的同輩元素，

　　     prevAll()方法。返回前面所有的同輩元素，

　　　 siblings()方法。返回所有的同輩元素。

　　　parent()方法。返回唯一的父元素，

　　    parents()方法。返回所有的直系祖先元素，（父元素只有一個，祖先元素可有很多）

　　    children()方法。返回所有的子項目。（注意：只返回子項目，子項目之後的後代元素不選擇【可用CSS選擇符中的後代選取器】）

　　　find()方法。搜尋所有與指定運算式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

　　　

　　③  addBack()方法。jQuery對象維護一個堆棧內部來跟蹤匹配的元素集合的變化。當一個DOM遍曆方法被調用時，新的元素集合推入到堆棧中。 如果還需要包含先前的元素集合，.addBack() 可以提供協助。考慮一個頁面，一個簡單的列表就可以了：

　　　　　　　　　　　　　　　　<ul>　　　　　　　　　　　　　　　　　　<li>list item 1</li>　　　　　　　　　　　　　　　　　　<li>list item 2</li>　　　　　　　　　　　　　　　　　　<li class="third-item">list item 3</li>　　　　　　　　　　　　　　　　　　<li>list item 4</li>　　　　　　　　　　　　　　　　　　<li>list item 5</li>　　　　　　　　　　　　　　　　</ul>

　　　　　　　　　　　　　　　　下面的代碼的返回結果是後面3，4和5項是一個紅色的背景：

　　　　　　　　　　　　　　　　$(‘li.third-item‘).nextAll().addBack().css(‘background-color‘, ‘red‘);

　　　　　　　　　　　首先，初始選擇位於第3項，初始化堆棧集合只包含這項。調用.nextAll() 後將第4和第5項推入堆棧。最後，調用.addBack() 合并這兩個組元素在一起，建立一個jQuery對象，指向　　　　　　　　　　　所有三個項元素（按照文檔中的順序）：{[<li.third-item>,<li>,<li> ]}

　　④：

 

jQuery學習筆記