開(kāi)始寫(xiě)博客啦,準(zhǔn)備一點(diǎn)一點(diǎn)將云筆記上面的總結(jié)轉(zhuǎn)移到這個(gè)上面來(lái).本菜鳥(niǎo)希望大家多多監(jiān)督我.

1. 什么是jquery?
   JQ就是一個(gè)js庫(kù),里面封裝好了很多的方法,我們學(xué)習(xí)JQ,就是學(xué)習(xí)里面的方法.

2. 為什么要學(xué)習(xí)jquery?
   JQ不需要考慮兼容性呀袱，而且更簡(jiǎn)單肯夏。底層也是封裝的DOM.

3. JQuery的版本問(wèn)題.

   1. 1/2/3版本的問(wèn)題:
      1.x的版本考慮兼容性
      2.x的版本不考慮兼容性.
      3.x現(xiàn)在1.x與2.x版本已經(jīng)停止更新了,僅僅更新3.x。也不考慮兼容性.
      需要注意的是jq插件的最低支持版本,例如bootstrap最低支持1.9.1.
   2. 壓縮版與壓縮版本的問(wèn)題:
      壓縮版本:后面帶有min的后綴，利于工作環(huán)境
      不壓縮版本:條例清晰赋朦，利于學(xué)習(xí)與閱讀

4. 隱式迭代
   JQ在設(shè)置屬性的時(shí)候，會(huì)自動(dòng)給所有的元素設(shè)置相同的值绷杜。
   JQ在獲取屬性的時(shí)候甩十，會(huì)獲取第一個(gè)元素的值。
   要給每一個(gè)元素設(shè)置不同的值時(shí)坪郭，就必須需要手動(dòng)遍歷个从。

5. 鏈?zhǔn)骄幊?/p>

   1. ：JQuery在設(shè)置屬性時(shí)，返回的是jquery對(duì)象歪沃，因此可以一直點(diǎn)下去嗦锐。
   2. ：JQuery在獲取屬性時(shí)，返回的是具體的值沪曙，而不是JQuery對(duì)象奕污。因此不能再點(diǎn)下去
   3. ：能否一直點(diǎn)下去，就要看返回的值是不是JQ對(duì)象.在源碼中是return this.

6. 使用JQ的步驟

   1. ：引入JQ文件
   2. ：入口函數(shù)
      ?$（document）.ready ( function () {} );
      ?$(function(){});
   3. :JQ/JS入口函數(shù)的區(qū)別:
      ??JS中的入口函數(shù)要等到頁(yè)面中的所有資源（文件液走，圖片）均加載完才會(huì)執(zhí)行碳默。
      ??JQ的入口函數(shù)僅僅會(huì)等待文檔樹(shù)的加載完成就會(huì)開(kāi)始執(zhí)行，不會(huì)等待圖片缘眶、文件的加載
      ??JQ的加載時(shí)間會(huì)早于JS的加載.

7. JQ對(duì)象與JS對(duì)象

   1. ：JQ對(duì)象是指用JQ方法獲取的嘱根；DOM對(duì)象是指用JS方法獲取的。是兩個(gè)不同的對(duì)象巷懈。因此里面的方法并不能混用该抒。
   2. ：JQ是個(gè)偽數(shù)組，里面裝得是DOM對(duì)象顶燕。
   3. ：JQ對(duì)象→DOM對(duì)象
      ?$("li")[index]
      ?$("li").get(index)
   4. :DOM對(duì)象→JQ對(duì)象
      $(domObj)

8. 選擇器

   1. 基礎(chǔ)選擇器
      ID選擇器 $(“#id”)
      類(lèi)選擇器 $(“.class”)
      標(biāo)簽選擇器 $(“div”)
      并集選擇器 $(“div,p,li”)
      交集選擇器 $(“div.redClass”)
   2. 層級(jí)選擇器
      子代選擇器 $(“ul>li”)
      后代選擇器 $(“ul li”)
      +后面的一個(gè)元素 $(“ul+li”) ul的下一個(gè)li
      ~ 后面所有元素 $(“ul~li”) ul的后面所有l(wèi)i
   3. 過(guò)濾選擇器（屬性）
      :even :odd 索引值偽偶數(shù)/奇數(shù) $("li:odd")
      :eq(index) 具體索引值的數(shù) $("li:eq(2)") 索引值從0開(kāi)始
      :selected :checked 下拉列表/單選框被選中
      :first :last $("li:first") $("li:last")
      :gt(index) 從索引值大于index的元素開(kāi)始 索引值從0開(kāi)始
   4. 篩選選擇器
      children find parent siblings next nextAll prev eq(index)
      $對(duì)象.children(selector) 相當(dāng)于$(“ul>li”)凑保，子類(lèi)選擇器
      $對(duì)象.find(selector) 相當(dāng)于$(“ul li”),后代選擇器
      $對(duì)象.siblings( ) 查找兄弟節(jié)點(diǎn)，不包括自己本身割岛。
      $對(duì)象.parent() 查找父親
      eq(index) 相當(dāng)于$(“l(fā)i:eq(2)”),index從0開(kāi)始
      .next() 找下一個(gè)兄弟 類(lèi)似于+
      .nextAll( ) 后面所有, 類(lèi)似于~
      .prev() 找上一次兄弟
      .prevAll 前面的所有兄弟元素
      $('#bar').index(); //1愉适，不傳遞參數(shù)，返回這個(gè)元素在同輩中的索引位置癣漆。
   5. 屬性選擇器
      $form[name=tc_name] name為tc_name的form表單

9. 樣式操作(行內(nèi)樣式)

   1. css樣式
      1.1. 設(shè)置樣式
      ?$("li").css(name, value)
      ?$("li").css(obj)
      1.2. 獲取樣式
      ?$("div").css(name);
      獲取得是第一個(gè)元素對(duì)應(yīng)的值
   2. class樣式
      2.1 添加類(lèi)名
      ?$(“div”).addClass(“one”);
      ?再原來(lái)的類(lèi)名上添加一個(gè)類(lèi),不會(huì)覆蓋原來(lái)的類(lèi)名,但是要注意權(quán)重問(wèn)題
      2.2 移除類(lèi)名
      ?$(“div”).removeClass(“one”);
      2.3 判斷類(lèi)名
      ?$(“div”).hasClass(“one”);
      ?返回值為true或者false
      2.3 切換類(lèi)名
      ?$(“div”).toggleClass(“one”);
      ?有就移除,沒(méi)有就添加

10. 屬性操作(標(biāo)簽的自定義屬性)

    1. 設(shè)置屬性
       1.1. 設(shè)置單個(gè)屬性
       ?attr(name, value)
       1.2. 設(shè)置多個(gè)屬性
       ?attr(obj)
    2. 獲取屬性
       ?attr(name)
    3. 移除屬性
       ?removeAttr(name)
    4. 設(shè)置/獲取標(biāo)簽的自定義屬性
       ?標(biāo)簽的自定義屬性 data-msrc:"abc"
       ?獲取標(biāo)簽的自定義屬性 JQ標(biāo)簽對(duì)象.data("msrc")
       ?設(shè)置標(biāo)簽的自定義屬性 JQ標(biāo)簽對(duì)象.data("屬性",屬性值)

11. 動(dòng)畫(huà)

12. 普通動(dòng)畫(huà)
    1.1. 顯示(show())與隱藏(hide())
    ?改變了width height opacity
    1.2. 滑入(slideUp( ))與滑出(slideDown( ))與切換(slideToggle( ))
    ?改變了 height
    1.3. 淡入(fadeIn( ))與淡出(fadeOut( ))與切換(fadeToggle( ))
    ?改變了 opacity
    1.4. slideToggle( )與fadeToggle( )切換的就是show( )/hide( )
    1.5. 動(dòng)畫(huà)隊(duì)列
    ?在同一個(gè)元素上執(zhí)行多個(gè)動(dòng)畫(huà)，那么對(duì)于這個(gè)動(dòng)畫(huà)來(lái)說(shuō)剂买，后面的動(dòng)畫(huà)會(huì)被放到動(dòng)畫(huà)隊(duì)列中惠爽，等前面的動(dòng)畫(huà)執(zhí)行完成了才會(huì)執(zhí)行（聯(lián)想：火車(chē)進(jìn)站）癌蓖。
    1.6. 停止動(dòng)畫(huà)
    ?stop方法：停止當(dāng)前正在執(zhí)行的動(dòng)畫(huà)效果,開(kāi)始下一個(gè).在動(dòng)畫(huà)前面調(diào)用stop方法

13. 節(jié)點(diǎn)的操作

    1. 創(chuàng)建節(jié)點(diǎn)
       $(htmlStr) $(“<span>這是一個(gè)span元素</span>”)
       添加節(jié)點(diǎn)
       A.append( B ) 將B添加到A的子元素的最后面
       A.appendTo( B ) 將A添加到B的子元素的最后面
       A.prepend( B ) 將B添加到A的子元素的最前面
       A.prependTo( B ) 將A添加到B的子元素的最前面
       A.before(B) 將B添加到A前面
       A.after(B) 將B添加到A后面
    2. 清空節(jié)點(diǎn)
       A.empty()：清空指定A節(jié)點(diǎn)的所有元素，A保留(倒掉瓶子里面的水)
       刪除節(jié)點(diǎn)
       remove()：相比于empty婚肆，自身也刪除（直接丟掉瓶子）
       克隆節(jié)點(diǎn)
       clone() 默認(rèn)為false,不會(huì)復(fù)制事件. 傳true時(shí)復(fù)制事件
       $對(duì)象.html(對(duì)象)是覆蓋而$對(duì)象.append(對(duì)象)是累加

14. 特殊屬性的操作(標(biāo)簽的屬性)
    里面不傳參數(shù)就是獲取,傳參數(shù)就是設(shè)置(除prop()外)
    1.prop()方法
    ?checked租副、selected、disabled這類(lèi)boolean類(lèi)型的屬性來(lái)說(shuō)较性，只能用prop方法用僧。
    ?設(shè)置屬性 $(“:checked”).prop(“checked”,true);
    獲取屬性 $(“:checked”).prop(“checked”);
    ?清除屬性: $(“:checked”).removeProp(“checked”)

    2. val()方法
       ?value屬性是指輸入框的默認(rèn)值.
       ?val()方法用于設(shè)置和獲取表單元素的值，例如input赞咙、textarea的值
    3. html()/text() 方法
       就是表示文字的設(shè)置
       html()識(shí)別標(biāo)簽/text()不識(shí)別標(biāo)簽
    4. width()/height()方法
       ?$(window).width(); 獲取頁(yè)面的可視區(qū)的寬高
    5. scrollTop()與scrollLeft()方法
       ?$(window).scrollTop();獲取頁(yè)面滾動(dòng)條的高度
    6. offset()/position()方法
       ?offset方法獲取元素距離document的位置责循，position方法獲取的是元素距離有定位的父元素的位置。
       ?獲取元素距離document的位置,返回值為對(duì)象：{left:100, top:100}
       ?$(selector).offset();
       獲取相對(duì)于其最近的有定位的父元素的位置攀操。
       $(selector).position();

15. 事件

    1. :最普通的注冊(cè)事件
       $("li").click(function(){//具體的邏輯})

    2. :on注冊(cè)事件
       $(selector).on(events[,selector][,data],handler);
       第一個(gè)參數(shù)：events院仿，綁定事件的名稱(chēng)可以是由空格分隔的多個(gè)事件（標(biāo)準(zhǔn)事件或者自定義事件）
       第二個(gè)參數(shù)：selector, 執(zhí)行事件的后代元素（可選），如果沒(méi)有后代元素速和，那么事件將有自己執(zhí)行歹垫。
       第三個(gè)參數(shù)：data，傳遞給處理函數(shù)的數(shù)據(jù)颠放，事件觸發(fā)的時(shí)候通過(guò)event.data來(lái)使用（不常使用）
       第四個(gè)參數(shù)：handler排惨，事件處理函數(shù)
       2.1. 注冊(cè)簡(jiǎn)單事件
       ?表示給$(selector)綁定事件，并且由自己觸發(fā)碰凶，自己執(zhí)行.不寫(xiě)selector參數(shù)
       ?不支持動(dòng)態(tài)綁定若贮。
       ?$(selector).on( "click", function() {});
       2.2. 注冊(cè)委托事件
       ?表示給$(selector)綁定代理事件，當(dāng)必須是它的內(nèi)部元素span才能觸發(fā)這個(gè)事件痒留，且子元素是執(zhí)行者
       ?支持動(dòng)態(tài)綁定,且$(this)指向執(zhí)行者
       ?$(selector).on( "click",“span”, function() {});
       2.3. off移除事件
       off不傳參數(shù)：清除所有的事件 $("div").off();
       ?清除所有的點(diǎn)擊事件$("div").off("click");
       ?只清除委托事件$("div").off("click", "p");
       ?清除某一個(gè)點(diǎn)擊事件$("div").off("click", fn);
       2.3. :trigger觸發(fā)事件
       setInterval(function () {
       //觸發(fā)事件
       //$("#btn").click();
       // trigger:觸發(fā)
       // toggle:切換
       $("#btn").trigger("dblclick");
       }, 2000);
       })

       2.4. 特殊的事件

       1. submit() 表單的提交事件
          只要點(diǎn)擊表單里面的按鈕,表單就會(huì)提交/回車(chē)也會(huì)觸發(fā)
          $form.submit(function(){
          //功能型的代碼
          return false;
          })

16. 事件對(duì)象
    jQuery事件對(duì)象其實(shí)就是js事件對(duì)象的一個(gè)封裝谴麦，處理了兼容性。
    screenX和screenY 對(duì)應(yīng)屏幕最左上角的值
    clientX和clientY 距離頁(yè)面左上角的位置（忽視滾動(dòng)條）
    pageX和pageY 距離頁(yè)面最頂部的左上角的位置（會(huì)計(jì)算滾動(dòng)條的距離）
    event.keyCode 按下的鍵盤(pán)代碼
    event.data 存儲(chǔ)綁定事件時(shí)傳遞的附加數(shù)據(jù)
    event.stopPropagation() 阻止事件冒泡行為
    event.preventDefault() 阻止瀏覽器默認(rèn)行為
    return false:既能阻止事件冒泡伸头，又能阻止瀏覽器默認(rèn)行為匾效。

17. each
    jQuery的隱式迭代會(huì)對(duì)所有的DOM對(duì)象設(shè)置相同的值，但是如果我們需要給每一個(gè)對(duì)象設(shè)置不同的值的時(shí)候恤磷，就需要自己進(jìn)行迭代了面哼。
    參數(shù)一表示當(dāng)前元素在所有匹配元素中的索引號(hào)
    參數(shù)二表示當(dāng)前元素（DOM對(duì)象）
    $(selector).each(function(index,element){});