jQuery笔记---选择器

Posted kwdeep

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery笔记---选择器相关的知识,希望对你有一定的参考价值。

查找API,jQuery选择器,定位标签

1.基本选择器

  • id定位标签
  • class属性定位标签
  • 标签名定位标签

2.举例

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
      <div id="div1ID">div1</div>
      <div id="div2ID">div2</div>
      <span class="myClass">span</span>
      <p>p</p>
      <script type="text/javascript">
       //1)查找ID为"div1ID"的元素个数
         $(“#divID”.size())
      //2)查找DIV元素的个数 
         $(“div”).size();
      //3)查找所有样式是"myClass"的元素的个数
          $(“.myClass”).size();
      //4)查找所有DIV,SPAN,P元素的个数 ,多个属性定位的时候,可以使用逗号隔开3
          $(“div,span,p”).zize();
      //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
          $(“#div,.class,p”)
      </script>
  </body>
</html>
多个是可以使用,将他们隔开

2.层次选择器

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    <form>
        <input type="text" value="a"/>        
        <table>
            <tr>
                <td>
                    <input type="checkbox" value="b"/>
                </td>
            </tr>            
        </table>
    </form>
    <input type="radio" value="c"/>
    <input type="radio" value="d"/>
    <input type="radio" value="e"/>
    <script type="text/javascript">
     //1)找到表单form下所有的input元素的个数
      $(“form input”).size();
      //2)找到表单form下所有的子级input元素个数
      $(“form> input”).size();
第一个和第二个是区别:第一个是所有的input标签。第二个是form的子一代,子二代不包括在内。
//3)找到表单form同级第一个input元素的value属性值 $(“form+input ”).val(); //4)找到所有与表单form同级的input元素个数
alert( $("form ~ input").size() )
</script>
  </body>
</html>

总结:form标签下的标签

          $("form input").size();

         form标签下子一代的标签

    $("form > input").size()

        form标签的同一级的第一个标签

        $("form +input")

        form标签同一级的标签

   $("form ~ input")

3.增强基本选择器

格式:$("ul li :XX").text();

$(":header"),css("XX","XX").css("XX","XX")……当有很多的css样式的时候,可以使用一直,的方式向下添加。

//1)查找UL中第一个元素的内容
alert( $("ul li:first").text() );
//2)查找UL中最后个元素的内容
alert( $("ul li:last").text() );
//4)查找表格的索引号为1、3、5...奇数行个数,索引号从0开始
alert( $("table tr:odd").size() );
//5)查找表格的索引号为2、4、6...偶数行个数,索引号从0开始
alert( $("table tr:even").size() );
//6)查找表格中第二行的内容,从索引号0开始,这是一种祖先 后代 的变化形式
alert( $("table tr td:eq(1)").text() );
//7)查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
alert( $("table tr:gt(0)").size() );
//8)查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
alert( $("table tr:lt(2)").size() );
//9)给页面内所有标题<h1><h2><h3>加上红色背景色,且文字加蓝色
$(":header").css("background-color","red").css("color","blue");
//3)查找所有未选中的input为checkbox的元素个数
alert( $(":checkbox:NOT(:checked)").size() );

5.内容选择器

//1)查找所有包含文本"John"的div元素的个数
 alert( $("div:contains(‘John‘)").size() );
//2)查找所有p元素为空的元素个数
 alert( $("p:empty").size() );
//3)给所有包含p元素的div元素添加一个myClass样式
 $("div:has(p)").addClass("myClass");
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
 alert( $("p:parent").size() );

7.使用jQuery的作用是,可以方便的操作web页面的标签和样式参数。

  • val():获取标签的value属性值【假定有value属性】
  • html():获取标签之间的内容,不用于xml文件。
  • text():获取标签之间的内容,用于任何格式的参数(推荐)
  • css():使用key-value的方式,给标签添加样式。
  • addClass():加已经定义好的样式。
  • size()获取到属性的个数。
  • length:获取对象和数组中的对象个数。

 

以上是关于jQuery笔记---选择器的主要内容,如果未能解决你的问题,请参考以下文章

jquery中的$的特殊用法

二次学习JQuery 选择器&选择集过滤&转移

jQuery:自学笔记——jQuery选择器

锋利的jQuery学习笔记之jQuery选择器

jQuery笔记jQuery选择器

jQuery学习笔记之选择器