在jQuery中 常用的选择器介绍

所属分类: 网络编程 / JavaScript 阅读数: 732
收藏 0 赞 0 分享

层次选择器:

$('div p');//选取div下的所有的p元素

$('div>p').css('border','1px solid red');//只选取div下的直接子元素

//相邻的元素

$('div ~ p).css('border','1px solid red');与$('div').nextAll('p')等价;//表示div后面的

所有p兄弟元素

$('div ~ *').css('border','1px solid red');//表示div后面的所有兄弟元素

$('div +p').css('border','1px solid red');与$('div').next('p')等价//这种写法表示div后

只找紧挨着的第一个兄弟元素,并且该元素是p。 

获得兄弟元素的方法:

    next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个)

nextAll();//当前元素之后的所有兄弟元素

prev();//当前元素之前的紧邻着的兄弟元素(上一个)

prevAll();//当前元素之前的所有兄弟元素

siblings();//当前元素的所有兄弟元素
 

基本过滤选择器:

 $('p:first')与$('p').first()是等价的。获取所有p元素中的第一个P元素

 $('p:last')与$('p').last()

 $('p:eq(2)')在所有的p元素中找到索引为2的元素

 $('p:even')选取所有奇数的p标签

 $('p:odd')选取所有偶数的p标签

 $('p:not(.tst)').css();选取所有的不应用.tst这种样式的p元素not后面写一个选择器名称

 $('p:gt(1)')选取所有索引值大于1的p元素

 $('p:lt(3)')选取所有索引值小于3的p元素。

 $(':header')选取页面上所有的h1-h6的元素。(如果这样写的话,中间绝对不能有空格。)


属性过滤选择器:

    $("div[id]")选取有id属性的<div>

$("div[title=test]")选取title属性为“test”的<div>,jQuery中没有对getElementsByName       

    进行封装,用$("input[name=abc]")

    $("div[title!=test]")选取title属性不为“test”的<div>

      还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等,条件还 

      可以复合。【[属性1=a][属性2=b]…】(*)

      表单对象属性选择器(过滤器):

    $("#form1 :enabled")选取id为form1的表单内所有启用的元素

    $("#form1 :disabled")选取id为form1的表单内所有禁用的元素

    $(“input:checked”)选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.

    $("select :selected")选取所有选中的选项元素(下拉列表)


表单滤选择器:

    $('#form1:enabled');//这个表示能够启用的且id为form1的标签

    $('#form1  :enabled');//这个表示能够启用的且id为form1下的所有启用的元素。

    $('input:checked')

    $('input:disabled')

    $ ('select:selected')

$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样,    

$("input")只获得<input>

$(":text")选取所有单行文本框,等价于   

$("input[type=text]"),$(‘input[type=text]'),$(‘:text');

    $(“:password”)选取所有密码框。


内容过滤选择器:

    :contains(text):过滤出包含给定文本的元素。

    :empty包含没有子元素的或者是内容为空的元素。

    :has(selecttor)

    :parent  获得有子元素的元素。


可见性过滤器:

   :hidden

     选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)

      1.表单元素type=“hidden”

      2.设置css的display:none

      3.高度和宽度明确设置为0的元素。

      4.父元素时隐藏的,所以子元素也是隐藏的

      visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden.(与之前版本   

      jQuery不太一样,1.3.2之前)

  :visible

   选取所有可见元素
 

子元素过滤选择器:

first-child  与first的区别:first只能选取第一个,而first-child,则能选取每个子元素的第一个元素。

last-child:

only-child:匹配当前父元素中只有一个子元素的元素。

nth-child:对比eq()来理解,eq()值匹配一个,nth-child()为每个父元素都要匹配一个子元素。

nth-child(index),index从1开始

nth-child(even)

nth-child(odd)

nth-child(3n),选取3的倍数的元素

nth-child(3n+1)满足3的倍数+1的元素


注意:

     1.通过jQuery选择器选择的对象本身就是一个jQuery对象,选择器具有隐式迭代     的作用,例如:

     $('p').click(function(){

    alert(this.innerText);

     });

     是为所有的p都注释了click事件。

2.无论选择器选择了几个元素返回的一个元素都是一个集合对象,如果没有找到相应的元素,则这个集合对象的length值为0,如果选择到了元素,这个length的元素就是选择的元素的索引值。所以也根据这个属性来判断元素是否存在。例如:

     Iif($('#div').length>0)//判断元素是否存在

3.在事件中this还是表示当前触发事件的元素的对象,但是这里的this是dom对象而不是jQuery对象。如果需要执行jQuery中的方法或属性时,应该把this转换为jQuery对象

转换方式为:$(this);

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多