技術標籤：jqueryjavascript

JQuery基礎介紹

• • JQ的好出
  • 入口函式
  • JQ物件和DOM物件
  • JQ物件和DOM物件的轉換
  • JQ的選擇器
  • JQ篩選選擇器
  • JQ篩選方法
  • 其他篩選方法
  • 隱士迭代
  • JQ事件繫結

JQ的好出

輕量級,核心檔案幾十kb,不影響頁面載入速度
款瀏覽器相容
鏈式程式設計和隱士迭代,大大提高開發效率
豐富的外掛生態圈,列入樹形圖 輪播圖 日期控制元件等等
免費 開源

入口函式

$(function () {

           })

便於記憶,頁面載入完成後才執行,區域性作用域隔離變數,防止命名衝突

JQ物件和DOM物件

用原生 JS 獲取來的物件就是 DOM 物件

jQuery 方法獲取的元素就是 jQuery 物件。
jQuery 物件本質是： 利用$對DOM 物件包裝後產生的物件（偽陣列形式儲存）。
只有 jQuery 物件才能使用 jQuery 方法，DOM 物件則使用原生的 JavaScirpt 方法。

JQ物件和DOM物件的轉換

把 jq 物件轉成原生的 DOM 物件: $(selector)[0]

        var div = $('div')
        console.log(div.get[0]); // get(索引) 轉生 
            原生DOM元素
        console.log(div[0] == document.
 
querySelector('div')); //true

把原生的 DOM 物件轉成 jq 物件: $(dom物件)

  var div1 = $(document.querySelector('div')) //jq 物件
        console.log(div1);
        div1.hide()

JQ的選擇器

      console.log($('.box')); //根據類名獲取元素

      console.log($('#foo')); //根據id屬性獲取元素

      console.log($('h2')); //根據標籤名獲取元素

      console.
 
log($('ul>li')); //根據子代選擇器獲取元素

      console.log($('ul span')); //根據後代選擇器獲取元素

      console.log($('[class = current]')); //根據屬性選擇器獲取元素

JQ篩選選擇器

     1. 獲取第一個子元素
        console.log($('li:first'));

     2. 獲取最後一個子元素
        console.log($('li:last'));

     3. 獲取第 index 個子元素 (jq 當中元素的索引 index 從 0 開始)
        console.log($('li:eq(0)'));

     4. 獲取索引號為奇數odd的元素
        console.log($('li:odd'));

      5. 獲取索引號為偶數的元素
        console.log($('li:even'));

JQ篩選方法

    1. 獲取父元素
        parent( )

    2. 獲取指定的祖先元素
        parents( )

    3.獲取所有的子元素
       children( )

    4.查詢獲取所有的後代元素（包括子和孫）
        find( )

    5. 獲取所有的兄弟元素（不包括自己）
        siblings( )

其他篩選方法

1. 獲取上一個元素
                prev( )

2.獲取前面所有的元素
                 prevAll( )

3. 獲取下一個元素
                 next( )

4.獲取後面所有的元素
                 nextAll( )

5. 判斷某個元素是否包含某個特定的類名
                 hasClass( )

6. (重要)獲取第 n 個元素 （元素索引 n 從 0 開始）
                 eq(  )

隱士迭代

迴圈遍歷Jquery獲取的所有元素進行樣式屬性等操作
Jquery 當中可以對一組元素直接繫結事件.修改樣式,修改屬性

JQ事件繫結

jq事件繫結： jq物件.事件名稱(function () { })
注意:事件名稱不加 on