jQuery 6 层次选择器

有以下几个实例点：

  1.  $("div li")：获取div下所有的li元素，直接或间接的都可以。
  2.  $("div > li"):获取div下直接的li元素，即第一层的。
  3.  $(".myclass+div"):获取样式名为myclass之后的第一个div元素。
  4.  $(".myclass~div"):获取样式名为myclass之后所有的div元素。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="JScript/jquery-1.9.1.min.js" type="text/javascript"></script>
    <style type="text/css">
      .myclass{background-color:Red; font-style:italic;}
    </style>

    <script type="text/javascript">
        $(function () {
            $.each($("div li"), function () {
                $(this).html("<font color='green'>所有元素</font>");
            });

            $("div > textarea").css("background-color", "Red");

            $(".myclass+div").css("background-color", "Yellow");

            $(".myclass~div").css("background-color","Black");
        });

      
    </script>
</head>

<body>
<div class="myclass">
  <input type="text"/>
  <br />
  <input type="button" value="button" />
</div>

<div>
 
  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
  </ul>
</div>

<div>
  <textarea id="area1" rows="15">
  </textarea>
  <p>
     <textarea id="area2" rows="15">
     </textarea>
  </p>
  
</div>

</body>
</html>

 

有时我们在用jQuery时可能某个标签元素不存在，如何判断呢？

其实$(id或tag)返回的是一数组，要想知道它是否存在，只需用数组的length是否小于等于0即可。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
      .test{background-color:Red}
    </style>
    <script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
          $(".test").click(function () {alert($(this).text()); //给拥有test样式的标签注册事件
          })
      });

      $(function () {
          var ids = $("#aa");
          if (ids.length <= 0) {
              alert("没找到这个id");
              return;
          }
          alert("找到这个id了");

      });

      $(function () {
          var inputs = $("input");
          if (inputs.length <= 0) {
              alert("不存在input类型");
              return;
          };

          alert("存在这个类型");
      });
    </script>

</head>
<body id="aa">
<p class="test">test1</p>
<p class="test">test2</p>
<p class="test">test3</p>
</body>
</html>

 

 

posted on 2013-05-25 14:51  天上星  阅读(227)  评论(0)  编辑  收藏  举报

导航