JQ选择器的使用

一、什么是选择器
近似于js原生代码中的document.getElementById();document.getElementsByTagName();document.querySelectAll()就是能通过各种方式来选取到元素。
二、基本选择器：
id选择器：

$("#box").css("background","red");

class选择器：

$(".box").css("background","red");

标签选择器：

$("span").css("background","red");

所有元素选择器：

$("*").css("background","red");

串联在一起的选择器：

$("#box,.item,li,*").css("background","red");

三、层次选择器
本元素下所有次级元素（儿子辈、孙子辈）

$("div span").css()

本元素下一级子元素（儿子辈）

$("div>span").css();

本元素紧接的同级下一个子元素

$("div+span").css();

本元素同级下所有子元素

$("div~span").css();

四、基本过滤选择器
选取第一个子元素

$("div:first").css();

选取最后一个子元素

$("div:last").css();

除了该子元素

$("div:not(span)").css();

选取偶数行，索引从0开始

$(":even").css();

选取奇数行，索引从0开始

$(":odd").css();

等于index下标行，索引从0开始

$(":eq(index)").css();

选取索引大于下标行

$(":gt(index)").css();

选取索引小于下标行

$(":lt(index)").css();

选取标题元素h1,h2,h3…

$(":header").css();

选取当前执行的动画元素

$(":animated").css();

五、内容过滤选择器
含有text文本内容的元素

$(":contain(text)").css();

文本内容为空的子元素或者不包含该子元素

$("div:empty").css();

选取到含有某元素的子元素

$("div:has(span)").css();

与:empty相反，选取到含有文本内容不为空的或者含有该子元素

$("div:parent").css();

六、可见性过滤选择器
:hidden 选取到不可见元素
:visible 选取到可见元素
一般用来做判断的

<ul>
	<li>小米</li>
	<li>OppO</li>
	<li>vivo</li>
	<li>联想</li>
	<li>三星</li>
	<li>索尼</li>
	<li>更多品牌</li>
</ul>
<button id="btn">更多</button>

var ele=$("ul li:gt(2):not(:last)");
var btn=$("#btn");
ele.css("display","none");
if(ele.is(:hidden)){
	$("ul li").css("display","block");
	btn.text("收起");
}else{
	ele.css("display","none");
	btn.text("更多");
}

七、属性过滤选择器
[id] 选取拥有id属性的元素
[id=value]选取拥有id属性值为value的元素
[id!=value]选取id属性值不等于value的元素
[id^=value]选取id以value值开始的元素
[id$=value]选取id以value值结束的元素
[id*=value]选取id值中含有value的元素

$("ul li[id]").css();
$("ul li[id=box]").css("background","red");
$("ul li[id!=box]").css();
$("ul li[id^=box]").css();......

八、子元素过滤选择器
:nth-child(index/even/odd/value)
index:选取父级元素下的第n个子元素，index从1开始数的。
nth-child(even)/(odd)奇数行或偶数行，从0开始数的。
:first-child:选取第一个子元素
:last-child:选取到最后一个子元素
:only-child:选取仅有一个子元素的元素

<div>
	<ul>
		<li>1111</li>
		<li>2222</li>
		<li>3333</li>
		<li>4444</li>
		<li>5555</li>
	</ul>
	<ul>
		<li>6666</li>
		<li>7777</li>
		<li>8888</li>
		<li>9999</li>
		<li>0000</li>
	</ul>
</div>

$("div ul:first-child").css("background","red");和$("div ul:first").css();是不一样的，first-child 是第一个子元素，first是第一行子元素
$("div ul:last-child").css("background","red");同理$("div ul:last").css();表示最后一行子元素

若是这样：

<div>
	<ul>
		<li>1111</li>
		<li>2222</li>
		<li>3333</li>
		<li>4444</li>
		<li>5555</li>
	</ul>
	<ul>
		<li>6666</li>
	</ul>
</div>

$("div ul:only-child").css("background","red");

九、表单属性状态过滤选择器 (form表单）
:enabled :选取到所有可用元素
:disabled :选取到所有不可用元素
:checked :选取到所有被选中元素（单、复选框）
:selected :选取到被选中的选项（option下拉框）

<input type="text" enabled />
<input type="text" disabled />
<input type="checkbox" checked />
<option>
	<select value=“1” selected>苹果</select>
	<select value=“2”>橘子</select>
	<select value=“3”>梨子</select>
	<select value=“4”>葡萄</select>
	<select value=“5”>芒果</select>
</option>
<textarea>
	这是一个多行文本框
</textarea>

$("input:enabled").css();
$("input:disabled").css();
$("input:checked").css();
$("option:selected").css()

十、表单对象属性过滤选择器
:input 包括input,textarea,button,select等都包括在内

$(":input").length;//表示所有表单值包括在内的长度
$("input").length;//表示只包括input表单值长度

:text 表示选取所有的单行文本框
:password 表示选取所有的密码框
:radio 表示选取所有的单选框按钮
:checkbox 表示选取所有的复选框按钮
:submit 表示选取所有的提交按钮
:images 表示选取所有的图片提交按钮
:reset 表示所有的重置按钮

DOM与Jquery之间的相互转换关系：
Jquery转换为DOM:

$("#box")[0];
$("#box").get(0);

DOM转换为Jquery：

var box=document.getElementById("box");
var jqbox=$("#box");