jquery常用的选择器 ID选择器类选择器标签选择器层级关系-CFANZ编程社区

jquery常用的选择器 ID选择器类选择器标签选择器层级关系

文章主题

jquery常用的选择器 ID选择器类选择器标签选择器层级关系

文章正文

jquery下载地址：下载地址废话不多，代码说话

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery.min.js""></script>
    <script src="js/index.js"></script>
  </head>
  <body>
    <div id="d1">id选择器</div>
    <div class="div_cls1">class选择器1</div>
    <div class="div_cls1">class选择器2</div>
    <div class="div_cls1">class选择器3</div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <input type="checkbox" checked="checked"/>吃饭
    <input type="checkbox" />睡觉
    <input type="checkbox" />打豆豆
    
  </body>
</html>

//文档加载完毕以后
$(document).ready(function(){
  //id选择器
  alert($("#d1").html()); //document.getElementById.innerHTML
  //类别选择器
  $arr = $(".div_cls1");
  alert($arr.eq(0).html());
  
  //标签选择器
  $arr = $("div");
  
  //层级关系
  alert($("ul li:first").html());
  alert($("ul li:last").html());
  alert($("ul li:eq(2)").html());
  
  $("ul li:even").css("background-color","pink");//下标为偶数
  $("ul li:odd").css("background-color","greenyellow");//下标为奇数
  $("ul li:gt(2)").css("color","red");
  $("ul li:lt(2)").css("color","skyblue");
  alert($("input:not(:checked)").length);//找到所有没有被选中的选择框
  
})