jQuery选择器

最新推荐文章于 2024-10-07 09:24:46 发布

程序员小成在线买房

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量114

点赞数

分类专栏：笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_40432598/article/details/126026389

版权

笔记专栏收录该内容

118 篇文章 0 订阅

订阅专栏

基本选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>

</head>

<body>
    <div id="div1">div1</div>
    <div class="cls">div2</div>
    <div class="cls">div3</div>
</body>

<script src="jquery-3.3.1.min.js"></script>
<script>
    /// 元素选择器
    let divs = $("div");
    alert(divs.length); /// 3
    /// id选择器
    let div1 =  $("#div1");
    alert(div1);
    /// 类选择器
    let class1 = $(".cls");
    alert(class1.length);//2
</script>

</html>

层级选择器
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层级选择器</title>

</head>

<body>
    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>
    <div></div>
    <p>p1</p>
    <p>p2</p>
</body>

<script src="jquery-3.3.1.min.js"></script>
<script>
    /// 后代选择器
    let spans1 = $("div span");///div下所有的span
    //alert(spans1.length); ///4
    /// 子选择器 A下所有的B 不包括B的子集
    let spans2 = $("div > span");
    alert(spans2.length); ///2

    /// 兄弟选择器 +
    let ps1 = $("div + p"); /// 或许div相邻的p标签
    alert(ps1.length);//1

    let ps2 = $("div ~ p");
    alert(ps2.length);//2
</script>

</html>

属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>

</head>

<body>
    <input type="text">
    <input type="password">
    <input type="password">
</body>

<script src="jquery-3.3.1.min.js"></script>
<script>
    /// 属性名选择器
    let input1 = $("input[type]");//3
    alert(input1.length);

    /// 属性值选择器
    let input2 = $("input[type = 'password']");
    alert(input2.length);///2
</script>

</html>

过滤器选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器选择器</title>

</head>

<body>
    <div>div1</div>
    <div id="div2">div2</div>
    <div>div3</div>
    <div>div4</div>
</body>

<script src="jquery-3.3.1.min.js"></script>
<script>
    // /// 首元素选择器
    // let div1 = $("div:first");
    // alert(div1.html());
    // /// 尾元素选择器
    // let div4 = $("div:last");
    // alert(div4.html());

    // // 非元素选择器
    // let divs1 = $("div:not(#div2)"); /// 不包括id div2
    // alert(divs1.length);

    // ///偶数选择器
    // let divs2 = $("div:even");
    // alert(divs2.length);
    // alert(divs2[0].innerHTML);
    // alert(divs2[1].innerHTML); ///div1 div3

    /// 奇数选择器
    // let divs3 = $("div:odd");
    // alert(divs3.length);
    // alert(divs3[0].innerHTML); /// div2
    // alert(divs3[1].innerHTML); ///div4

    /// 等于元素选择器
    // let div3 = $("div:eq(2)");
    // alert(div3.html());

    // /// 大于元素索引选择器
    // let divs4 = $("div:gt(1)");
    // alert(divs4.length);
    // alert(divs4[0].innerHTML);
    // alert(divs4[1].innerHTML);

    ///小于索引选择器
    let divs5 = $("div:lt(2)");
    alert(divs5.length);
    alert(divs5[0].innerHTML);
    alert(divs5[1].innerHTML);
</script>

</html>

表单属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单属性选择器</title>

</head>

<body>
    <input type="text" disabled>
    <input type="text">
    <input type="radio" name="gender" value="men" checked>男
    <input type="radio" name="gender" value="women">女
    <input type="checkbox" name="hobby" value="study" checked>学习
    <input type="checkbox" name="hobby" value="sleep" checked>睡觉
    <select>
        <option>请选择</option>
        <option selected>本科</option>
        <option>专科</option>
    </select>
</body>

<script src="jquery-3.3.1.min.js"></script>
<script>
    /// 可用元素选择器
    let ins1 = $("input:enabled");
    alert(ins1.length);///5

    /// 不可用元素
    let ins2 = $("input:disabled");
    alert(ins2.length);/// 1

    /// 单选/复选框被选中的元素
    // let ins3 = $("input:checked");
    // alert(ins3.length); ///3 
    // alert(ins3[0].value);
    // alert(ins3[1].value);
    // alert(ins3[2].value);

    /// 下拉被选中的元素
    let ins4 = $("select option:selected");
    alert(ins4.html());
</script>

</html>