在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 相关文章推荐
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
JS的get和set使用示例
Feb 20 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 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的array_multisort()使用方法介绍
2012/05/16 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
javascript this详细介绍
2016/09/19 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
JS中数组重排序方法
2016/11/11 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
总结javascript三元运算符知识点
2018/09/28 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
详解JS函数防抖
2020/06/05 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
利用Psyco提升Python运行速度
2014/12/24 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
numpy排序与集合运算用法示例
2017/12/15 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
Python常用数据分析模块原理解析
2020/07/20 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
禁毒宣传活动总结
2014/08/26 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis