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>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="使用js callback机制实现调用页面局部刷新" href="http://m.php.cn/ms/faq/345213.html">使用js callback机制实现调用页面局部刷新</a></span><span>Artikel seterusnya：<a class="dBlack" title="jquery 用于选择多个元素的多选择器" href="http://m.php.cn/ms/faq/345217.html">jquery 用于选择多个元素的多选择器</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</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/ms/faq/1609.html" title="Analisis mendalam bagi komponen kumpulan senarai Bootstrap" class="aBlack">Analisis mendalam bagi komponen kumpulan senarai Bootstrap</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1640.html" title="Penjelasan terperinci tentang fungsi JavaScript kari" class="aBlack">Penjelasan terperinci tentang fungsi JavaScript kari</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1949.html" title="Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)" class="aBlack">Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/2248.html" title="Angularjs menyepadukan UI WeChat (weui)" class="aBlack">Angularjs menyepadukan UI WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/2351.html" title="Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional" class="aBlack">Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional</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/ms/"><b class="icon1"></b><p>Rumah</p></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><p>Kursus</p></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><p>Soal Jawab</p></a></li><li><a href="http://m.php.cn/ms/login"><b class="icon5"></b><p>saya</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/ms/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><span>Rumah</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><span>Kursus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><span>Soal Jawab</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/dic.html"><b class="icon6"></b><span>Kamus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/xiazai/"><b class="icon8"></b><span>Muat turun</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/faq/zt" title="Topik"><b class="icon12"></b><span>Topik</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/ms/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ms/" >Rumah</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/wenda.html" >Soal Jawab</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/course.html" >Kursus</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/faq/zt" >Topik</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/xiazai" >Muat turun</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/game" >Permainan</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/dic.html" >Kamus</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:;" class="language course-right-orders chooselan chooselanguage" 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><!--顶部导航 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>