jquery选择器

2024-03-22 14:57:58
<!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>Document</title>
  <script crossorigin="anonymous" integrity="sha384-fJU6sGmyn07b+uD1nMk7/iSb4yvaowcueiQhfVgQuD98rfva8mcr1eSvjchfpMrH" src="https://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
  <style>
    ul{
      margin:0px;
      padding:0px;
      width:500px;
      list-style-type: none;
    }
    li{
      padding:20px;
      margin-top:10px;
      border:1px solid #ccc;
    }
  </style>
</head>
<body>
  <ul id="list1">
    <li>red</li>
    <li class="red">red</li>
    <li>red</li>
    <li name="yuan2">red</li>
    <li name="yuan">red</li>
  </ul>
  <ul id="list2">
    <li name = "css-1">red</li>
    <li>red</li>
    <li class="red">red</li>
    <li>red</li>
    <li>red</li>
  </ul>
  <!-- p标签不能嵌套p标签（会融合为一体） 也不能嵌套div标签 -->
  <p class="red">
    <p>dada'd</p>
  </p>
  <div id="a">
    <p>da</p>
  </div>
  <script>
    // id选择器
    $("#list1").css("backgroundColor","red")
    // $("#list1")选择出来的是一个数组，虽然他是id选择器，是指返回数组中只有一个元素
    console.log($("#list1"));
    // class选择器
    $(".red").css("backgroundColor","gray")
    // $(".red")选择出来的是一个数组，class选择器，返回数组中可能有多个元素
    console.log($(".red"));
    // 标片选择器
    $("p").css("backgroundColor","blue");
    // 通配符选择器
    $("*").css("backgroundColor","green")
    // 分组选择器
    $("p,li").css("backgroundColor","yellow")
    // 父子选择器（包括孙子）
    $("#list1 li").css("backgroundColor", "red")
    // 下一兄弟选择器
    $("#list1 .red + li").css("backgroundColor","blue");
    // 后续所有兄弟选择器
    $("#list1 .red ~ li").css("backgroundColor","green");
    // 属性选择器
    $("[name]").css("backgroundColor","black");
    // 并列选择器
    $("li[name]").css("backgroundColor","yellow");
    // 属性选择器，相反 出了一个属性值name等于yuan不用变，其他都变
    $("[name != 'yuan']").css("backgroundColor","green");
    // 属性选择器 选择以某一个为前缀的属性值代表的标签
    $("[name |= 'css']").css({backgroundColor:"red",}) //css-3
    // 属性选择器 选择以某一个为开头的属性值代表的标签
    $("[name ^= 'css']").css({backgroundColor:"red",})  //css3
    // 属性选择器 选择以某一个为结束的属性值代表的标签
    $("[name $= 'css']").css({backgroundColor:"red",})  //3css
    // 属性选择器 选择以包含某一个字符串的属性值代表的标签
    $("[name *= 'css']").css({backgroundColor:"red",})  //3css3 
    // 属性选择器 选择以包含某一个单词的属性值代表的标签
    $("[name ~= 'css']").css({backgroundColor:"red",})  //3 css 3  单词之前用空格隔开
    // 多个属性选择器
    $("[name = 'css'][it = 'red']").css({backgroundColor:"red",})
    // #red li:eq(*)在id为red下的li标签中选择第几个*li

    // 都是选择中#list1|#list2下的第一个li，不同点
    $("#list1 li:first-child").css("backgroundColor","blue"); //要求#list1下面第一个子元素必须是li标签
    $("#list2 li:first-of-type").css("backgroundColor","blue"); //不要求#list1下面第一个子元素必须是li标签
    
    // 选中#a|.red中只有一个子标签的，给其子元素添加样式
    $("#a p:only-child").css({backgroundColor:"red",})
    $(".red p:only-child").css({backgroundColor:"red",})

    // 内容选择器
    $("#a p:contains(da)").css("color","blue"); //选中内容为da

    // wrap方法在某一个***添加一个***作为父级
    // 注意链式操作,操作的对象不会变成其他人
    // parent方法修改链式操作目标为其的上一级
    </script> 
</body>
</html>
码农公寓

相关文章
