除Jq之外的选择器

最新推荐文章于 2022-07-20 17:12:55 发布

vipona999

最新推荐文章于 2022-07-20 17:12:55 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/vipona999/article/details/112912018

版权

层级选择器

<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>