----資料來源于 W3C與網(wǎng)絡
一. jQuery只有兩種寫法：
- $.abc()
- $('XXX').abc()
二. jQuery選擇器
1. get()方法
jQuery對象自身提供一個.get() 方法允許我們直接訪問jQuery對象中相關的DOM節(jié)點
get方法中提供一個元素的索引：
<div>元素1</div>
<div>元素2</div>
<script>
//我想取得div第一個節(jié)點變成紅色
var $div = $('div');
var div = $div.get(0); //通過get方法检疫，轉化成DOM對象
div.style.color = ‘red’;
//原生js寫法：
var div = $div[0] //轉化成DOM對象
</script>
2. eq()
整數(shù)，指示元素的位置（最小為 0）夺溢。
如果是負數(shù)烛谊，則從集合中的最后一個元素往回計數(shù)。
注意：
eq返回的是一個jquery對象状勤，可以繼續(xù)調(diào)用其他方法
get返回的是一個html 對象數(shù)組返回的是jQuery對象持搜，返回的是html數(shù)組不能調(diào)用jQuery的其他方法焙矛。
<div>元素1</div>
<div>元素2</div>
<script>
$('div').eq(0).css('color', 'red');
//這樣元素1就變成了紅色
</script>
3. next / .prev
- 第一種寫法
next取得匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。如果提供一個選擇器贫导，那么只有緊跟著的兄弟元素滿足選擇器時，才會返回此元素邑滨。prev正好相反钱反。
prev獲取指定元素的上一個同級元素面哥，next獲取指定元素的下一個同級元素
<ul>
<li>list item 1</li>
<li class="third-item">list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$('li.third-item').prev().css('background-color', 'red');//第一行背景變紅
$('li.third-item').next().css('background-color', 'red');//第三行背景變紅
</script>
next,prev.png
- 第二種寫法
jQuery的next+prev 選擇器用于匹配緊接在prev元素后面的同輩next元素尚卫。
比如說$("div + p"),意思是所有緊接在div之后的p，即選中所有div后面緊跟p的p元素
<div>
<p>你好</p>
<span>你不好</span>
<div>很不好</div>
<p>你好</p>
<span>你不好</span>
</div>
<script>
$('p + span').css('color', 'red');
</script>
next,prev2.png
4. nextAll / .prevAll
nextAll獲取指定元素后邊的所有同級元素
prevAll獲取指定元素前邊的所有同級元素
<ul>
<li>list item 0</li>
<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>
<li>list item 6</li>
</ul>
<script>
$('li.third-item').prevAll().css('background-color', 'red');
$('li.third-item').nextAll().css('background-color', '#333');
</script>
nextAll,prevAll.png
5. siblings
siblings() 方法返回被選元素的所有同級元素。
<ul>
<li>list item 0</li>
<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>
<li>list item 6</li>
</ul>
<script>
$('li.third-item ').siblings().css('background-color', 'red');
</script>
siblings.png
6. parent / .parents
parent是指取得一個包含著所有匹配元素的唯一父元素的元素集合。
parent就是當前元素的父元素鳖链；parents則是當前元素的祖先元素芙委。
<ul class="level-1">
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script>
$('li.item-a').parent().css('background-color', 'red');
</script>
parent.png
為 level-2 列表設置紅色背景灌侣。由于我們未應用選擇器表達式，父元素很自然地成為了對象的一部分玖姑。如果已應用選擇器慨菱，則會在包含元素之前戴甩，檢測元素是否匹配選擇器甜孤。
parents則是取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）畏腕≤猿恚可以通過一個可選的表達式進行篩選而线。
//按parent案例繼續(xù)
<script>
$('li.item-a').parents().css('background-color', '#333');
</script>
parents.png
7. children / .find
children() 方法返回返回被選元素的所有直接子元素。
<ul>
<li>1</li>
<li>4</li>
<li>5</li>
</ul>
<div>
<p class="red">2</p>
<p class="red">3</p>
<span class="red">4</span>
</div>
<script>
$('div').children('.red').css('background-color', 'red');
//匹配div中所有類名為red的子元素
</script>
children.png
find() 方法獲得當前元素集合中每個元素的后代嘹狞，通過選擇器磅网、jQuery 對象或元素來篩選筷屡。
<div>
<p class="red">2343<span class="red">4</span>243432</p>
<p class="red">3</p>
</div>
<script>
$('p').find('span').css('background-color', 'red');//可以匹配多個span
</script>
find.png
8. filter
可以篩選符合條件的對象毙死，參數(shù)可以是選擇器(類或ID)或者一個函數(shù)
<div></div>
<div class="red"></div>
<div class="red"></div>
<div></div>
<script>
$('div').css('background', '#333')
.filter('.red').css('border-color', 'red');
</script>
filter.png
9. has
篩選匹配元素集合中有相匹配的選擇器或DOM元素的后代元素
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
<script>
$('li').has('ul').css('color', 'red');//查找li元素中的ul元素
</script>
has.png
10. is
判斷當前匹配的元素集合中的元素跟啤，是否為一個選擇器唉锌，DOM元素，或者jQuery對象腥放，如果這些元素至少一個匹配給定的參數(shù)绿语，那么返回true
<form><input type="text" /></form>
<div></div>
<script>
var isFormParent = $("input[type='text']").parent().is("form");
$("div").text("isFormParent = " + isFormParent);
</script>
is.png
以下整理篇：
資料來源于網(wǎng)絡和W3C吕粹，文章如果有錯誤的地方希望可以指出，謝謝聚请。
