首页 > 代码库 > Javascript - Jquery选择器
Javascript - Jquery选择器
选择器（JQuery Selector）
JQuery是一个JavaScript库，它极大地简化了JavaScript编程。整个JQuery库的方法都在$这个工厂函数里，我们只需要实例化$对象，提供作为参数的选择器就可以很轻易的获取DOM元素的数组表示。
选择器
基本选择器
通过标签名、ID、类名获取元素。
标签选择：$ ( ‘p‘ )
选择所有P元素。
ID选择：$ ( ‘#box‘ )
选择ID为box的元素。
类名选择：$ ( ‘.box‘ )
选择类名为box的元素。
限定选择：$(div#box)
选择ID为box的div元素。
所有选择：$(‘*‘)
选择所有元素。
<body> <div id="box">flikr</div> <div class="classBox">google</div> <div>microsoft</div> <script> $(document).ready(function () { alert($("#box")[0].id); alert($(".classBox")[0].className); alert($("div")[2].textContent); }); </script></body>基本选择器组合
基本选择器可搭配组合，每个选择中间用逗号隔开。
$(‘div#box‘)
选择ID为box的div元素。
$(‘span.box‘)
选择类名为box的span元素。
$(‘div,span,p.box‘)
选择div、span和类名为box的p元素。
层次选择器
通过DOM的层次关系来选择元素。
同级选择：$(‘div+span‘)、$(‘div~span‘)
+号表示紧靠该元素的同级元素，~号表示所有该元素的同级元素。
$("div+span")//选择紧靠div元素后的同级span元素，其实就是选择div后的那个元素，只不过你得显示说明该元素是什么元素。$("div+span+p")//选择紧靠div元素后的兄弟span元素后的兄弟p元素$("div~span")//选择div元素后的所有同级span元素后代选择：$(‘div span‘)
选择div包含的所有后代span元素。不能写成$(‘div ‘)，这只会返回div。
过滤选择器
过滤器的语法格式与css伪类类似，它需要你指定一个条件从而筛选出符合条件的元素。过滤选择器使用:号和[]号指定过滤规则。首先必须有基本选择器，表示选择xx，接着在过滤器的条件里筛选出需要的元素，注意以下的A表示基本选择器。
顺序过滤
$(‘A:first‘)
选择A，过滤出第一个A。
$(‘A空格:first‘)
选择A的所后代元素，过滤出第一个子元素。
其它类似过滤
:last（过滤出最后一个元素）、空格:last（过滤出子元素中的最后一个）、first（过滤出第一个元素）、空格:first（过滤出子元素中的第一个元素）、:animated（过滤出正在执行动画的元素）、空格:animated（过滤出正在执行动画的子元素）。
内容过滤
$(‘A:empty‘)
选择A，过滤出不包含任何子元素的A。
$(‘A空格:empty‘)
选择A所有的子元素，过滤出不包含任何子元素的元素。
其它类似过滤
$(‘A:parent‘)（过滤出拥有后代元素的A）、$(‘A:has(text)‘)（过滤出类名或ID名是text的A）、$(‘A:not()‘)（过滤出类名或ID名不是text的A）、$(‘A:contains(‘text‘)‘)（选择A，过滤出包含text文本的层级元素（如果子元素包含文本，将视其上层也包含相同的文本，它们会一并被获取））。
索引过滤
$(‘A:eq(index)‘)
选择A，过滤出指定索引的A。
其它类似过滤
$(‘A:odd‘)（过滤出索引是奇数的A）、$(‘A:even‘)（过滤出索引是偶数的A）、$(‘A:gt(数字)‘)（过滤出索引<数字的A）、$(‘A:gt(数字)‘)（过滤出索引>数字的A）。
可见性过滤
不可见元素包括display为none的元素和属性为hidden的元素，如input的type=hidden的元素。
$(‘:visible‘)
选择所有元素，过滤出可见元素。
$(‘A:visible‘)
选择A，过滤出可见的A元素。
其它类似过滤
$(‘:hidden‘)（过滤出所有不可见元素）
属性过滤
$(‘A[id]‘)
选择A，拥有id属性的div元素。
$(‘A[id!=idName]‘)
选择A，过滤出id不是idName或没有id的A元素。
其它类似过滤
$(‘div[class^=text]‘)（过滤出类名是以text开头的A元素）、$("A[class$=c]")、（过滤出类名是以text结尾的A元素）、$(‘div[class*=text]‘)（过滤出类名包含了text字符的div元素）。
属性过滤组合
组合多个属性过滤器，相当于&&。
$(‘div[id][id!=box]‘)
选择div，过滤出拥有id属性并且id名不是box的div元素。
后代元素过滤
$(‘:nth-child(n)‘)
选择所有元素，但他们必须是其父元素中的第n个子元素。n从1开始。
$(‘A:nth-child(n)‘)
选择A元素，A元素必须是其父元素中的第n个子元素，n从1开始。
$(‘A:nth-child(even)‘)
选择A元素，A元素必须是其父元素中的索引为偶数的子元素。
$(‘A:nth-child(odd)‘)
选择A元素，父元素中的索引为奇数的子元素。
$(‘A:nth-child(数字n)‘)
选择A元素，A元素必须是其父元素下索引是数字的n倍的子元素 ，n从0开始自动与数字相乘。
例子：选择第3、6、9个子元素：
$(‘A:nth-child(数字n+1) ‘)
选择A，A元素必须是其父元素下索引是数字的n倍+1的子元素 ，n从0开始自动与数字相乘。
$(‘A:first-child‘)
选择A，A元素必须是其父元素的第一个子元素。
$(‘A空格:first-child‘)
选择A的后代元素，后代元素只要是其父元素的第一个子元素都会被获取到。
$(‘A:last-child‘)
选择A，A元素必须是其父元素的最后一个子元素。
$(‘A空格:last-child‘)
选择A的后代元素，后代元素只要是其父元素的最后一个子元素都会被获取到。
表单属性过滤
$(‘:enabled‘)
选择所有元素，同时必须是未被禁用的元素
其它类似过滤
$(‘:disabled‘)（过滤出被禁用的元素）、 $(‘:checked‘)（过滤出被选中的复选框元素）、$(‘:selected‘)（过滤出被选中的下拉框元素）。
表单元素过滤
$(‘:radio‘)
过滤出所有单选框元素。
$(‘:file‘)
过滤出所有的上传域元素。
$(‘:reset‘)
过滤出所有重置按钮元素。
$(‘:text‘)
过滤出所有单行文本框元素。
$(‘:image‘)
过滤出所有图像按钮元素。
$(‘:submit‘)
过滤出所有提交按钮元素。
$(‘:checkbox‘)
过滤出所有复选框元素。
$(‘:hidden‘)
过滤出所有表单不可见元素
$(‘:password‘)
过滤出所有密码文本框元素。
$(‘:input‘)
过滤出所有input、textarea、select、button元素。
附：如果一个页面中不但引用了jquery.js 还引用了有可能引发冲突的其它js脚本 可如下设置
//使用一个变量替代$即可var jq = $.noConflict();
Javascript - 学习总目录
Javascript - Jquery选择器