jQuery-----选择器

一、jQuery选择器

选择器的书写方式：

$("选择器")
//里面选择器直接写CSS选择器样式即可，但是要加引号

选择器分为以下这几种：一种是基础选择器，一种是层级选择器，还有一种是筛选选择器，下面将会详细介绍！

基本选择器

名称	用法	描述
ID选择器	$("#id")	获取指定的ID元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div ,p,li”)	获取多个元素
交集元素	$(“li.current”)	交集元素

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取亲儿子层级的元素；不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下所有li元素，包括孙子等

筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个元素
:eq(index)	$(“li:eq(2)”)	获取到l的li元素中，选择索引号为2的元素
:odd	$(“li:odd”)	获取到l的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到l的li元素中，选择索引号为偶数的元素

注意：索引号是从0开始的！！！

二、jQuery筛选方法（重点）

语法	用法	描述
parent()	$(“li”).parent();	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”),最近一级（亲儿子）
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”)，后代选择器
siblings(“selector”)	$(.first).siblings(li);	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)	检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”)，index从0开始

三、jQuery设置样式

语法：

$("选择器").css("属性","值")；

下面举几个例子对前面和这个样式设置进行说明！

举一个例子：有4个div盒子，要把4个div设置背景颜色为粉色。

代码如下：

<div> hello1 </div>
<div> hello2 </div>
<div> hello3 </div>
<div> hello4 </div>
<script>
	$("div").css("background","pink");
<script>

把ul里面的第一个li改背景颜色

<ul>
	<li>改为红色</li>
	<li>多个里面筛选几个</li>
	<li>多个里面筛选几个</li>
	<li>多个里面筛选几个</li>
</ul>
<script>
	$(function(){
			$("ul li:first").css('background','pink');
	})
</script>

四、隐式迭代

定义： 遍历内部DOM元素（伪数组形式存储）的过程叫做隐式迭代。

     简单理解：给匹配到所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简单我们的操作，方便我们调用。

举一个例子来进行说明：排他思想！

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
	$(function(){
				//隐式迭代 给所有按钮都绑定了点击事件
				$("button").click(function(){
				//当前的元素变化背景颜色
				$(this).css("background","plum");
				//其余的兄弟去掉背景颜色
				$(this).siblings("button").css("background","");
				})
			})
</script>