码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript - Jquery选择器

时间:2017-06-04 21:19:17      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:logs   多个   例子   nim   ast   sbo   可见性   alt   res   

选择器(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选择器

标签:logs   多个   例子   nim   ast   sbo   可见性   alt   res   

原文地址:http://www.cnblogs.com/myrocknroll/p/6938187.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!