首页 > 文章 > web前端 > Jquery：强大的选择器

Jquery：强大的选择器

高洛峰原创: 2016-12-17 16:01:181240浏览

Jquery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器，下面一一介绍这四种选择器。

一、基本选择器

大部分都是基本选择器。基本选择器中包含id选择器、class选择器、标签选择器、复合选择器和“*”选择器。

$("#id") 选取所有属性id等于“id”的元素。

$(".class_1") 选取所有属性class为“class_1”的元素。

$("p") 选取所有的

元素。

$("div,span,p.myClass") 选取所有

、和属性class为“myClass”的

标签的一组元素。

$("*") 选取所有元素。

二、层次选择器

如果想根据个元素之间的层次关系来获取特定的元素，可以选择使用层次选择器。

$("div p") 选取

里所有的

元素。这个选择器获取的是所有后代元素，而不是下一层次的元素（即子元素）。

$("div>p") 选取

里所有标签为

子元素。

$(".class_1+div") 选取属性class为“class_1”的下一个

同辈元素。

$(".class_1").next("div") 效果同上。

$(".class_1~div") 选取属性class为“class_1”的元素后面的所有

同辈元素。

$(".class_1").nextAll("div") 效果同上。

$(".class_1").siblings("div") 与上面两个选择器不同的是：这个选择器没有前后之分，它选取所有同辈的

元素。

三、过滤选择器

过滤选择器都是以冒号(:)开头，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1、基本过滤选择器

$("div:first") 选取所有

元素中第一个

元素。

$("div:last") 选取所有

元素中最后一个

元素。

$("input:not(.class_1)") 选取属性class不是“class_1”的元素。

$("input:even") 选取索引是偶数的元素。

$("input:odd") 选取索引是奇数的元素。

$("input:eq(1)") 选取索引等于1的元素。

$("input:gt(1)") 选取索引大于1的元素。（注：大于1，而不包括1）

$("input:lt(1)") 选取索引小于1的元素。（注：小于1，而不包括1）

$(":header") 选取网页中所有的

，

...。

$("div:animated") 选取正在执行动画的
元素。

$(":focus") 选取当前获取焦点的元素。

2、内容过滤选择器

$("div:contains('我')") 选取含有文本“我”的
元素。

$("div:empty") 选取不包含子元素（包括文本元素）的
空元素。

$("div:has(p)") 选取含有
元素的
元素。

$("div:parent") 选取拥有子元素（包括文本元素）的
元素。

3、可见性过滤选择器

$(":hidden") 选取所有不可见元素，$("input:hidden") 选取所有不可见的元素。

$("div:visible") 选取所有可见的
元素。

4、属性过滤选择器

$("div[id]") 选取拥有属性id的
元素。

$("div[title=text]") 选取属性title为“text”的
元素。

$("div[title!=text]") 选取属性title不等于“text”的
元素。（注：没有属性title的
元素也会被选取）

$("div[title^=text]") 选取属性title是以“text”开头的
元素。

$("div[title$=text]") 选取属性title是以“text”结束的
元素。

$("div[title*=text]") 选取属性title中含有“text”的
元素。

$('div[title|="text"]') 选取属性title等于“text”或以“text”为前缀的
元素。（注：为前缀指该字符串后跟一个‘-’）。

$('div[title~="text"]') 选取属性title以空格分隔的值中包含字符“text”的元素。

$("div[id][title$='text']") 选取拥有属性id，并且属性title以“text”结束的
元素。

5、子元素过滤选择器

$("div.one:nth-child(2)") 选取属性class为“one”的
父元素下的第二个子元素。

$("div.one:first-child(2)") 选取属性class为“one”的
父元素下的第一个子元素。

$("div.one:last-child(2)") 选取属性class为“one”的
父元素下的最后一个子元素。

$("div.one:first-child(2)") 如果属性class为“one”的
父元素下只有一个子元素，则选取这个子元素。

6、表单对象属性过滤选择器

$("#form1 input:enabled") 选取表单内可用的元素。

$("#form1 input:disabled") 选取表单内不可用的元素。

$("input:checked") 选取被选中的多选框。

$("select:selected") 选取下拉框中被选中的项。

（注：在元素中设置属性disabled为“disabled”可使此元素不可用）

四、表单选择器

$(":input") 选取所有、、<select>和<button>元素。</p> <p> $(":text") 选取所有的单行文本框。</p> <p> $(":password") 选取所有的密码框。</p> <p> $(":radio") 选取所有的单选框。</p> <p> $(":checkbox") 选取所有的复选框。</p> <p> $(":image") 选取所有的图像按钮。</p> <p> $(":reset") 选取所有的重置按钮。</p> <p> $(":button") 选取所有的按钮。</p> <p> $(":file") 选取所有的上传控件。</p> <p> $(":hidden") 选取所有的不可见元素。</p> <p> 五、选择器中的一些注意事项</p> <p> 1、一些属性值中含有特殊字符</p> <p> 如：<div id="id[1]">aa</div>,获取此元素的方法是：$("#id\\[1\\]")。</p> <p> 2、选择器中含有空格</p> <p> $('.class_1 :hidden')与$('.class_1:hidden')的对比。</p> <p> $('.class_1 :hidden') 获取到的是属性class为class_1的元素里边包含的隐藏元素。</p> <p> $('.class_1:hidden') 获取到的是属性class为class_1的元素。</p> <p><br></p> <p><br></p> <p>更多Jquery：强大的选择器相关文章请关注PHP中文网！</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="使用js callback机制实现调用页面局部刷新" href="http://m.php.cn/zh/faq/345213.html">使用js callback机制实现调用页面局部刷新</a></span><span>下一篇：<a class="dBlack" title="jquery 用于选择多个元素的多选择器" href="http://m.php.cn/zh/faq/345217.html">jquery 用于选择多个元素的多选择器</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相关文章</h2><em><a href="http://m.php.cn/zh/article.html" class="bBlack"><i>查看更多</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh/faq/1609.html" title="深入浅析Bootstrap列表组组件" class="aBlack">深入浅析Bootstrap列表组组件</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/1640.html" title="JavaScript函数柯里化详解" class="aBlack">JavaScript函数柯里化详解</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/1949.html" title="JS密码生成与强度检测完整实例(附demo源码下载)" class="aBlack">JS密码生成与强度检测完整实例(附demo源码下载)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/2248.html" title="Angularjs整合微信UI（weui）" class="aBlack">Angularjs整合微信UI（weui）</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/2351.html" title="JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招_javascript技巧" class="aBlack">JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招_javascript技巧</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/zh/"><b class="icon1"></b><p>首页</p></a></li><li><a href="http://m.php.cn/zh/course.html"><b class="icon2"></b><p>课程</p></a></li><li><a href="http://m.php.cn/zh/wenda.html"><b class="icon4"></b><p>问答</p></a></li><li><a href="http://m.php.cn/zh/login"><b class="icon5"></b><p>我的</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/zh/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/zh/"><b class="icon1"></b><span>首页</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/course.html"><b class="icon2"></b><span>课程</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/wenda.html"><b class="icon4"></b><span>问答</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/dic.html"><b class="icon6"></b><span>词典</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/xiazai/"><b class="icon8"></b><span>下载</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/faq/zt" title="专题"><b class="icon12"></b><span>专题</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/zh/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/zh/" >首页</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/article.html" class="hover">文章</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/wenda.html" >问答</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/course.html" >课程</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/faq/zt" >专题</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/xiazai" >下载</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/game" >手游</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/dic.html" >词典</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>