1.JQ是一個(gè)輕量級(jí)的原聲js庫(kù) 目前最高版本 3.X 最低支持到 IE9

優(yōu)點(diǎn):
1. 強(qiáng)大的選擇器 總是能得到一個(gè)集合
2. 對(duì)DOM的處理非常簡(jiǎn)單方便
3. 兼容強(qiáng)大 自身就已經(jīng)做完了基本的兼容處理
4. 鏈?zhǔn)讲僮? 所用的JQ方法 都可以通過 "." 來不斷調(diào)用
5. 強(qiáng)大的 AJAX 封裝庫(kù)

2.JQ 選擇器

選擇標(biāo)簽:
如果這個(gè)同類名標(biāo)簽 只有一個(gè) 直接用就行

  $('.box')  
  $('.box').css();

如果需要精準(zhǔn)的操作某一個(gè)標(biāo)簽 需要用到

.eq()  $('.box').eq(0).css()

(1) :first 選中第一個(gè)子集 只選擇一個(gè)

    $('.box div:first')
    $('.box .item:first')

(2) :last 選擇最后一個(gè)子集

    $('.box div:last')
    $('.box .item:last')

(3) :even 偶數(shù)下標(biāo) 下標(biāo)從0開始

    $('.box .item:even')

(4) :odd 奇數(shù)下標(biāo)

    $('.box .item:odd')

(5) :eq 指定下標(biāo)

    $('.box .item:eq(0)')
    $('.box .item').eq(0);

(6) :gt(index) 指定以上標(biāo)簽被選中 >index 下標(biāo)的元素

    $('.box .item:gt(3)')

(7) :lt(index) 指定以下標(biāo)簽被選中 <index 下標(biāo)的元素

    $('.box .item:lt(3)')

內(nèi)容過濾:
(8) :contains(文本內(nèi)容) 選擇包含目標(biāo)文本內(nèi)容的標(biāo)簽

    $('.box1 .item:contains(666)')

(9) :empty 選中內(nèi)容為空的標(biāo)簽

    $('.box .item:empty')

(10) :parent 選中非空標(biāo)簽

    $('.box .item:parent')

(11) :has() 選擇包含了 對(duì)應(yīng)子集的標(biāo)簽

    $('.box .item:has(p)') //item 內(nèi) 有 p 標(biāo)簽

3.用JQ獲取class 時(shí) 是一個(gè)集合 不止有一個(gè)元素

所以 點(diǎn)擊方法內(nèi) 如果需要操控元素本身 最好使用$(this);

給盒子 添加 class

  $(this).addClass('on');

刪除 class

  $(this).removeClass('on');

切換 class

  $(this).toggleClass('on');

4.獲取盒子的尺寸值

5.JQ 動(dòng)畫

 $('.box').animate(參數(shù)1,參數(shù)2,參數(shù)3)

        參數(shù)1 css樣式 對(duì)象的形式  鍵值對(duì)
        參數(shù)2 時(shí)間（ms）
        參數(shù)3 callback 回調(diào)函數(shù)  動(dòng)畫結(jié)束后調(diào)用

常用動(dòng)畫:

callback 回調(diào)函數(shù)

動(dòng)畫執(zhí)行順序的控制:

    $('.box').fadeIn(500).delay(500).slideUp();

6.DOM操作（增刪改查）

增:

1. 創(chuàng)建DOM: $(tagString)

 var $h = $('<h1 class="title"> jQuery 創(chuàng)建DOM </h1>');
 console.log($h);

2. 添加

(1) A.append(B)，將B追加到A的末尾，方法返回A自身

   $('body').append($h);

(2) B.appendTo(A)融虽，將B追加到A的末尾，方法返回B自身

   $h.appendTo($('body'));
   console.log($h.appendTo('body'));

(3) A.prepend(B)舞终，將B添加到A的首位
(4) B.prependTo(A)，將B添加到A的首位
(5) A.after(B)癣猾，在A的后面插入B敛劝，返回A

  console.log($('li:eq(2)').after($('<li>6</li>')));

(6) A.before(B)，在A的前面插入B纷宇，返回A

  console.log($('li:eq(3)').before($('<li>7</li>')));

刪除:

(1) A.remove()夸盟，將A從它的父元素中刪除，返回A

  console.log($('li:eq(2)').remove());

(2) A.empty()像捶，將A的內(nèi)容置空上陕，返回A

  $('ul').empty().append($('<li>10</li>').css('color','red'));
  console.log($('ul').empty());

修改:

A.replaceAll(B)桩砰， 用A替換B，B必須是文檔中已經(jīng)存在的元素释簿，返回A

 console.log($('<li>10</li>').replaceAll($('li:eq(2)')));

克隆:

A.clone()亚隅，克隆A，只有深克隆庶溶，連同A的內(nèi)容一并克隆煮纵。

$('ul').clone().appendTo('body');

查詢:

基本的Dom操作
1. 設(shè)置 獲取 文本節(jié)點(diǎn)

    $('.box').text(); //獲取
    $('.box').text('12312312312'); //設(shè)置

2、設(shè)置 獲取 html 內(nèi)容

    $('.box').html(); //獲取
    $('.box').html('<p></p>'); //設(shè)置

3. 設(shè)置 獲取 表單內(nèi)容

    $('input').val(); //獲取
    $('input').val('嘿嘿嘿'); //設(shè)置

獲取 節(jié)點(diǎn):

設(shè)置自定義屬性 行間屬性:

    $('.box').attr('index')  讀取
    $('.box').attr('index','123')  設(shè)置

刪除行間屬性:

    $('.box').removeAttr('index');