JQuery

jQuery是由幾個外國哥們封裝的js代碼庫（就是對js原生代碼進(jìn)行了方法封裝），目的是為了簡化原生代碼的繁瑣操作洋措，口號是：write less do more。

特點：開源、插件極多查刻、主要簡化的是js原生的DOM操作還有ajax請求

目前版本：1x、2x昭娩、3x版本簇搅，各個版本沒有較大區(qū)別，唯一比較重大的改變就是從2x版本開始嘱朽，jQuery不再兼容IE低版本旭贬。
1.在 head標(biāo)簽中 或者 body標(biāo)簽后 引入jQuery.js
2.jQuery聲明了一個全局對象：jQuery，通過它來調(diào)用jQuery封裝的操作方法

1搪泳、選擇器（DOM獲取操作）

jQuery提供的獲取元素方法稀轨，需要選擇器字符串作為參數(shù)，獲取文檔中所有符合選擇器要求的DOM
jQuery支持所有CSS選擇器
jQuery還添加了一些CSS不支持的選擇器
語法：返回符合選擇器要求的元素集合岸军，該集合由jQuery進(jìn)行封裝奋刽，可以調(diào)用jQuery提供的操作方法。
foreach() 只能循環(huán) 對象和數(shù)組

1. :eq(n) 選擇器: 獲得索引n的元素（最外層符合）
console.log($('li:eq(2)'));
2. :lt(n) 選擇器: 獲得索引小于n的元素
console.log($('li:lt(2)'));
3. :gt(n) 選擇器: 獲得索引大于n的元素
console.log($('li:gt(2)'));
4. :odd 選擇器: 獲得索引為奇數(shù)的元素
console.log($('li:odd'));
5. :even 選擇器: 獲得索引為偶數(shù)的元素
console.log($('li:even'));
6. :empty 選擇器: 獲得內(nèi)容為空（不包含文本和子元素）的元素
console.log($('li:empty'));
方法：
1. eq(n): 獲得索引為n的元素
console.log($('li').eq(3));
console.log($('li:eq(3)'));
2. get(n): 獲取索引為n的原生DOM
console.log($('li').get(3));

2.原生DOM 與 jQueryDOM 相互轉(zhuǎn)化

注意：
1. 原生方法獲得到的是原生DOM或DOM集合艰赞，可以調(diào)用或訪問原生的方法和屬性
2. jQuery方法獲得到一定是jQuery包裝后的元素集合佣谐，只能調(diào)用或訪問jQuery的方法或?qū)傩?$('li').eq(2).style.color = "red";
$('li').get(2).style.color = "red";
//jQueryDOM 轉(zhuǎn) 原生DOM：通過 get()方法 進(jìn)行轉(zhuǎn)化
var jqDOM = $('li').eq(3);
console.log(jqDOM);
var oriDOM = jqDOM.get(0);
console.log(oriDOM);
//原生DOM 轉(zhuǎn) jQueryDOM：通過 $()方法 進(jìn)行轉(zhuǎn)化
var oriDOM = document.querySelector('li');
console.log(oriDOM);
var jqDOM = $(oriDOM);
console.log(jqDOM);

3.DOM操作（ 增刪改查）

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

    //添加
        (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');
//查詢（ 獲取元素抹蚀， 根據(jù)關(guān)系獲取元素）
  //父關(guān)系
        (1) A.parent()： 獲得A的父元素
        $('li:eq(2)').parent().css('background-color', 'red');
        (2) A.parents()
        (3) A.parentsUntil()
  //子關(guān)系：
        A.children()： 獲得A的子元素集合， 可以填寫選擇器字符串為參數(shù)企垦， 會自動獲取符合選擇器要求的子元素环壤。
      console.log($('div').children('span'));
  //兄弟關(guān)系：
    A.next()： 獲得A的下一個兄弟元素
        console.log($('li:eq(2)').next());

    A.nextAll()： 獲得A后面所有的兄弟元素
        console.log($('li:eq(2)').nextAll());
    A.nextUntil()

    A.prev()： 獲得A的上一個兄弟元素
        console.log($('li:eq(2)').prev());

    A.prevAll()： 獲得A前面所有的兄弟元素
        console.log($('li:eq(2)').prevAll());
    A.prevUntil()

    A.siblings()： 獲得A所有的兄弟元素
        console.log($('li:eq(2)').siblings());

4.DOM屬性的操作

    1. A.attr()：讀寫A的屬性值，setAttribute() 和 getAttribute() 的封裝
     參數(shù)：
     （1）string類型钞诡，表示屬性名
     （2）無類型要求郑现，表示屬性值
     當(dāng)一個參數(shù)時是讀取，兩個參數(shù)時是設(shè)置荧降，當(dāng)?shù)诙€參數(shù)值為null時是刪除
    // 設(shè)置屬性
     $('div').attr('id','box');
    // 讀取屬性
       console.log($('div').attr('id')); // 'box'
    // 刪除
     $('div').attr('id',null);
      console.log($('div').attr('id')); // undefined

    // 類名的操作
     A.addClass()： 為A添加類名
     $('div').get(0).className += " A";
     $('div').addClass('A');
     A.removeClass()： 刪除類名
     $('div').removeClass('box');
     A.toggleClass()： 切換類名接箫，如果類名已經(jīng)存在就刪除，不存在就添加
     $('div').toggleClass('box');

    // 內(nèi)容或文本設(shè)置
     text() / html(): 對應(yīng)了原生的 innerText 和 innerHTML
     如果方法無參數(shù)朵诫，那就是讀取值辛友；如果方法有參數(shù)，那就是設(shè)置值
    // 讀取
        console.log($('.btn').eq(5).html());
    // 設(shè)置
    $('.btn:eq(5)').html('AD');
    $('.btn:eq(5)').get(0).innerHTML = "SS";

     表單元素的value
     val(): 對應(yīng)了原生的 value
    //  如果方法無參數(shù)拗窃，那就是讀取值瞎领；如果方法有參數(shù)，那就是設(shè)置值
    // 讀取
      console.log($('input').val());
    // 設(shè)置
    $('input').val('QWER');

5. DOM 大小及位置

（1). jQuery讀取DOM寬高
    1. width() / height()
// 讀取随夸，只會讀取盒模型 內(nèi)容 寬度
 console.log($('.A').width());
// 設(shè)置九默，設(shè)置盒模型內(nèi)容寬度（純數(shù)字或帶單位的字符串都可以）
$('.A').width(200);

 2. innerWidth() / innerHeight()
// 讀取，只會讀取盒模型 內(nèi)容+內(nèi)邊距 寬度
console.log($('.A').innerWidth());
// 設(shè)置宾毒，如果存在內(nèi)邊距驼修，設(shè)置的值會保留內(nèi)邊距，自動修改內(nèi)容寬度
$('.A').innerWidth(200);

3. outerWidth() / outerHeight()
// 讀取诈铛，讀取完整盒模型寬度 內(nèi)容+內(nèi)邊距+邊框
console.log($('.A').outerWidth());
// 設(shè)置乙各，保留原有的內(nèi)邊距和邊框值，剩余部分自動分配給內(nèi)容寬度
 $('.A').outerWidth(200);

(2).讀取位置
1. offset()返回一個位置對象幢竹，left屬性和top屬性表示位置
// 不管元素是否存在定位父級耳峦，讀取的始終都是元素邊緣到視窗邊緣的距離
 console.log($('.B').offset().left);

 2. position()返回一個位置對象，left和top屬性表示位置
// 如果元素存在定位父級焕毫，讀取的是元素邊緣到定位父級邊緣的距離蹲坷，如果不存在定位父級驶乾，讀取的是元素邊緣到視窗邊緣的距離
 console.log($('.B').position());

 3.滾動偏移
 scrollTop() / scrollLeft()
// 當(dāng)無參數(shù)時讀取滾動偏移，當(dāng)有參數(shù)時設(shè)置滾動偏移（number）
 $('.A')[0].onscroll = function(){
     // 讀取滾動偏移
      console.log(this.scrollTop);
    console.log($(this).scrollTop());
 }

6.事件

1.點擊事件
     $('.box').click(function(){
         $('.box').css('background','green')
     })
    $('.box').on('click'循签，function(){
         $('.box').css('background','green');
     })
2.移出事件
 $('.box').off('click');