jQuery入门（二）jQuery选择器

kong7906928

已于 2024-07-28 23:05:06 修改

阅读量844

点赞数 21

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

于 2024-07-28 23:04:06 首次发布

本文链接：https://blog.csdn.net/kong7906928/article/details/140757096

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JQuery选择器

选择器：类似于 CSS 的选择器，可以帮助我们获取元素。例如：id 选择器、类选择器、元素选择器、属性选择器等等。 jQuery 中选择器的语法：$();

一、jQuery的选择器

（一）基本选择器

1.元素选择器语法： $("元素的名称") 作用：根据元素名称获取元素对象们。
let divs = $("div");

2.id选择器语法： $("#id的属性值") 作用：根据ID属性值获取元素对象。
let div1 = $("#div1");

3.类选择器语法： $(".class的属性值") 作用：根据class属性值获取对象们。
let cls = $(".cls");

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="js/jquery-3.3.1.min.js"></script>
<script>
    //1.元素选择器   $("元素的名称")
    let divs = $("div");
    //alert(divs.length);

    //2.id选择器    $("#id的属性值")
    let div1 = $("#div1");
    alert(div1);

    //3.类选择器     $(".class的属性值")
    let cls = $(".cls");
    //alert(cls.length);

</script>
</html>

（二）层级选择器

1. 后代选择器 $("A B"); A下的所有B(包括B的子级)。
let spans1 = $("div span");

2. 子选择器 $("A > B"); A下的所有B(不包括B的子级)。
let spans2 = $("div > span");

3. 兄弟选择器 $("A + B"); A相邻的下一个B。
let ps1 = $("div + p");

4. 兄弟选择器 $("A ~ B"); A相邻的所有B。
let ps2 = $("div ~ p");

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层级选择器</title>
</head>
<body>
    <div>
        <span>sp1
            <span>sp1-1</span>
            <span>sp1-2</span>
        </span>
        <span>sp2</span>
    </div>

    <div>div2</div>
    <p>p1</p>
    <p>p2</p>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)
    let spans1 = $("div span");
     // alert("后代选择器 个数:"+spans1.length);// 4个

    // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)
    let spans2 = $("div > span");
//  alert("子选择器 个数:"+spans2.length); //2个

    // 3. 兄弟选择器 $("A + B");    A相邻的下一个B
    let ps1 = $("div + p");
//    alert("兄弟选择器 个数:"+ps1.length);//1个
//    alert(ps1.html());

    // 4. 兄弟选择器 $("A ~ B");    A相邻的所有B
    let ps2 = $("div ~ p");
      alert("兄弟选择器 个数:"+ps2.length); //2个
    
</script>
</html>

（三）属性选择器

1.属性名选择器语法: $("元素[属性名]"); 作用:根据指定名称获取元素对象们。
let in1 = $("input[type]");

2.属性值选择器,语法 $("元素[属性名=属性值]") ;作用:根据制定属性名和属性值获取元素对象们。
let in2 = $("input[type='password']");

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
</head>
<body>
    <input type="text"  value="text1">
    <input type="password"   value="pwd1">
    <input type="password"  value="pwd2">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.属性名选择器   $("元素[属性名]")
    let in1 = $("input[type]");
    alert(in1.length);


    //2.属性值选择器   $("元素[属性名=属性值]")
    let in2 = $("input[type='password']");
    alert(in2.length);

</script>
</html>

（四）过滤器选择器

1.首元素选择器语法: $("A:first"); 作用 : 获得选择的元素中的第一个元素。
let div1 = $("div:first");

2.尾元素选择器语法: $("A:last");作用 : 获得选择的元素中的最后一个元素。
let div4 = $("div:last");

3.非元素选择器语法: $("A:not(B)");作用 : 不包括指定内容的元素。
let divs1 = $("div:not(#div2)");

4.偶数选择器语法: $("A:even");作用:偶数 , 从0开始计数。
let divs2 = $("div:even");

5.奇数选择器语法: $("A:odd");作用: 奇数 , 从0开始计数。
let divs3 = $("div:odd");

6.等于索引选择器语法: $("A:eq(index)");作用 : 指定索引元素。
let div3 = $("div:eq(2)");

7.大于索引选择器语法: $("A:gt(index)");作用 : 大于指定索引元素。
let divs4 = $("div:gt(1)");

// 8.小于索引选择器语法: $("A:lt(index)");作用 : 小于指定索引元素。
let divs5 = $("div:lt(2)");

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.首元素选择器	$("A:first");
    let div1 = $("div:first");
  alert(div1.html());

    // 2.尾元素选择器	$("A:last");
    let div4 = $("div:last");
    //alert(div4.html());

    // 3.非元素选择器	$("A:not(B)");
    let divs1 = $("div:not(#div2)");
//  alert(divs1.length);

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

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

    // 6.等于索引选择器	 $("A:eq(index)");
    let div3 = $("div:eq(2)");
  //  alert(div3.html());//div3

    // 7.大于索引选择器	 $("A:gt(index)");
    let divs4 = $("div:gt(1)");
//    alert(divs4.length);
//    alert(divs4[0].innerHTML);//div3
//    alert(divs4[1].innerHTML);//div4

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

（五）表单属性选择器

1.可用元素选择器语法： $("A:enabled"); 作用：获得可用元素
let ins1 = $("input:enabled");

2.不可用元素选择器语法： $("A:disabled"); 作用：获得不可用元素
let ins2 = $("input:disabled");

3.单选/复选框被选中的元素语法： $("A:checked"); 作用：获得单选复选框选中的元素
let ins3 = $("input:checked");

4.下拉框被选中的元素语法： $("A:selected"); 作用：获得下拉框选中的元素
let select = $("select option:selected");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单属性选择器</title>
</head>
<body>
    <input type="text" disabled><br />
    <input type="text" ><br />
    <input type="radio" name="gender"  value="men" checked>男
    <input type="radio" name="gender" value="women"  >女<br />
    <input type="checkbox" name="hobby" value="study" checked>学习
    <input type="checkbox" name="hobby" value="work" checked>工作
    <br />
    <select>
        <option>---请选择---</option>
        <option  selected>本科</option>  <!---->
        <option>专科</option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.可用元素选择器  $("A:enabled");
    let ins1 = $("input:enabled");
    alert(ins1.length);//5

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

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

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