1、id选择器
一个用来查找的ID，即元素的id属性
$( "#id" )
id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
<input id="demo" type="button" value="按钮" />
<script>
$(function(){
$("#demo").click(function(){
alert("The first program of jQuery.");
})
})
</script>2、类选择器
通过class样式类名来获取节点
$( ".class" )
jQuery使用JavaScript的原生getElementsByClassName()函数来实现的。
<input class="demo" type="button" value="按钮" />
<script>
$(function(){
$(".demo").click(function(){
alert("The first program of jQuery.");
})
})
</script>3、元素选择器
根据给定（html）标记名称选择所有的元素
$( "element" )
原生方法getElementsByTagName()函数支持。
<input type="button" value="按钮" />
<script>
$(function(){
$("input").click(function(){
alert("The first program of jQuery.");
})
})
</script>4、全选择器（*选择器）
通过传递*选择器来选中文档页面中的元素
$( "*" )
通过document.getElementsByTagName()中传递"*"同样可以获取到。
5、层级选择器
（1）子选择器
选择所有指定“parent”元素中指定的“child”的直接子元素
$("parent>child")
<form action="#">
<input type="button" value="按钮" />
</form>
<script>
$(function(){
$("form>input").click(function(){
alert("The first program of jQuery.");
})
})
</script>（2）后代选择器
选择给定的祖先元素的所有后代元素，一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。
$("ancestor descendant")
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
$(function(){
$("ul li").click(function(){
alert("The first program of jQuery.");
})
})
</script>（3）相邻兄弟选择器
选择所有紧接在“prev”元素的“next”元素
$("prev+next")
<div>
<p><span>HTML</span></p>
<span><i>CSS </i><strong>CSS3</strong></span>
<span><strong>JavaScript</strong></span>
</div>
<script>
$(function(){
$("p+span").click(function(){
alert("The first program of jQuery.");
})
})
</script>在点击CSS和CSS3会弹出对话框，只会作用于prev元素后紧接的第一个元素中所有子元素。
（4）一般兄弟选择器
匹配“prev”元素之后的所有兄弟元素，具有相同的父元素，并匹配过滤“siblings”选择器
$("prev~siblings")
<div>
<p><span>HTML</span></p>
<span><i>CSS </i><strong>CSS3</strong></span>
<span><strong>JavaScript</strong></span>
</div>
<script>
$(function(){
$("p~span").click(function(){
alert("The first program of jQuery.");
})
})
</script>波浪号，点击CSS和CSS3和JavaScript时都会弹出对话框。
6、基本筛选选择器
（1）$(":first")
匹配第一个元素
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
$(function(){
$("li:first").click(function(){
alert("The first program of jQuery.");
})
})
</script>选择一组<li>标签中的第一个，也就是第一个 li 中的HTML点击之后会有弹框出现。
（2）$(":last")
匹配最后一个元素
（3）$(":not(selector)")
一个用来过滤的选择器，选择所有元素去除不匹配给定的选择器元素
<ul>
<li>HTML</li>
<li>CSS</li>
<li class="noSelect">JavaScript</li>
</ul>
<script>
$(function(){
$("li:not(.noSelect)").click(function(){
alert("The first program of jQuery.");
})
})
</script>那点击HTML和CSS都可以出现弹框，只有JavaScript不可以。
（4）$(":eq(index)")
在匹配的集合中选择索引值为index的元素
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
$(function(){
$("li:eq(1)").click(function(){
alert("The first program of jQuery.");
})
})
</script>（5）$(":gt(index)")
选择匹配集合中所有大于给定index的元素
（6）$(":lt(index)")
选择匹配集合中所有索引值小于给定index的元素
（7）$(":odd")
选择索引值为奇数的元素,从0开始计数
（8）$(":even")
选择索引值为偶数的元素,从0开始计数
（9）$(":header")
选择所有标题元素
（10）$(":lang(language)")
选择指定语言的所有元素
（11）$(":root")
选择该文档的根元素
（12）$(":animated")
选择所有正在执行动画效果的元素
7、内容筛选选择器
（1）$(":contains(text)")
选择所有包含指定文本的元素
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
$(function(){
$("li:contains(M)").click(function(){
alert("The first program of jQuery.");
})
})
</script>其中的text是区分大小写的，如果是m，那么点击第一个li也不会有弹窗出现。
（2）$(":parent")
选择所有含有子元素或者文本的元素，即选择当前元素的父元素。
<ul>
<li><span>HTML</span></li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
$(function(){
$("span:parent").click(function(){
alert("The first program of jQuery.");
})
})
</script>（3）$(":empty")
选择所有没有子元素的元素(包含文本节点)
<ul>
<li><span>HTML</span></li>
<li>CSS</li>
<li>JavaScript</li>
<li style="width: 50px;height: 20px;border: 1px solid red;"></li>
</ul>
<script>
$(function(){
$("li:empty").click(function(){
alert("The first program of jQuery.");
})
})
</script>（4）$("：has(selector)")
选择元素中至少包含指定选择器的元素
<ul>
<li><span>HTML</span></li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
$(function(){
$("li:has(span)").click(function(){
alert("The first program of jQuery.");
})
})
</script>8、可见性筛选选择器
（1）$(":visible")
选择所有显示的元素
（2）$(":hidden")
选择所有隐藏的元素
隐藏的元素是指:
- CSS display的值为none
- type="hidden"的表单元素
- 宽度和高度都显式设置为0
- 一个祖先元素为隐藏的,该元素是不会在页面上显示
- CSS visibility的值为hidden
- CSS opacity的值为0
9、属性筛选选择器
（1）$("[attribute|='value']")
选择指定属性等于给定字符串或该文字串为前缀(该字符串后跟一个连字符 - )的元素
<ul>
<li class="one-demo">HTML</li>
<li class="two-demo">CSS</li>
<li class="three-demo">JavaScript</li>
</ul>
<script>
$(function(){
$("[class|='one']").click(function(){
alert("The first program of jQuery.");
})
})
</script>（2）$("[attribute*='value']")
选择指定属性具有包含一个给定的子字符串的元素(选择给定属性是以包含某些值的元素)
<ul>
<li class="oneDemo">HTML</li>
<li class="twoDemo">CSS</li>
<li class="threeDemo">JavaScript</li>
</ul>
<script>
$(function(){
$("[class*='one']").click(function(){
alert("The first program of jQuery.");
})
})
</script>（3）$("[attribute~='value']")
选择指定属性用空格分隔的值中包含一个给定值的元素
<form action="#">
<input type="button" name="button one" value="按钮1">
<input type="button" name="button two" value="按钮2">
<input type="button" name="button three" value="按钮3">
</form>
<script>
$(function(){
$("input[name~='one']").click(function(){
alert("The first program of jQuery.");
})
})
</script>经过试验，还真是需要有空格间隔的才能选出来。
（4）$("[attribute='value']")
选择指定属性是给定值的元素
（5）$("[attribute!='value']")
选择不存在指定元素,或指定的属性值不等于给定值的元素
（6）$("[attribute^='value']")
选择指定属性是以给定字符串开始的元素
（7）$("[attribute$='value']")
选择指定属性是以给定值结尾的元素,区分大小写
（8）$("[attribute]")
选择所有具有指定属性的元素,该属性可以为任何值
<form action="#">
<input type="button" name="one" value="按钮1">
<input type="button" name="two" value="按钮2">
<input type="button" value="按钮3">
</form>
<script>
$(function(){
$("input[name]").click(function(){
alert("The first program of jQuery.");
})
})
</script>（9）$("[attributeFilter1][attributeFilterN]")
选择匹配所有指定的属性筛选器的元素
10、子元素筛选选择器
（1）$(":first-child")
选择所有父级元素下的第一个子元素
<form action="#">
<input type="button" name="one" value="按钮1">
<input type="button" name="two" value="按钮2">
</form>
<form action="#">
<input type="button" name="three" value="按钮3">
<input type="button" name="four" value="按钮4">
</form>
<script>
$(function(){
$("input:first-child").click(function(){
alert("The first program of jQuery.");
})
})
</script>选择到按钮1和按钮3，可以弹框出现。
（2）$(":last-child")
选择所有父元素下的最后一个子元素
（3）$(":only-child")
若某个元素是其父元素的唯一元素,则选中它
（4）$(":nth-child(n)")
选择父级元素的第n个子元素
（5）$(":nth-last-child(n)")
选择父元素的第n个子元素,从最后一个子元素开始计算
11、表单元素选择器
（1）$(":input")
选择所有input、textarea、select和button元素
（2）$(":text")
匹配所有文本框
（3）$(":password")
匹配所有密码框
（4）$(":radio")
匹配所有单选按钮
（5）$(":checkbox")
匹配所有复选框
（6）$(":submit")
匹配所有提交按钮
（7）$(":image")
匹配所有图像域
（8）$(":reset")
匹配所有重置按钮
（9）$(":button")
匹配所有按钮
（10）$(":file")
匹配所有文件域
12、表单对象属性筛选选择器
（1）$(":enabled")
选取可用的表单元素
（2）$(":disabled")
选取不可用的表单元素
（3）$(":checked")
选取被选中的<input>元素
（4）$(":selected")
选取被选中的<option>元素
13、特殊选择器this
通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，就可以用jQuery提供的快捷方法直接处理样式了。this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
