<!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> |
jQuery高级选择器
最新推荐文章于 2022-05-24 21:43:48 发布