<!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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
