JQuery标签选择器

最新推荐文章于 2024-01-14 11:54:30 发布

这是一条海鱼

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量6.3k

点赞数 4

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_41071876/article/details/107301746

版权

前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、基本选择器

1、id选择器

语法：$(" #id值 ")

根据给定的ID匹配一个元素

2、class选择器

语法：$(" .class值 ")

根据给定的类匹配元素。

3、标签选择器

语法：$(" 标签名 ")

根据给定的元素名匹配所有元素

4、通配符选择器

语法：$(" * ")

匹配所有元素

5、并集选择器

语法：$(" selector1,selector2,selectorN ")

将每一个选择器匹配到的元素合并后一起返回。

6、交集选择器

语法：$(" selector1selector2 ")

注意选择器1和选择器2之间没有空格，注意区分后代选择器。

二、层级选择器

1、后代选择器

语法：：$(" E F ")

说明：E与F之间用空格分开，注意：E必须包含F

功能描述：在给定的祖先元素下匹配所有的后代元素（不一定是直系）

2、子选择器

语法：：$(" E> F ")

说明：E必须包含F

功能描述：选择匹配的F元素,F必须是E的直系子元素

3、相邻兄弟选择器

语法：：$("E+ F ") 等价于 $(“E”).next(“F”)

说明：E,F元有一个相同的父级元素，换句话说E和F是同辈元素

功能描述：选择匹配的F元素,注意E和F必须相邻且F在E的下面

4、通用兄弟选择器**

语法：：$("E~ F ") 等价于 $(“E”).nextAll(“F”)

说明：E,F元有一个相同的父级元素，换句话说E和F是同辈元素

功能描述：选择匹配的F元素,注意选择E后面的元素F

三、过滤选择器

1、获取第一个元素**

语法： $(":first")

 <ul>
        <li id="li1">1</li>
        <li id="li2">2</li>
        <li id="li3">3</li>
        <li id="li4">4</li>
   </ul>

    <script>
       $(function(){
        var $li = $("li:first");
        console.log($li.text()); //1
       })
    </script>

2、获取最后个元素**

语法： $(":last ")

 <ul>
        <li id="li1">1</li>
        <li id="li2">2</li>
        <li id="li3">3</li>
        <li id="li4">4</li>
   </ul>

    <script>
       $(function(){
        var $li = $("last");
        console.log($li.text()); //4
       })
    </script>

3、去除所有与给定选择器匹配的元素**

语法： $(":not(selector)")

4、索引获取-等于**

语法： $(" :eq(index)")

获取到的li元素中，选择索引号为2的元素，索引号index从0开始。

 <ul>
        <li id="li1">1</li>
        <li id="li2">2</li>
        <li id="li3">3</li>
        <li id="li4">4</li>
   </ul>
    <script>
       $(function(){
        var $li = $("li:eq(1)");
        console.log($li.text());//2
       })  
    </script>

5、索引获取-大于**

语法： $(":gt(index) ")

匹配所有大于给定索引值的元素,不包括索引值的元素

   <ul>
        <li id="li1">1</li>
        <li id="li2">2</li>
        <li id="li3">3</li>
        <li id="li4">4</li>
   </ul>
    <script>
       $(function(){
        var $li = $("li:gt(1)");
        console.log($li.text());//34
       })  
    </script>

6、索引获取-大于**

语法： $(":lt(index) ")

匹配所有小于给定索引值的元素，不包括索引值的元素

   <ul>
        <li id="li1">1</li>
        <li id="li2">2</li>
        <li id="li3">3</li>
        <li id="li4">4</li>
   </ul>
    <script>
       $(function(){
        var $li = $("li:lt(1)");
        console.log($li.text());//1
       })  
    </script>

7、选择索引号为奇数的元素（从0开始）**

语法： $(" :odd")

 <ul>
        <li id="li1">1</li>
        <li id="li2">2</li>
        <li id="li3">3</li>
        <li id="li4">4</li>
   </ul>

    <script>
       $(function(){
        var $li = $("li:odd");
        console.log($li.text());//24
       })
    </script>

8、选择索引号为偶数的元素**

语法： $(":even ")

 <ul>
        <li id="li1">1</li>
        <li id="li2">2</li>
        <li id="li3">3</li>
        <li id="li4">4</li>
   </ul>

    <script>
       $(function(){
        var $li = $("li:even");
        console.log($li.text());//13
       })
    </script>

9、匹配如 h1, h2, h3之类的标题元素

语法： $(" :header")

<h1>1</h1>
<h6>6</h6>
<p></p>

<script>
   $(function(){
    var $header = $(":header");
    console.log($header.text());//16
   })
</script>

10、匹配所有正在执行动画效果的元素

语法： $(":animated ")

11、匹配当前获取焦点的元素

语法： $(":focus ")

四、表单选择器

1、匹配所有 input, textarea, select 和 button 元素

语法：$(":input")

<form>
    <input type="button" value="Input Button" id="button1"/>
    <input type="checkbox" id="checkbox1"/>
    <input type="file" id="file1"/>
    <input type="hidden" id="hidden1"/>
    <input type="image" id="image1"/>
    <input type="password" id="password1"/>
    <input type="radio" id="radio1"/>
    <input type="reset" id="reset1"/>
    <input type="submit" id="submit1"/>
    <input type="text" id="text1"/>
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>
<script>
   $(function(){
       console.log($(":input"));
   })
</script>

在这里插入图片描述

2、匹配所有的单行文本框

语法：$(":text")

<form>
    <input type="button" value="Input Button" id="button1"/>
    <input type="checkbox" id="checkbox1"/>
    <input type="file" id="file1"/>
    <input type="hidden" id="hidden1"/>
    <input type="image" id="image1"/>
    <input type="password" id="password1"/>
    <input type="radio" id="radio1"/>
    <input type="reset" id="reset1"/>
    <input type="submit" id="submit1"/>
    <input type="text" id="text1"/>
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>
<script>
    
   $(function(){
       console.log($(":text"));
   })
 
</script>

在这里插入图片描述

3、匹配所有密码框

语法：$(":password")

<form>
    <input type="button" value="Input Button" id="button1"/>
    <input type="checkbox" id="checkbox1"/>
    <input type="file" id="file1"/>
    <input type="hidden" id="hidden1"/>
    <input type="image" id="image1"/>
    <input type="password" id="password1"/>
    <input type="radio" id="radio1"/>
    <input type="reset" id="reset1"/>
    <input type="submit" id="submit1"/>
    <input type="text" id="text1"/>
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>
<script>
    
   $(function(){
       console.log($(":password"));
   })
 
</script>

在这里插入图片描述

4、匹配所有单选按钮

语法：$(":radio")

<form>
    <input type="button" value="Input Button" id="button1"/>
    <input type="checkbox" id="checkbox1"/>
    <input type="file" id="file1"/>
    <input type="hidden" id="hidden1"/>
    <input type="image" id="image1"/>
    <input type="password" id="password1"/>
    <input type="radio" id="radio1"/>
    <input type="reset" id="reset1"/>
    <input type="submit" id="submit1"/>
    <input type="text" id="text1"/>
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>
<script>
    
   $(function(){
       console.log($(":radio"));
   })
 
</script>

在这里插入图片描述

5、匹配所有复选框

语法：$(":checkbox")

<form>
    <input type="button" value="Input Button" id="button1"/>
    <input type="checkbox" id="checkbox1"/>
    <input type="file" id="file1"/>
    <input type="hidden" id="hidden1"/>
    <input type="image" id="image1"/>
    <input type="password" id="password1"/>
    <input type="radio" id="radio1"/>
    <input type="reset" id="reset1"/>
    <input type="submit" id="submit1"/>
    <input type="text" id="text1"/>
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>
<script>
    
   $(function(){
       console.log($(":checkbox"));
   })
 
</script>

在这里插入图片描述

6、匹配所有提交按钮

语法：$(":submit") 理论上只匹配 type=“submit”
的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。

<form>
    <input type="button" value="Input Button" id="button1"/>
    <input type="checkbox" id="checkbox1"/>
    <input type="file" id="file1"/>
    <input type="hidden" id="hidden1"/>
    <input type="image" id="image1"/>
    <input type="password" id="password1"/>
    <input type="radio" id="radio1"/>
    <input type="reset" id="reset1"/>
    <input type="submit" id="submit1"/>
    <input type="text" id="text1"/>
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>
<script>
    
   $(function(){
       console.log($(":submit"));
   })
 
</script>

在这里插入图片描述

7、匹配所有图像域

语法：$(":image")

<form>
    <input type="button" value="Input Button" id="button1"/>
    <input type="checkbox" id="checkbox1"/>
    <input type="file" id="file1"/>
    <input type="hidden" id="hidden1"/>
    <input type="image" id="image1"/>
    <input type="password" id="password1"/>
    <input type="radio" id="radio1"/>
    <input type="reset" id="reset1"/>
    <input type="submit" id="submit1"/>
    <input type="text" id="text1"/>
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
    <img src="" />
</form>
<script>
    
   $(function(){
       console.log($(":image"));
   })
 
</script>

在这里插入图片描述

8、匹配所有重置按钮

语法：$(":reset")

<form>
    <input type="button" value="Input Button" id="button1"/>
    <input type="checkbox" id="checkbox1"/>
    <input type="file" id="file1"/>
    <input type="hidden" id="hidden1"/>
    <input type="image" id="image1"/>
    <input type="password" id="password1"/>
    <input type="radio" id="radio1"/>
    <input type="reset" id="reset1"/>
    <input type="submit" id="submit1"/>
    <input type="text" id="text1"/>
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
    <img src="" />
</form>
<script>
    
   $(function(){
       console.log($(":reset"));
   })
 
</script>

在这里插入图片描述

9、匹配所有按钮

语法：$(":button"）

<form>
    <input type="button" value="Input Button" id="button1"/>
    <input type="checkbox" id="checkbox1"/>
    <input type="file" id="file1"/>
    <input type="hidden" id="hidden1"/>
    <input type="image" id="image1"/>
    <input type="password" id="password1"/>
    <input type="radio" id="radio1"/>
    <input type="reset" id="reset1"/>
    <input type="submit" id="submit1"/>
    <input type="text" id="text1"/>
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
    <img src="" />
</form>
<script>
    
   $(function(){
       console.log($(":button"));
   })
 
</script>

在这里插入图片描述

10、匹配所有文件域

语法：$(":file")

<form>
    <input type="button" value="Input Button" id="button1"/>
    <input type="checkbox" id="checkbox1"/>
    <input type="file" id="file1"/>
    <input type="hidden" id="hidden1"/>
    <input type="image" id="image1"/>
    <input type="password" id="password1"/>
    <input type="radio" id="radio1"/>
    <input type="reset" id="reset1"/>
    <input type="submit" id="submit1"/>
    <input type="text" id="text1"/>
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
    <img src="" />
</form>
<script>
    
   $(function(){
       console.log($(":file"));
   })
 
</script>

在这里插入图片描述

五、表单对象属性选择器

:enabled匹配所有可用元素

:disabled匹配所有不可用元素

:checked匹配所有选中的被选中元素(复选框、单选框等)

:selected匹配所有选中的option元素(下拉列表)

六、可见性选择器

1、匹配所有不可见元素

语法：$(":hidden")

匹配所有不可见元素，或者type为hidden的元素

以下几种情况的元素是隐藏元素：注释：该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。

设置为 display:none
带有 type=“hidden” 的表单元素
width 和 height 设置为 0
隐藏的父元素（这也会隐藏子元素

2、匹配所有的可见元素

语法：$(":visible")

七、子元素选择器

1、先位置，在元素

语法：$(" :first-child") 匹配第一个子元素
语法： $(":last-child")

<ul>
     <p id="p1"></p>
     <li id="li1"><span></span></li>
     <li id="li2"></li>         
     <li id="li3"></li>
</ul>
<script>
     
   $(function(){
       console.log($("ul li:first-child")); //没有匹配到，因为ul到第一个子元素不是li
   })
  
</script>

2、先元素，在位置

语法：$(“E:first-of-type”)

语法：$(“E:last-of-type”)

<ul>
     <p id="p1"></p>
     <li id="li1"><span></span></li>
     <li id="li2"></li>         
     <li id="li3"></li>
</ul>
<script>
     
   $(function(){
       console.log($("ul li:first-of-type"));
   })
  
</script>

在这里插入图片描述

八、属性选择器

1、匹配包含给定属性的元素

语法：$（" [attribute] "）

2、匹配给定的属性是某个特定值的元素

语法：$（"[attribute=value] "）

3、匹配给定的属性不是某个特定值的元素

语法：$（"attribute!=value] "）

4、匹配给定的属性是以某些值开始的元素

语法：$（" [attribute^=value]"）

<p class="fooof">第一个p</p>
<p class="foww">第二个p</p>
<p class="fooof">第三个p</p>
<div id="box1">第一个div</div>
<div id="box2">第二个div</div>
<div id="box3">第三个div</div>
<script>
   $(function(){   
       console.log($("[class^='f']"));
   })
</script>

在这里插入图片描述

5、匹配给定的属性是以某些值结尾的元素

语法： $（ " [a t t r i b u t e$ =value] "）

6、匹配给定的属性是以包含某些值的元素

语法：$（" [attribute*=value]"）

7、复合属性选择器，需要同时满足多个条件时使用。

语法：$（"[attrSel1][attrSel2][attrSelN]"）

<p class="fooof">第一个p</p>
<p class="foww">第二个p</p>
<p class="fooof">第三个p</p>
<div id="box1">第一个div</div>
<div id="box2">第二个div</div>
<div id="box3" class="box">第三个div</div>
<script>
   $(function(){   
       console.log($("[class][id]"));
   })
</script>

在这里插入图片描述

九、内容选择器

1、匹配包含给定文本的元素

语法：$(":contains(string)")

<p class="fooof">第一个p</p>
<p class="foww">第二个p</p>
<p class="fooof">第三个p</p>
<div id="box1">第一个div</div>
<div id="box2">第二个div</div>
<div id="box3" class="box">第三个div</div>
<script>
   $(function(){   
       console.log($("body :contains('二')"));      
   })
</script>

在这里插入图片描述

2、匹配所有不包含子元素或者文本为空元素

语法：$(":empty")

3、匹配含有选择器所匹配的元素的元素，参数selector是一个标签选择器

语法：$(":has(selector)")

<p class="fooof">第一个p</p>
<p class="foww"><span></span></p>
<p class="fooof">第三个p</p>
<div id="box1">第一个div</div>
<div id="box2"></div>
<div id="box3" class="box">第三个div</div>
<script>
   $(function(){   
       console.log($("p:has(span)"));      
   })
</script>

在这里插入图片描述

4、匹配含有子元素或者文本的元素

语法：$(":parent")

<p class="fooof">第一个p</p>
<p class="foww"></p>
<p class="fooof">第三个p</p>
<div id="box1">第一个div</div>
<div id="box2"></div>
<div id="box3" class="box">第三个div</div>
<script>
   $(function(){   
       console.log($("body :parent"));      
   })
</script>

在这里插入图片描述

这是一条海鱼

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
JQuery标签选择器

一、基本选择器1、id选择器语法：$(" #id值 ")根据给定的ID匹配一个元素2、class选择器语法：$(" .class值 ")根据给定的类匹配元素。3、标签选择器语法：$(" 标签名 ")根据给定的元素名匹配所有元素4、通配符选择器语法：$(" * ")匹配所有元素5、并集选择器语法：$(" selector1,selector2,selectorN ")将每一个选择器匹配到的元素合并后一起返回。6、交集选择器语法：$(" selector1
复制链接

扫一扫