jQuery之选择器

选择器

选择器本身只是一个特定的语法规则的字符串，没有实质用处，它的基本语法规则使用的就是css的选择器语法，并对基进行了拓展。只有调用\(，并将选择器作为参数传入才能起作用。 \)(selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装为jQuery

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本选择器</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script type="text/javascript">
  $(function (){
      //选择id为div1的元素
      console.log($("#div1").html());  //id选择器
      $("#div1").css("background","red");
      //选择所有的div元素
      $("div").css("background","yellow"); //标签选择器
      // 选择所有class属性为box的元素
      $(".box").css("background",'blue');
      //选择所有的div和span的元素
      $("div,span").css("background","black");
      //选择所有class属性为box的div元素
      $("div.box").css("background","pink");

      //选择所有的
      $("*").css("background","red");
  })
</script>
<body>

<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3" >div3</div>
<span class="box" >span(class="box")</span>

<br/>

<ul>
  <li>AAAAAAAA</li>
  <li title="hello">BBBBB(title="hello")</li>
  <li class="box">CCCCCC(class="box")</li>
  <li title="hello">DDDDDDD(title="hello")</li>
</ul>
</body>
</html>

层次选择器

层次选择器用来查询子孙后代

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>层次选择器</title>
  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

  <script type="text/javascript">

    // 层次选择器：查找子元素，后代元素，兄弟元素的选择器
  //ancestor descendant
  //  在给定的祖先元素下匹配所有的后代元素
    //paren》child
    //在给定的父元素下匹配所有的字元素
    //prev+next
    //匹配所有紧接在pre元素后的next元素
    //prev～siblings
    //匹配pre元素之后的所有siblings元素

    $(function (){
        //1。选中ul下的所有的span
        // $('ul span').css("background","yellow");
        //2.选中ul下所有的子元素span
        // $("ul>span").css("background","red");
        //选中class为box的下一个li
        // $(".box+li").css("background","blue");
        //选中ul下的class为box的元素后面的所有兄弟元素
        $("ul .box~*").css("background","pink");
    })

  </script>
</head>
<body>
<ul>
  <li>AAAAAAAA</li>
  <li class="box">BBBBB(title="hello")</li>
  <li class="hello"><span>CCCCCC(class="box")</span></li>
  <li class="hello"><span class="hello">DDDDDDD(title="hello")</span></li>
  <span>EEEEEEE</span>
</ul>
</body>
</html>

过滤选择器

在原油选择器匹配的元素中进一步进行过滤的选择器，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤选择器</title>
  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
      $(function (){
          // 选中第一个div
          $('div:first').css("background","red");
          // 选择最后一个class为box的元素
          $('.box:last').css("background","red");
          // 选择所有class属性不为box的div
          $('div:not(.class)').css("background","red");
          //选择第二个和第三个li
          $('li:gt(0):lt(2)').css("background","red");
          $('li:lt(3):gt(0)').css("background","red");
          //选择内容为BBBB的li
          $('li:contains("BBBBBB")').css("background","pink");
          //选择隐藏的li
          console.log($('li:hidden').html());
          //选择有title属性的li标签
          $('li[title]').css("background","pink");
          //选择素有属性title为hello的li元素
          $('li[title=hello]').css("background","pink");


      })

  </script>
</head>
<body>


<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3" >div3</div>
<span class="box" >class为box的span</span>

<br/>

<ul>
  <li>AAAAAAAA</li>
  <li title="two">BBBBB(title="hello")</li>
  <li class="box">CCCCCC(class="box")</li>
  <li title="hello">DDDDDDD(title="hello")</li>
  <li title="two">BBBBBB(title="hello")</li>
  <li style="display: none">我本来是要隐藏的</li>
</ul>
</body>
</html>

表单选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单选择器</title>
  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
      $(function () {

          //选择不可用的文本输入框
          $(":text:disabled").css("background", "red");
          //显示爱好所择的个数
          console.log($(":checkbox:checked").length);
          //显示选择的城市名称
          $(":submit").click(function (){
              var html = $("select>option:selected").html();
              console.log(html);
              console.log($("select").val())
          });
      })
  </script>
</head>
<body>
用户名：<input type="text"><br/>
密码：<input type="password"><br/>
爱好：
<input type="checkbox" checked="checked">篮球
<input type="checkbox" checked="checked">足球
<input type="checkbox" checked="checked">羽毛球
<br/>
性别：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
邮箱：<input type="text" name="email" disabled="disabled"> <br/>
所在地：
<select>
  <option value="1">北京</option>
  <option value="2" selected="selected">天津</option>
  <option value="3">河北</option>
</select>
<input type="submit" value="提交"/>
<br/>

</body>
</html>
posted @ 2023-03-17 01:42  King-DA  阅读(15)  评论(0)    收藏  举报