您的位置：首页 > Web前端 > JQuery

jQuery高级选择器

2016-07-17 10:50 465 查看
 <!doctype html>
 <html
lang="en">
 <head>
 <meta
charset="UTF-8" />
 <title>层级选择器</title>
 <script
type="text/javascript"
src="../jquery-2.2.3.js"></script>
 </head>
 <body>
 <div
class="my_div">
 <ul
class="lang">
 <li
class="lang_javascript">javascript</li>
 <li
class="lang_java">java</li>
 <li
class="lang_php">php</li>
 <li
class="lang_swfit">swift</li>
 </ul>
 </div>
  
 <div>
 <ul>
 <li
class="lang_javascript">javascript</li>
 <li
class="lang_java">java</li>
 <li
class="lang_php">php</li>
 <li
class="lang_swfit">swift</li>
 </ul>
 </div>
  
 <div
style="display:none;">隐藏的div</div>
  
 <div>
 <ul>
 <li>你就是我的唯一，唯一爱的就是你！</li>
 </ul>
 </div>
  
 <div></div>
 <p></p>
  
 <script
type="text/javascript">
 /*
 多项选择器：
 可以获得多个不同的元素，例如：$("div,p") 获得所有的div 和 p 元素
  
 层级选择器：
 因为JS DOM的结构是由层级关系的，单纯的通过基本的选择器是无法满足我们的查找需求，这时候我们就需要用到层级选择器，层级选择器其实就是说祖先与后代的关系。
  
 子选择器：
 层级选择器包含子选择器，只不过子选择器是描述父与子的关系。
  
 过滤选择器：
 过滤选择器一般不单独使用，通过和其他选择器配合使用，能更精确的查找某些元素。
 */
  
 $(function () {
 //多项选择器
 //获得所有的div 和 li 元素
 var many_1 = $('div,li');
 console.log(many_1.length);
  
 //层级选择器
 //获得所有div下的javascript语言所在的li元素
 var js_1 = $('div li.lang_javascript');
 console.log(js_1.length);
  
 //获得所有类名叫做my_div的div下的javascript语言所在的li元素
 var js_2 = $('div.my_div li.lang_javascript');
 console.log(js_2.length);
  
 //获得所有ul下的javascript语言所在的li元素
 var js_3 = $('ul li.lang_javascript');
 console.log(js_3.length);
  
 //获得所有类名叫做lang的ul下的javascript语言所在的li元素
 var js_4 = $('ul.lang li.lang_javascript');
 console.log(js_4.length);
  
  
 //子选择器
 //获得所有ul下的javascript语言所在的li元素
 var js_5 = $('ul>li.lang_javascript');
 console.log(js_5.length);
  
 //获得所有类名叫做lang的ul下的javascript语言所在的li元素
 var js_6 = $('ul.lang>li.lang_javascript');
 console.log(js_6.length);
  
 //注意：子选择器描述的是父子节点关系，以下代码是找不到的
 var js_7 = $('div>li.lang_javascript');
 console.log(js_7.length);
  
 //过滤选择器
 //获得类名为lang的ul元素下的第一个li元素
 var filter_1 = $('ul.lang li:first');
 console.log(filter_1.html());
  
 //获得类名为lang的ul元素下的最后一个li元素
 var filter_2 = $('ul.lang li:last');
 console.log(filter_2.html());
  
 //获得类名为lang的ul元素下的某一个（li的下标）li元素
 var filter_3 = $('ul.lang li:eq(1)');
 console.log(filter_3.html());
  
 //获得类名为lang的ul元素下的所有偶数li元素
 var filter_4 = $('ul.lang li:even');
 console.log(filter_4[0].innerHTML + "===" + filter_4[1].innerHTML);
  
 //获得类名为lang的ul元素下的所有奇数li元素
 var filter_5 = $('ul.lang li:odd');
 console.log(filter_5[0].innerHTML + "---" + filter_5[1].innerHTML);
  
 //获得类名为lang的ul元素下的所有下标小于2的li元素
 var filter_6 = $('ul.lang li:lt(2)');
 console.log(filter_6[0].innerHTML + '---' + filter_6[1].innerHTML);
  
 //获得类名为lang的ul元素下的所有下标大于2的li元素
 var filter_7 = $('ul.lang li:gt(2)');
 console.log(filter_7.html());
  
 //获得所有隐藏的div
 var filter_8 = $('div:hidden');
 console.log(filter_8.html());
  
 //获得所有可见的div
 var filter_9 = $('div:visible');
 console.log(filter_9.html());
  
 //获得类名为lang的ul元素下的除了类名为lang_javascript的所有li元素
 var filter_10 = $('ul.lang li:not(.lang_javascript)');
 var filter_11 = $('ul.lang li:not([class = lang_javascript])');
 console.log(filter_10.length);
 console.log(filter_11.length);
  
 //获得类名为lang的ul元素下包含文本为Java的li元素
 //注意：contains 是模糊包含，只要包含某段内容 就会找出来
 var filter_12 = $('ul.lang li:contains("java")'); // javascript 和 java都符合
 console.log(filter_12.length);
  
 //获得所有子元素为空或文本为空的元素
 var filter_13 = $(":empty");
 console.log(filter_13);
  
 //获得所有div为空的和所有p为空的元素
 var filter_14 = $("div:empty,p:empty");
 console.log(filter_14);
  
 //获得所有包含li元素的div元素
 var filter_15 = $("div:has('li')");
 console.log(filter_15.length);
  
 //获得所有ul下的第一个li元素
 //注意：:first :last :eq() 等... 是获取的唯一的一个元素，而不是多个
 var filter_16 = $("ul li:first");
 console.log(filter_16.length);
  
 var filter_17 = $("ul li:first-child");
 console.log(filter_17.length);
  
 //获得所有ul下的最后一个li元素
 var filter_18 = $("ul li:last-child");
 console.log(filter_18.length);
  
 //获得所有ul下的某一个li元素
 //注意：下标从1开始！！！！
 var filter_19 = $("ul li:nth-child(2)");
 console.log(filter_19[0].innerHTML + '---' + filter_19[1].innerHTML);
  
 //获取仅有一个li子元素的ul
 var filter_20 = $("ul li:only-child");
 console.log(filter_20.html());
  
  
 });
  
 </script>
 </body>
 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航