筛选（JQuery Selector）
JQuery是一个JavaScript库，它极大地简化了JavaScript编程。整个JQuery库的方法都在$这个工厂函数里，我们只需要使用$函数，而$函数会返回一个JQuery对象，使用它就可以调用JQuery提供的一整套更为简单的API来完成日常工作中复杂的对DOM元素的操作。
认识Jquery对象
$返回的是一个Jquery对象，而这个对象存储的就是由筛选器获取的Dom元素，通过类似于获取数组元素的方式可以从Jquery对象中存取这些Dom元素
$(document).ready(function () {
var divList = $("#box"); //获取id为box的div元素，返回一个Jquery对象
alert(divList[0].innerText); //该Jquery类似于数组，可通过索引存取Dom元素
});
迭代Jquery对象
迭代Jquery可以使用API的each方法，应避免使用for迭代器来迭代Jquery对象，因为Jquery并不是数组。在任何可迭代的Jquery方法中都有一个this的引用指向了Dom元素，通过this获取到Dom，通过$(this)则将Dom元素封装为Jquery对象。
$(document).ready(function () {
var divList = $("#box");
var text = divList[0].innerText;//获取索引0处的div元素，调用其dom属性innerText
divList.each(function () {
alert($(this).text()); //调用了Jquery的text方法
alert(this.innerText); //调用了dom元素的innerText属性
});
});
选择器（selector）
选择器用于获取一组Dom元素的Jquery表示，选择器只能选择Html元素，不会选择属性、文本。
基本选择器
selector：tag、id、class
通过tag、id、class获取元素，可以有多个tag，每个tag以逗号隔开，tag,tag。tag可以组合id或class，tag#id、tag.class，所以有：tag#id，tag，tag.class……
$('tag') //选择所有selector指定的那些
$('#id') //选择指定id的那些
$('.class') //选择指定class的那些
$('tag#id') //选择指定标签具有指定id的那些
$('tag,tag,tag.class') //选择多个指定标签和指定标签具有指定class的那些
$('*') //选择所有
示例：
<div id="box">box</div>
<div class="containner">containner</div>
<span>span</span>
$(document).ready(function () {
alert($(".containner")[0].innerText);
$("div.containner,span,div#box").each(function () {
alert($(this).text());
});
});
层次选择器
通过DOM树的层次关系来选择元素。+、~、空格可以组合tag，div+span、div~span、div span。
$('selector+') //选择它的第一个兄弟
$('selector~') //选择它的所有兄弟
$('selector *') //选择它的所有后代
示例
$(document).ready(function () {
var elmList = $("#box+")[0]; //选择id为box的元素后的第一个兄弟元素
var elmList=$("div+span+p");//选择所有div元素后的第一个兄弟span元素后的第一个兄弟p元素
});
进一步选择器
指在选择的结果集合里进行进一步的选择，:号前的选择器被视为第一次选择的结果集，:号的选择器则从该结果集合中进行第二次选择。
1.层次选择器
$('selector:first') //只要第一个
$("selector:last") //只要最后一个
$('selector:parent') //只要作为父元素的那些
2.范围选择器
$('selector:has(selector)') //只要包含了在has列表中的那些，has中可以有多个所有指定的selector，以逗号隔开
$('selector:not(selector)') //只要不在not列表中的那些，not可以有多个所有指定的selector，以逗号隔开
3.状态选择器
$('selector:empty') //只要不包含任何子元素的那些
$("selector:animated") //只要正在执行动画的那些
$('contains:contains('text')') //只要其包含了contains所指定的文本，包括后代文本也算，text大小写敏感
$('selector:visible') //只要其可见性是显示状态的那些
$('selector:hidden') //只要其可见性是隐藏状态的那些
4.索引选择器
$('selector:eq(index)') //只要指定的索引处的那些
$('selector:odd') //只要索引是奇数的那些
$('selector:even') //只要索引是偶数的那些
$('selector:gt(number)') //只要索引<number对的那些
$('selector:gt(number)') //只要索引<number对的那些
5.属性选择器
$('selector[attri]') //只要具有指定属性的那些
$('selector[attri!=attriValue]') //只要指定属性!=指定值的那些
$('selector[attri^=key]') //只要指定属性的值是以key开头的那些
$("selector[attri$=key]") //只要指定属性的值是以key结尾的那些
$('div[class*=key]') //只要指定属性的值包含了text的那些
6.后代元素过滤
$('selector:first-child') //只要它是父元素的第一个子元素的那些
$('selector:last-child') //只要它是父元素的最后一个子元素的那些
$('selector:nth-child(number)') //只要那些是属于父元素中的第number个子元素的那些，number从1开始
$('selector:nth-child(even)') //只要那些是属于父元素中的索引为偶数的子元素的那些
$('selector:nth-child(odd)') //只要那些是属于父元素中的索引为奇数的子元素的那些
表单过滤
表单元素状态选择器
$('selector:enabled') //只要未被禁用的那些
$('selector:disabled') //只要已被禁用的那些
$('selector:checked') //只要被cheked的那些
$('selector:selected') //只要被selected的那些
表单元数属性选择器
$('selector:radio') //只要单选框的那些
$('selector:file') //只要上传域的那些
$('selector:reset') //只要重置按钮的那些
$('selector:text') //只要单行文本框的那些
$('selector:image') //只要图像按钮的那些
$('selector:submit') //只要提交按钮的那些
$('selector:checkbox') //只要复选框的那些。
$('selector:hidden') //只要不可见的那些
$('selector:password') //只要密码文本框的那些
$('selector:input') //只要input、textarea、select、button的那些
方法选择
可以使用Jquery提供的函数对Jquery对象中的Dom元素进行进一步选择。
filter()
filter(selector | jqueryObj | domElm | fn)
//在Jquery对象上作进一步选择，返回一个已经进一步选择的结果集，一个Jquery对象
//fun：自定义的选择处理函数，迭代自动进行，每迭代一次自动调用函数进行选择判断
示例
$('div').filter('.box') //过滤出className为box的div元素
$('div').filter(":contains('佳能') , :contains('三星')") //过滤出包含了佳能或三星文本的div元素
$('div').filter(function () {
return $(this).text() == 'a';//筛选出含有指定文字的div
});
is()
is(selector | jqueryObj | domElm | fn)
//在Jquery对象上作判断，返回一个布尔值，注意，filter函数返回的是Jquery对象
//fun：自定义的选择处理函数，迭代自动进行，每迭代一次自动调用函数进行判断
Javascript - 学习总目录
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
