JQuery(一)

1、jquery是一个轻量级的java script框架,具备独特的选择器、链式操作、事件处理机制和封装完善的Ajax

2、特殊符号:$

      指代封装,定义jquery使用的jquery选择器(selector)查询html标记(元素)

      $(document).ready(function(){});    =»    $(function(){})

3、选择器:jquery是完全继承css风格,利用jquery selector可以非常快速便捷的找到dom元素

      jquery selector 与 css selector 方式基本一致,只是作用不同

  (1)基本选择器:

          # :   id   根据给定id匹配一个元素,返回单个元素

          .  :   class  根据给定类名匹配元素,返回集合元素

          $("div")  :   element  根据给定元素名匹配元素,返回集合元素

          $("*")    :    *    匹配所有元素,返回集合元素

          $("div,div,p")   :  selector   将第一个选择器匹配到元素合并在一起返回,返回集合元素

  (2)层次选择器:根据描述的层次结构来选择层次结构所有的后代元素,返回集合元素

          例:<div class="one" id="one">

              <div class="two" id="two">

                <p><br></p>

               </div>

           </div>

          注:

            $("div  p")  :   "   "(空格)   返回p

            $("div > p") :   ">"     选取父节点下面的所有子节点,返回集合元素

            $(".one +div") :  ".  +  "   选取为首元素的下一个元素

            $("#two~div")  :   "#   ~"选取首元素后的所有同辈(siblings)元素,返回集合元素

  (3)过滤选择器: 

        :first      选取第一个元素,返回单个元素         $("div:first")

        :last       选取最后一个元素,返回单个元素         $("div:last")

        :not(selector)     选取去除所有给定选择器匹配的元素,返回集合元素    $("input:not(.one)")

        :even     选取索引为偶数(0,2,4...)的所有元素,返回下标为索引(0,2,4...)从0开始,返回集合元素   $("input:even")

        :odd       选取索引为奇数(1,3,5...)的所有元素,返回下标为索引(1,3,5...)从0开始,返回集合元素   $("input:odd")

        :eq(index)      选取索引等于index的所有元素,索引从0开始,返回单个元素     $("input:eq(1)")

        :lt(index)      选取索引小于index的所有元素,索引从0开始,返回集合元素       $("input:lt(1)")

        :gt(index)      选取索引大于index的所有元素,索引从0开始,返回集合元素       $("input:gt(1)")

        :header        选取所有标题元素,返回集合元素       $("input:header")

        :animated     选取当前正在执行动画的所有元素,返回集合元素       $("input:animated")

   (4)内容过滤选择器:

        :contains()   选择包含文本内容的text 元素,返回集合元素       $("div:contains("我")")

        :empty        选择不包含子元素或文本为空的所有空元素,返回集合元素       $("div:empty")

        :has(selector)  选取含有选择器所匹配的元素      $("div:has(".one")")

        :parent    选取含有子元素或文本的元素      $("div:parent")

   (5)可见性过滤选择器:

        :hidden    选取所有不可见元素,返回集合元素      <input   type="hidden" />

        :visible    选取所有可见元素,返回集合元素      <div style="display:none; visibility:hidden"></div>

   (6)属性过滤选择器:

         attribute:选取拥有此属性的元素,返回集合元素       $("div[id]")  

           格式         示例                             意义
[attribute=value] div[title=test] 选取属性值为指定value的元素,返回集合元素
[attribute!=value] div[title!=test] 选取属性值不为指定value的元素,返回集合元素
[attribute^=value] div[title^=test] 选取属性值以指定值为起始的元素,返回集合元素
[attribute$=value] div[title$=test] 选取属性值以指定值为结束的元素,返回集合元素
[attribute*=value] div[title*=test] 选取属性值包含value的所有元素,返回集合元素

    (7)复合选择器:使用属性选择器合并成一个复合选择器,满足多个条件,每选择一次缩小一次范围,返回集合元素

            $("div[id][title$=test]")

      (8)子元素过滤选择器:

                          格式或示例                               意义
$("div:nth-child(1)") 选取属性值为指定value的元素,返回集合元素
$("div:nth-child:odd") $("div:nth-child(odd)") 选取属性值不为指定value的元素,返回集合元素
                    $("div:first-child") 选取属性值以指定值为起始的元素,返回集合元素
                    $("div:last-child") 选取属性值以指定值为结束的元素,返回集合元素
                    $("div:only-child") 选取属性值包含value的所有元素,返回集合元素

        

 

 

 

 

 

 

          

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。