jQuery基礎

jQuery

• jQuery基本流程圖https://www.processon.com/mindmap/5bca9b19e4b0fe81b666b9ac

• 特色

  • jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫
  • jQuery是用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行ajax交互，可以極大的簡化JavaScript編程，
  • 使用jQuery的緣由：簡單，開發效率高，不用瀏覽器的差別化

• 使用方法

  • 下載：https://jquery.com/
  • 導入
    • 經過網址下載以後script導入本地文件路勁就能夠了
    • 經過使用bootcdn來使用jquery
  • 按照jQuery的語法使用就能夠了
    • 注意：必須先導入再使用

• jQuery內容

  • jQuery對象和普通DOM對象的區別

    • jQuery選擇器找到的是jquery對象
    • 原生的DOM找到的就是DOM對象
    • 互相轉換
      • jQuery對象[0]------>DOM對象
      • $(DOM對象)------->jquery對象

  • 查找標籤

    • 基本選擇器

      • id選擇器

      • $("#id")
        $("tagName")
        $(".className")
        $("div.c1")  // 找到有c1 class類的div標籤
        //全部元素選擇器
        $("*")
        //組合選擇器
        $("#id, .className, tagName")

    • 層級選擇器

      • $("x y");// x的全部後代y（子子孫孫）
        $("x > y");// x的全部兒子y（兒子）
        $("x + y")// 找到全部緊挨在x後面的y
        $("x ~ y")// x以後全部的兄弟y

    • 屬性選擇器

      • [attribute]
        [attribute=value]// 屬性等於
        [attribute!=value]// 屬性不等於

    • 基本篩選器

      • :first // 第一個
        :last // 最後一個
        :eq(index)// 索引等於index的那個元素
        :even // 匹配全部索引值爲偶數的元素，從 0 開始計數
        :odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
        :gt(index)// 匹配全部大於給定索引值的元素
        :lt(index)// 匹配全部小於給定索引值的元素
        :not(元素選擇器)// 移除全部知足not條件的標籤
        :has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

    • 表單篩選器 type屬性值

      • :text    //文字
        :password//密文
        :file//文件
        :radio//圓
        :checkbox
        
        :submit//提交按鈕
        :reset//重啓
        :button//按鈕

    • 篩選器方法

      1. 往下找

         1. .next()同級下一個

         2. .nextAll()同級如下全部

         3. .nextUntil同級如下指定到哪

         4. $("#id").next()
            $("#id").nextAll()
            $("#id").nextUntil("#i2")

      2. 往上找

         1. $("#id").prev()//id爲id的同級上一個元素
            $("#id").prevAll()//往上同級全部
            $("#id").prevUntil("#i2")//往上指定到哪

      3. 找父級標籤

         1. $("#id").parent()
            $("#id").parents()  // 查找當前元素的全部的父輩元素
            $("#id").parentsUntil() // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止。

      4. 兒子和兄弟元素

         1. $("#id").children();// 兒子們
            $("#id").siblings();// 兄弟們

      5. 補充

         1. 指定查找

            1. $("div").find("p")//從div標籤的後代找到p標籤
               //篩選
               $("div").filter(".c1")//找到div且是c1的標籤

         2. .first() // 獲取匹配的第一個元素
            .last() // 獲取匹配的最後一個元素
            .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
            .has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
            .eq() // 索引值等於指定值的元素

• 操做標籤

  • 操做class

    • addClass();// 添加指定的CSS類名。
      removeClass();// 移除指定的CSS類名。
      hasClass();// 判斷樣式存不存在
      toggleClass();// 切換CSS類名，若是有就移除，若是沒有就添加。

  • 操做css樣式

    • .css("background-color") 查找背景顏色

    • .css("backgound-color","red") 更換背景顏色

    • .css({height:"300px",width:"200px"}) 更換多個css樣式

    • $("p").css("color", "red"); //將全部p標籤的字體設置爲紅色

  • 位置操做

    • offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置
      position()// 獲取匹配元素相對父元素的偏移
      scrollTop()// 獲取匹配元素相對滾動條頂部的偏移
      scrollLeft()// 獲取匹配元素相對滾動條左側的偏移

  • 大小(尺寸)操做

    • 從內到外 內容（content）>內填充（padding)>邊框（border）>外邊距（margin）
    • height/width 內容的高/寬
    • innerHeight/innerWidth 內容+內填充
    • outerHeight/outerWidth 內容+內填充+邊框

  • 文本操做

    • 文本值

      • html()// 取得第一個匹配元素的html內容
        html(val)// 設置全部匹配元素的html內容

    • html代碼

      • text()// 取得全部匹配元素的內容
        text(val)// 設置全部匹配元素的內容

    • 值

      • val()// 取得第一個匹配元素的當前值
        val(val)// 設置全部匹配元素的值
        val([val1, val2])// 設置多選的checkbox、多選select的值

        實例

        $("[name='hobby']").val(['basketball', 'football']);
        $("#s1").val(["1", "2"]

    • 屬性

      • 想要獲取返回文本類的屬性用atr（標籤上的屬性用attr）

      • 想要獲取返回布爾值的屬性用prop（DOM對象有的屬性用prop）

      • attr(attrName)// 返回第一個匹配元素的屬性值
        attr(attrName, attrValue)// 爲全部匹配元素設置一個屬性值
        attr({k1: v1, k2:v2})// 爲全部匹配元素設置多個屬性值
        removeAttr()// 從每個匹配的元素中刪除一個屬性

  • 文檔操做

    • 添加到指定元素內部的後面

    • $(A).append(B)// 把B追加到A
      $(A).appendTo(B)// 把A追加到B

      添加到指定元素內部的前面

      $(A).prepend(B)// 把B前置到A
      $(A).prependTo(B)// 把A前置到B

      添加到指定元素外部的後面

      $(A).after(B)// 把B放到A的後面
      $(A).insertAfter(B)// 把A放到B的後面

      添加到指定元素外部的前面

      $(A).before(B)// 把B放到A的前面
      $(A).insertBefore(B)// 把A放到B的前面

      移除和清空元素

      remove()// 從DOM中刪除全部匹配的元素。
      empty()// 刪除匹配的元素集合中全部的子節點

    • 替換

      • replaceWith()
        replaceAll()

    • 克隆

      • clone()// 參數