jQuery | 选择器（基础、层级、基本、内容、属性、子元素、表单、表单属性）

最新推荐文章于 2024-10-02 17:15:49 发布

Bravo！！！

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量172

点赞数 1

分类专栏： jQuery 文章标签： jquery html

本文链接：https://blog.csdn.net/weixin_47982238/article/details/108006212

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文详细介绍了jQuery中的选择器，包括基础选择器、层级选择器、基本选择器、内容选择器、属性选择器、子元素选择器、表单选择器以及表单属性选择器。内容涵盖ID、类、属性、子元素等多种选择方式，帮助开发者更有效地操作DOM元素。

摘要由CSDN通过智能技术生成

jQuery中$方法冲突问题：

1.$()

2.jQuery();

一、基础选择器

1.#id

2.ele

3.class

4.*

5.sel1, sel2

类似于CSS3中的内容--->传送门

<body>
    <h1 id="hid">aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1 class="hcls">bbbbbbbbbbbbbbbbbbbbbbb</h1>
    <h1>ccccccccccccccccccccccc</h1>
    <h1 class="hcls">ddddddddddddddddddddddd</h1>
    <h2>eeeeeeeeeeeeeeeeeeeeeee</h2>
    <p>ffffffffffffffffffffffffff</p>
</body>
<script>
$('#hid').css({'background':'#f00'})
$('.hcls').css({'color':'#0ff'});
$('h2,p').css({'background':'#0f0'})
</script>

二、层级选择器

1.ancestor descendant

2.parent > child

3.prev + next

4.prev ~ siblings

<body>
    <div class="div1">
        <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
        <h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
        <div class="div11">
            <h1>cccccccccccccccccccccc</h1>
            <h1>dddddddddddddddddddddd</h1>
        </div>
    </div>
    <h1>eeeeeeeeeeeeeeeeeeeeeeee</h1>
    <div class="div2">
        <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
        <h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
        <div class="div21">
            <h1>cccccccccccccccccccccc</h1>
            <h1>dddddddddddddddddddddd</h1>
        </div>
    </div>
    <h1>eeeeeeeeeeeeeeeeeeeeeee</h1>
    <h1>fffffffffffffffffffffff</h1>
</body>
<script>
$('.div1 h1').css({'background':'#f00'})//div1中的所有h1
$('.div2 > h1').css({'color':'#0ff'});//div2紧跟的h1
$('.div1+h1').css({'background':'#0f0'})//紧跟div1后的h1
$('.div2~h1').css({'color':'#f00'})//div2后面所有h1
</script>

三、基本选择器

1. :first

2. :last

3. :not

4. :even

5. :odd

6. :eq

7. :gt

8. :lt

<body>
    <h1>0001</h1>
    <h1>0002</h1>
    <h1>0003</h1>
    <h1>0004</h1>
    <h1>0005</h1>
</body>
<script>
$('h1:first').css({'background':'#f00'})//第一行背景为#f00色
$('h1:last').css({'color':'#0ff'});//最后一行字体为#0ff色
$('h1:not(:first)').css({'background':'#0f0'})//除第一行外所有行背景为#0f0色
$('h1:even').css({'color':'#f00'})//偶数行字体为#f00色(注意默认排序从0开始)
$('h1:odd').css({'color':'#fff'})//奇数行字体为#fff色(注意默认排序从0开始)
$('h1:eq(2)').css({'background':'#fff'})//行数为2的背景为#fff色(注意默认排序从0开始)
$('h1:gt(2)').css({'background':'#fff'})//行数大于(greater than)2的背景为#fff色(注意默认排序从0开始)
$('h1:lt(2)').css({'background':'#fff'})//行数小于(less than)2的背景为#fff色(注意默认排序从0开始)
</script>

四、内容选择器

1. :has

2. :parent 匹配含有子元素或者文本的元素

3. :empty

<body>
    <div>
        <h1>aaaa</h1>
        <h1>bbbb</h1>
    </div>
    <div>
    </div>
    <h1>qqqq</h1>
    <h1>wwww</h1>
    <h1></h1>
</body>
<script>
$('div:has(h1)').css({'color':'#0ff'})//找到含有h1标签的div
$('h1:not(:empty)').css({'color':'#adb'});//找到不空的h1标签
$('h1:empty').html('eeee');//找到空的h1标签加内容
$('div:parent').css({'background':'#edc'})//找到没有"父亲"的div标签
</script>

五、属性选择器

1. [name] 含有name属性的标签
2. [name=user1] name属性为user1的标签
3. [name!=user1] name属性不等于user1的标签
4. [name^=user] name属性以user开头的标签
5. [name$=user] name属性以user结尾的标签
6. [name*=er] name属性含有er的标签
7. [name][age] 同时含有name和age属性的标签

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
    <script src='jquery.js'></script>
</head>
<body>
    <h1 name="abc">0001</h1>
    <h1 name='bcd'>0002</h1>
    <h1 name="cde" age="3">0003</h1>  
    <h1 name="akf">0004</h1>
    <h1 name="fff">0005</h1>
    <h1>0006</h1>   
</body>
<script>
$('h1[name]').css({'color':'#adf'}) //
$('h1[name=abc]').css({'background':'#00f'})//
$('h1[name!=bcd]').css({'color':'#acb'})//
$('h1[name^=a]').css({'color':'#756'})//
$('h1[name$=f]').css({'color':'#acd'})//
$('h1[name*=cd]').css({'color':'#00f'})//
$('h1[name][age]').css({'color':'#00f'})//
</script>

六、子元素选择器

1. nth-child
2. first-child
3. last-child
4. only-child

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
    <script src='jquery.js'></script>
</head>
<body>
    <div>
        <h1>aaaaaaaaaaaaaaaa</h1>
        <h1>bbbbbbbbbbbbbb</h1>
        <h1>cccccccccccccccccc</h1>
    </div>
    <div>
        <h1>dddddddddddddddddd</h1>
        <h1>eeeeeeeeeeeeeeeeeee</h1>
        <h1>fffffffffffffffffff</h1>
    </div>
    <div>
        <h1>ggggggggggggggggg</h1>
    </div>
</body>
<script>
$('div h1:first-child').css({'color':'#adf'}) //找到所有div的第一个h1标签
$('div h1:last-child').css({'background':'#00f'})//找到所有div的最后一个h1标签
$('div h1:nth-child(2)').css({'color':'#acb'})//找到所有div的第二个h1标签（在这里从1开始而非0）
$('div h1:only-child').css({'color':'#acb'})//找到只有唯一个h1标签的div里的h1标签
</script>
</html>

七、表单选择器

1. :input 查找所有的input元素
2. :text  匹配所有的单行文本框
3. :password  匹配所有密码框
4. :radio  匹配所有单选按钮
5. :checkbox 匹配所有复选框
6. :submit  匹配所有提交按钮，理论上只匹配 type="submit" 的input或者button
7. :reset 匹配所有重置按钮
8. :button  匹配所有按钮
9. :file 匹配所有文件域
10. :hidden  匹配所有不可见元素，或者type为hidden的元素

实例--->完整的表单验证

八、表单属性选择器

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

2. :selected 匹配所有选中的option元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
    <form action="">
        <p>爱好：</p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />打篮球
            </label>
        </p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />踢足球
            </label>
        </p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />游泳
            </label>
        </p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />唱歌
            </label>
        </p>
    </form>
    <p>
        <button id="qx">全选</button>
        <button id="qbx">全不选</button>
        <button id="fx">反选</button>
        <button id="ok">OK</button>
    </p>
    <hr />
    <div class="info">
        
    </div>
</body>
<script>
$('#qx').click(function(){
    $(':checkbox').attr({'checked':true})
});
$('#qbx').click(function(){
    $(':checkbox').attr({'checked':false})
});
$('#fx').click(function(){
    $(':checkbox').each(function(){
        this.checked=!this.checked;
    });
});
$('#ok').click(function(){
    $(':checked').parent().parent().appendTo('.info');//匹配选中的选项的父标签的父标签并扔到info这个div中
});
</script>
</html>