在jQuery中 常用的选择器介绍


Posted in Javascript onApril 16, 2013

层次选择器:

$('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);

Javascript 相关文章推荐
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery中对节点进行操作的相关介绍
Apr 16 #Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 #Javascript
基于jQuery中对数组进行操作的方法
Apr 16 #Javascript
js中 关于undefined和null的区别介绍
Apr 16 #Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 #Javascript
用js实现trim()的解决办法
Apr 16 #Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 #Javascript
You might like
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
在新窗口打开超链接的方法小结
2013/04/14 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python深入学习之对象的属性
2014/08/31 Python
Python生成随机数组的方法小结
2017/04/15 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Python使用python-docx读写word文档
2019/08/26 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
公务员年度考核评语
2014/12/31 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL