Jquery：强大的选择器

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>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="使用js callback机制实现调用页面局部刷新" href="http://m.php.cn/fr/faq/345213.html">使用js callback机制实现调用页面局部刷新</a></span><span>Article suivant：<a class="dBlack" title="jquery 用于选择多个元素的多选择器" href="http://m.php.cn/fr/faq/345217.html">jquery 用于选择多个元素的多选择器</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</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/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</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/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</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:;" class="language course-right-orders chooselan chooselanguage" 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><!--顶部导航 end--><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>