Jquery學習筆記(一)

Loserfromlazy發表於2018-08-18

  一.Jquery的基本功能

  1. 訪問操作DOM
  2. 控制CSS
  3. 對頁面事件進行處理
  4. 大量外掛

  二.Jquery選擇器

  主要分為四種,分別是基本選擇器,層次選擇器,過濾選擇器,和表單選擇器,其中當屬基本選擇器用途最廣泛。

  1.基本選擇器

    類似於getElemenById(“”)<=>$(“”)

    常用的有$(“*”),$(“#id”),$(“.class”),$(“p”),$(.class1 .class2).

  2.層次選擇器

    $(“ancestor descendant”)後代選擇器:選擇給定祖先ancestor元素的所有後代元素,包括子元素,孫子元素等全部後代元素

    $(“parent > child”)子選擇器:選擇所有指定”parent”元素中指定的”child”的直接子元素//注意是直接子元素

    $(“prev + next”)相鄰兄弟選擇器:選擇所有緊接在prev元素後的next元素//eg:$(“#div1+div”)選擇id為div1的下一個div

    $(“prev ~ siblings”)一般兄弟選擇器:匹配“prev”元素之後的所有兄弟元素。具有相同的父元素,並匹配過濾出“siblings”選擇器。//eg:$(“#div1~div”) 選擇id為div1後的所有div

    $(“prev” ).siblings(“div”)//eg:$(“#div1”).siblings(“div”) 選擇id為div1後的所有相鄰div 注意與上面進行區分

  3.過濾選擇器

    (1).簡單過濾選擇器

        first()或者:first 獲取第一個元素
        last()或者:last 獲取最後一個元素
        :not(selector)獲取除開給定選擇器的其他元素
        :even獲取索引為偶數的元素,索引從0開始
        :odd獲取索引為奇數的元素,索引從0開始
        :eq(index)獲取制定索引元素,從0開始
        :gt(index)獲取大於給定索引的元素,從0開始
        :lt(index)獲取小於給定索引的元素,從0開始

    (2).內容過濾選擇器 

        :contains(text) 獲取包含給定文字的元素

        :empty 獲取所有不包含子元素或文字的空元素

        :has(selector)獲取所有選擇器所匹配的元素的元素

        :parent 獲取含有子元素或文字的元素

    (3).可見性過濾選擇器

        :hidden獲取所有不可見元素或type為hidden的元素

        :visible獲取所有可見元素

    (4).屬性過濾選擇器

        [attribute=|!=|^=|$=|*=value]給定屬性等於,不等於,以某些值開始,以某些值結尾,包含某些值eg:$(“div[title=`A`]”)

    (5).子元素過濾選擇器

        :first-child/:last-child獲取每個父元素下第一個或最後一個元素

        :only-child獲取父元素下僅有一個子元素

        :nth-child(eq|even|odd|index)獲取特定元素索引號為1

    (6).表單物件屬性選擇器

        :enabled/:disable表單中屬性可用/不可用

        :checked/:selected獲取表單中所有被選中/被選中option的元素

    4.表單選擇器

        :input所有input

        :text所有文字域

         

相關文章