----资料来源于 W3C与网络
一. jQuery只有两种写法：
- $.abc()
- $('XXX').abc()
二. jQuery选择器
1. get()方法
jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点
get方法中提供一个元素的索引：
<div>元素1</div>
<div>元素2</div>
<script>
//我想取得div第一个节点变成红色
var $div = $('div');
var div = $div.get(0); //通过get方法，转化成DOM对象
div.style.color = ‘red’;
//原生js写法：
var div = $div[0] //转化成DOM对象
</script>
2. eq()
整数，指示元素的位置（最小为 0）。
如果是负数，则从集合中的最后一个元素往回计数。
注意：
eq返回的是一个jquery对象，可以继续调用其他方法
get返回的是一个html 对象数组返回的是jQuery对象，返回的是html数组不能调用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案例继续
<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
可以筛选符合条件的对象，参数可以是选择器(类或ID)或者一个函数
<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对象，如果这些元素至少一个匹配给定的参数，那么返回true
<form><input type="text" /></form>
<div></div>
<script>
var isFormParent = $("input[type='text']").parent().is("form");
$("div").text("isFormParent = " + isFormParent);
</script>
is.png
以下整理篇：
资料来源于网络和W3C，文章如果有错误的地方希望可以指出，谢谢。
网友评论