jQuery入门（二）jQuery选择器

    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>

二、总结

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

基本选择器
- $("元素的名称");
- $("#id的属性值");
- $(".class的属性值");
层级选择器
- $("A B");
- $("A > B");
属性选择器
- $("A[属性名]");
- $("A[属性名=属性值]");
过滤器选择器
- $("A:even");
- $("A:odd");
表单属性选择器
- $("A:disabled");
- $("A:checked");
- $("A:selected");

标签： jquery 前端 javascript

本文转载自: https://blog.csdn.net/kong7906928/article/details/140757096
版权归原作者 kong7906928 所有，如有侵权，请联系我们删除。

jQuery入门（二）jQuery选择器

（一）基本选择器

（二）层级选择器

（三）属性选择器

（四）过滤器选择器

（五）表单属性选择器

二、总结

发表评论

“jQuery入门（二）jQuery选择器”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航