Jquery 簡明介紹

標籤：

一、尋找元素1、選取器

    1.1 基本選取器      $("*")  $("#id")  $(".class")  $("element")  $(".class,p,div")

    1.2層級選取器       $(".outer div")(所有的後代)  $(".outer>div")(所有的子代)   $(".outer+div")(匹配所有跟在.outer後面的div)  

　　　　　　　　　　  $(".outer~div")(.outer後面的所有div)

    1.3 基本篩選器      $("li:first")  $("li:eq(2)")  $("li:even")(偶數)  $("li:gt(1)")

    1.4 屬性選取器      $(‘[id="div1"]‘)   $(‘["alex="sb"][id]‘)

    1.5 表單選取器      $("[type=‘text‘]") 簡寫成 $(":text")                    注意只適用於input標籤

2 篩選器

     2.1  過濾篩選器

                                $("li").eq(2)  $("li").first()  $("ul li").hasclass("test") (檢測li中的是否含有某個特定的類，有的話返回true)

     2.2  尋找篩選器

                                $("div").children(".test")(只考慮子項目，而不考慮所有的後代)    $("div").find(".test")  (考慮所有的後代)

                                $(".test").next()    $(".test").nextAll()   $(".test").nextUntil() (開區間)

                                $("div").prev()  $("div").prevAll()  $("div").prevUntil()

                                $(".test").parent()  $(".test").parents()(祖先元素集合)  $(".test").parentUntil() 

                                $("div").siblings() (同輩元素不包括自己)

二、操作元素1 屬性操作

      $("p").text()   $("p").html()   $(":checkbox").val()

      $(".test").attr("alex")   $(".test").attr("alex","sb") 

      $(".test").attr("checked","checked")  $(":checkbox").removeAttr("checked")

      $(".test").prop("checked",true)

      $(".test").addClass("hide")

2 CSS操作

       (樣式)   css("{color:‘red‘,backgroud:‘blue‘}") 

       (位置)   offset()    position()  scrollTop()  scrollLeft()    

       (尺寸)  innerHeight()不包含邊框， outerHeight()包含邊框， 兩個都包含padding height()不包含邊框

 

3 文檔處理

      內部插入  $("#c1").append("<b>hello</b>")     $("p").appendTo("div")

                   prepend()    prependTo()

      外部插入  before()  insertBefore()  after()  insertAfter()

                     replaceWith()   remove()  empty()  clone()

4 事件

      4.1

               $(document).ready(function(){}) -----------> $(function(){})  最好都加上這一句(所有文檔執行完，但是圖片沒載入)

      4.2

               $("p").click(function(){})

               $("p").bind("click",function(){})                    

               $("ul").delegate("li","click",function(){})　　// 事件委託，這裡需要重點注意下

來自為知筆記(Wiz)

Jquery 簡明介紹