层级选择器
<div>
<ul id="ul">
<li>aaa</li>
<li id="one">bbb</li>
<li>ccc</li>
<li>ddd</li>
<p>乒乒乓乓乒乒乓乓</p>
</ul>
<ul>
<li>啊啊啊</li> <li>哦哦哦</li>
</ul>
</div>
<script>
层级
ancestor祖先 descendant后代 (后代选择器) parent父亲 > child子 (子选择器)
prev上一个 + next下一个 (下一个兄弟)
prev上一个 ~ siblings兄弟姐妹 (下面所有兄弟)
console.log("后代",$("div li"));
console.log("子1",$("div > li"));//没有 console.log("子2",$("ul > li"));
console.log("子3",$("#ul > li"));
console.log("下一个1",$("#one + li")); console.log("下一个2",$("#one + p"));//没有
console.log("下所有",$("#one ~ li"));
/script>
基本筛选选择器
<ul>
<li>aaaa -- 0</li>
<li>bbbb -- 1</li>
<li>cccc -- 2</li>
<li>dddd -- 3</li>
<li>eeee -- 4</li>
<li>ffff -- 5</li>
</ul>
<form >
<input type="text" >
<input type="text">
</form>
<script>
/*
基本筛选器
:root 根元素 永远是<html>元素。
:first 第一个
:last 最后一个
:eq(index) 下标 等于
:gt(index) 下标 大于
:lt(index) 下标 小于 :even 下标 偶数 :odd 下标 奇数
:not(selector) 除了
:focus 获得焦点的元素 */ $("input").click(function(){ console.log($(":focus"))// 获得焦点的元素
})
console.log("根元素", $(":root") );
console.log("ul下第一个li",$("ul>li:first")); console.log("ul下最后一个li",$("ul>li:last"));
console.log("ul下下标为 2 的 li",$("ul>li:eq(2)")); console.log("ul下下标大于 2 的 li",$("ul>li:gt(2)")); console.log("ul下下标小于 2 的 li",$("ul>li:lt(2)")); console.log("ul下 下标为偶数 的 li",$("ul>li:even")); console.log("ul下 下标为奇数 的 li",$("ul>li:odd")); console.log("ul下 下标除了2 的 li",$("ul>li:not( ul>li:eq(2) )"));
</script>
内容选择器
<div>啊啊啊</div>
<div id="x"></div>
<div id="y">
</div>
<div>
<p id="a">1111111</p>
</div>
<div>777啊999</div>
<script>
内容
:contains(text) 匹配包含给定文本的元素
:empty
匹配所有不包含子元素或者文本的空元素
:parent
匹配含有子元素或者文本的元素
:has(selector) 含有选择器匹配的元素
console.log("获取包含 啊 的 div",$("div:contains(啊)")); console.log("获取 空 div", $("div:empty")); console.log("获取 有内容或子元素的 div",$("div:parent")); console.log("获取 div 里 有id =a 的div", $("div:has( #a )"))
</script>
属性选择器
<ul>
<li id="one" class="two" >111-two & id=one</li> <li class="xtwo" yyyyyy>222-xtwo</li>
<li class="twox">333-twox</li>
<li class="two three">444-two three</li>
<li id class="three two">555-three two</li> </ul>
<script>
属性 -- attribute [attribute]
包含某个属性 [attribute=value]
包含某个属性 且 属性值 等于 value [attribute!=value]
包含某个属性 且 属性值 不等于 value [attribute^=value]
包含某个属性 且 属性值 开头是 value [attribute$=value]
包含某个属性 且 属性值 结尾是 value [attribute*=value]
包含某个属性 且 属性值 只要有 value
[attrSel1][attrSel2][attrSelN] 群组
console.log('获取包含id 属性 的li元素 :>> ', $( "[id]" ));
console.log('获取包含class 属性 并且 class 值开头是 two 的li元素 :>> ', $( "[class ^= two]" ));
/script>
子元素选择器
<ul>
<p>9999999999999</p>
<li>0000</li>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<script>
子元素
:first-child ( :之前的选择器)的第一个子元素 :first-of-type 第一个E类型的孩子
:last-child :last-of-type1.9+
:nth-child :nth-last-child()1.9+ :nth-last-of-type()1.9+
:nth-of-type()1.9+
:only-child
:only-of-type1.9+ console.log('object :>> ', $("ul li:first-child")); console.log('object :>> ', $("ul li:last-child")); console.log('object :>> ', $("ul li:nth-child(2)"));
// 第 n 个
console.log( $("ul li:first-of-type") )
</script>