jQuery學習筆記 -《鋒利的jQuery》第二版讀書筆記 簡單介紹 jQuery選擇器 jQueryDom操作 jQuery事件 後面的就不寫了

PDF閱讀體驗更好
鏈接：https://pan.baidu.com/s/1-OAtwUFlmbIXZbCkX0C9Rw
提取碼：trv4

參考來源：《鋒利的jQuery》第二版

本文是對jQuery的梳理，閱讀起來可能很不順暢。

簡單介紹

• 支持鏈式操作

jQuery對象和Dom對象

如果獲取的對象是jQuery對象，那麼在變量前面加上$。

var $obj = $("#obj");

jQuery提供了兩種方法轉換爲Dom對象，get(index)和[index]。

var $obj = $("#obj");   //jQuery對象
var cc = $obj[0];       //cc就是DOM對象，get(0)方法也可以獲取

對於一個DOM對象，只需要用$把DOM對象包起來即可。

var obj = document.getElementById("obj");       //DOM對象
var cc = $(cc);     //jQuery對象

解決jQuery與其他庫衝突的問題

jQuery在其他庫之後導入

1. 可以使用jQuery.noConflict()把￥控制權交給其他js庫，使用jQuery()作爲jQuery對象的製造工廠

    //⋯省略其他代碼
    <p id="pp">Test-prototype(將被隱藏)</p>
    <p >Test-jQuery(將被綁定單擊事件)</p>
    <!-- 引入 prototype  -->
    <script src="lib/prototype.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="../../scripts/jquery.js" type="text/javascript"></script>
    <script language="javascript">
        jQuery.noConflict()；//將變量$的控制權移交給prototype.js
        jQuery(function(){//使用jQuery
          jQuery("p").click(function(){
              alert( jQuery(this).text() )；
          })
        })
        $("pp").style.display = 'none'； //使用prototype.js隱藏元素
    </script>
    </body>
    //⋯省略其他代碼

2. 可以自定義快捷方式

    var $j = jqQuery.noconflict()；

3. 在jQuery函數內部繼續使用$

    //⋯省略其他代碼
  jQuery.noConflict()；       //將變量$的控制權讓渡給prototype.js
  jQuery(function($){         //使用jQuery設定頁面加載時執行的函數
      $("p").click(function(){   //在函數內部繼續使用$()方法
          alert($(this).text() )；
      })
  })
  $("pp").style.display = 'none'；   //使用prototype
  //⋯省略其他代碼

4. 定義匿名函數

 jQuery.noConflict();
 (function($){
     $(function(){
         
     });
 });

jQuery在其他庫之前調用

    jQuery(function(){
        
    })

jQuery選擇器

jQuery選擇器的優勢

1. 當使用原生js選擇器時，如果一個元素不存在，會報錯，而jQuery不會報錯。
2. jQuery獲取的永遠是對象，即使它不存在，所有在判斷對象是否存在時，需要使用$("#id").length>0來判斷，或者轉化爲DOM對象之後再判斷

基本選擇器

1. $(“#id”) 選擇id爲id的元素
2. $(".class') 選擇class爲class的元素
3. $("p") 選擇所有p元素
4. $("*") 選擇所有元素
5. $("div,span,p.new") 表示選擇所有div，所有span，所有class="new"的p標籤

層次選擇器

1. $("div span") 選擇div所有span後代
2. $("div > span") 選擇div下的span子元素
3. (".class").next("div") ==**
4. ("#id").nextAll("div") ==**
   而siblings()方法可以選擇所有同輩元素，不在乎前後關係

過濾選擇器

基本過濾選擇器

• :first $("div:first") 選擇所有div元素的第一個元素
• :last $("#div:last") 選擇所有div元素的最後一個元素
• :not(select) $("input:not(.one)") 選擇所有class 不是one的input元素
• :even $("input:even") 選擇索引是偶數的input元素
• :odd $("input:even") 選擇索引是基數的input元素
• :eq(index) 索引等於，從0開始
• :gt(index) 索引大於
• :lt(index) 索引小於
• :header 所有的標題
• :focus 所有當前獲得焦點的元素

內容過濾器

• $("div:contains("我")") div文本中含有“我”
• $("div:empty") 空div，文本都木得
• $("div:parent") 有子元素的div
• $("div.has(p)") 有p子元素的div

可見性過濾器

• $("div:hidden")
  包括display爲none的元素，還包括type="hidden"、visibility:hidden的元素
• $("div:visible")

屬性過濾選擇器

• $("div[id]") 有id屬性
• $("div[title=test]") 屬性title的值爲test
• $("div[title!=test]") 屬性title不爲test
• $("div[title^=test]") 屬性title的值以test開頭
• test]") 屬性title的值以test結尾
• $("div[title*test]) 屬性title的值中含有test

子元素過濾選擇器

:nth-child()選擇器是很常用的子元素過濾選擇器，詳細功能如下。

• :nth-child(even)能選取每個父元素下的索引值是偶數的元素。
• :nth-child(odd)能選取每個父元素下的索引值是奇數的元素。
• :nth-child(2)能選取每個父元素下的索引值等於2的元素。
• :nth-child(3n)能選取每個父元素下的索引值是3的倍數的元素，（n從1開始）。
• :nth-child(3n+1)能選取每個父元素下的索引值是（3n+1）的元素。（n從1開始）

表單對象過濾選擇器

• :enabled
• :disabled
• :checked 單選框，複選框
• :selected 下拉

表單選擇器

(":text")，其他如：password、radio、checkbox、submit、img、reset、file

選擇器注意

如果帶有特殊符號，需要使用\來轉義

jQueryDom操作

查找結點

$("ul li:eq(1)  ").text();   //查找結點並打印內容
$("p").attr("title")    //p元素的title屬性值

創建結點

通過jQuery的工廠函數$()

$("ul").append($("<li></li>"))    //創建li並添加到ul中

插入結點

• append() $(a).append(b) b插入到a
• appendTo() 反過來插入 $(a).appendTo(b) a插入到b
• prepend() 插入到前邊
• prependTo() 反過來插入
• after() 在元素之後插入
• insertAfter() 反過來
• before() 在元素之後插入
• insertBefore() 反過來
  不僅僅可以新增，也可以對原有的元素進行操作，改變原有順序。如果對原有元素進行操作，是先刪除再添加 結合remove方法思考

刪除結點

• remove()

  $("div[id=one]").remove() 該結點刪除後，其子元素都會被刪除，並且返回值是這個被刪除元素的引用，因此可以用變量接受後再次使用
  
  也可以傳參選擇性刪除

• empty() 清空所有子元素

複製結點

• clone() $("div[id=name]").clone().appendTo("p")
  可以帶參數：clone(true) 表示把事件綁定也複製過去

替換結點

• replaceWith() $(a).replaceWith(b) 把a替換爲b
• replaceAll() $(a).replaceAll(b) 把b替換爲a
  注意：如果替換前綁定了事件，替換後需要重新綁定事件

包裹結點

• wrap()

  ("strong").wrap("<b></b>")  
  

  結果是：

  <b><strong></strong></b>
  <b><strong></strong></b>
  
  

• wrapAll()方法
  結果是：

  <b>
  <strong></strong>
  <strong></strong>
  </b>
  

  如果中間還有其他元素，會把其他元素放置到後邊

• wrapInner()方法
  該方法將每一個匹配的元素的子內容（包括文本節點）用其他結構化的標記包裹起來。例如

  $("strong").wrapInner("<b></b>")
  

  可以使用它來包裹<strong>標籤的子內容，代碼如下:

  <strong title="選擇你最喜歡的水果." ><b>你最喜歡的水果是？</b></strong>
  

屬性操作

• attr()方法來獲取和設置元素屬性，removeAttr()方法來刪除元素屬性
  獲取屬性值，傳一個參數，設置屬性值，傳兩個參數，如果需要設置多個參數可以使用下面這種格式

  //將一個“名/值”形式的對象設置爲匹配元素的屬性
  $("p").attr({"title" : "your title" , "name": "test" })；  
  

  外還有html()、text()、height()、width()、val()和css()等方法。
  jQuery1.6中新增了prop()和removeProp()，區別在於這兩個方法只獲取匹配元素的第一個。

樣式操作

增加樣式

• 可以使用attr設置
• 也可以使用addClass追加
  如果此時，追加的css屬性與原有重複，則使用追加的屬性

刪除樣式

• 使用removeClass刪除屬性
  如果需要刪除多個屬性，可以使用鏈式調用，使用多個removeClass，或者使空格：removeClass("one two")
  此外如果不帶參數，會刪除全部class

切換樣式

• 使用toggle()交替一組動作，比如下面這個案例，如果當前是顯示的，就隱藏，如果當前是隱藏的，就顯示

$toggleBtn.toggle(function(){       //toggle()，交替一組動作
   //顯示元素    代碼③
},function(){
   //隱藏元素    代碼④
})

• 使用toggleClass()
  比如toggleClass("abother")   如果當前有another的class就刪除，如果沒有就增加

判斷是否有class

• hasClass()
  這個方法是爲了增強代碼可讀性而產生的。在jQuery內部實際上是調用了is()方法來完成這個功能的。該方法等價於如下代碼：$("p").is(".another")；

設置和獲取HTML、文本和值

1. html() = js中的innerHTML

2. text() = js中的innerText

3. val() = js中的value屬性

   除此之外，val()還能使select（下拉列表框）、checkbox（多選框）和radio（單選框）相應的選項被選中，在表單操作中會經常用到。

   如果只選擇一個，傳一個參數，如果選中多個，傳遞一個數組

遍歷結點

1. children() 子元素的集合

2. next() 緊鄰的同輩元素

3. prev() 前面緊鄰的同輩元素

4. siblings() 匹配前後所有同輩元素

5. closest() 該方法用於取得最近的匹配元素。首先檢查當前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上查找父元素，逐級向上直到找到匹配選擇器的元素。如果什麼都沒找到則返回一個空的jQuery對象。

   parent() parents() closest() 三者的區別

   parent	parents	closest
   在父結點查找	在祖先結點查找	先在同級找，同級找不到在去祖先找

6. ==還有find()、filter()、nextAll()和prevAll()等元素，待補充==

CSS-DOM操作

1. css()

$(“#id”).css("color");  //獲取color屬性值
$("#id").css("color","#aaa");   //設置color值
$("#id").css({"color":"#aaa","background-color":"#fff"});   //設置多個樣式

2. height()/width()

   獲取/設置元素的高度，也可以使用css()。

   css()方法獲取的高度值與樣式的設置有關，可能會得到"auto"，也可能得到"10px"之類的字符串；而 height()方法獲取的高度值則是元素在頁面中的實際高度，與樣式的設置無關，並且==不帶單位==。

   3. offset()

   獲取當前元素在當前視窗的相對便宜，返回的對象包含兩個屬性 top和left，並且==只對可見元素有效==。

   4. position()

   獲取元素相對於最近的一個position樣式屬性設置爲relative或者absolute的祖父節點的相對偏移，它返回的對象也包括兩個屬性， top和left

   5. scrollTop()方法和scrollLeft()方法

   這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離。

   另外，可以爲這兩個方法指定一個參數，控制元素的滾動條滾動到指定位置

jQuery事件

加載DOM

執行時機

jQuery使用$(document).ready()爲元素添加事件

$(document).ready()和document.onload()的區別

document.onload()	$(document).ready()
所有元素加載完畢後執行	DOM樹加載完畢即執行，但此時可能某些元素還未加載，無法對其操作，所以jQuery提供了load()方法。

如果處理函數load()綁定給window對象，則會在所有內容（包括窗口、框架、對象和圖像等）加載完畢後觸發，如果處理函數綁定在元素上，則會在元素的內容加載完畢後觸發。

$(window).load(function(){
    
});

多次使用

在之前寫js的時候，經常這麼寫：

window.onload=function(){
    function1();
    function2();
}

用來在網頁加載完畢後執行這兩個方法。這麼寫沒啥大問題，但是遇到多個js文件都要使用window.onload()時就很麻煩。

因爲onload事件一次只能保存一個對一個函數的引用，如果寫兩個， 會自動用後面的覆蓋掉前面的。

而jQuery就不會，jQuery會在先有的行爲上追加，按照註冊的順序執行，所以完全可以這麼寫：

$(document).ready(function(){
    function1();
})

$(document).ready(function2(){
    function2();                  
})

簡寫

$(function(){

});

或者

$().ready(function(){   //$()不帶參數，表示document
    
})

事件綁定

調用格式：bind(type[,data],fn)

第一個參數是事件類型：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，也可以是自定義。

第二個參數可選，最爲event.data的屬性值傳遞給事件的額外數據對象。

第三個參數是用來綁定的函數。

比如：

$(function(){
    $("#id").bind("click",function(){
        alert("666");
    })
})

比較騷氣的是，可別忘了這玩意可以鏈式調用:

$(function(){
    $("#id").bind("click",function(){
        
    }).bind("mouseout",function(){
        
    })
})

當然還可以這樣:

$(function(){
    $("#id").bind("mouserover mouseout",function(){
        
    })
})

方法的簡寫

當然，如果事件多了，都這麼寫還是有點麻煩的，所以jQuery對這些常用的click、mouseout等事件提供了簡寫方式:

$("#id").click(function(){
    
})

合成事件

1. hover() 語法格式：hover(enter,leave) 觸發 mouseenter 和 mouseleave 事件，如果只傳一個參數，兩個都執行。

2. toggle() 語法格式：toggle(fn1,fn2.....fnn) 用於模擬鼠標連續點擊事件，當點擊第一次，執行fn1，往後==順序輪番==執行

   toggle()方法在jQuery中還有另外一個作用：切換元素的可見狀態

事件冒泡

比如：

<body>
    <div>
        <span></span>
    </div>
</body>

這三層都分別綁定了事件，單擊span時不僅觸發了span的事件，其他兩層的事件也會觸發。

事件會按照DOM層次不斷向上直至頂端，這就是事件冒泡。

事件冒泡帶來的問題

問題顯而易見。

爲了解決這個問題，jQuery提供了一些方法。

先鋪墊下，jQuery中存在事件對象的概念：

$("#id").bind("click",function(event){          //這個event就是事件對象
    
})

停止事件冒泡：

$("#id").binf("click",function(event){
    //其他邏輯
    event.stopPropagation();
})

阻止默認行爲：preventDefault()；

比如超鏈接，點擊就會跳轉。

當然還有一個終極大法：return false;

==jQuery不支持事件捕獲。==

事件對象的屬性

1. event.type

2. 上面提到的兩個方法

3. event.target獲取觸發事件的元素

   $("a[href='http://www.baidu.com']").click(function(event){
       vat tg = event.target;       //獲取事件對象
       alert(tg.href);
       return false;        //阻止默認跳轉行爲
   })
   

4. event.relatedTarget

   返回與事件的目標節點相關的節點。

   對於 mouseover 事件來說，該屬性是鼠標指針移到目標節點上時所離開的那個節點。

   對於 mouseout 事件來說，該屬性是離開目標時，鼠標指針進入的節點。

   ==對於其他類型的事件來說，這個屬性沒有用。==

5. event.pageX和event.pageY

   該方法的作用是獲取到光標相對於頁面的x座標和y座標。如果頁面上有滾動條，則還要加上滾動條的寬度或高度。

   $("a").mousedown(function(event){
       alert(event.which);
   })   
   
   $("a").keyup(function(e){
       alert(e.which);
   })  
   

   ==更多事件待補充== 可能不補充了，太多了，看https://api.jquery.com/category/events/

移除事件

1. unbind([type],[data]) 第二個參數存在的意義，可以移除特定的事件
2. one()執行一次即解除，格式與bind相同

模擬操作

比如：$("#id").click();模擬點擊操作，也可以用trigger("click")，此外，trigger還可以觸發自定義事件

trigger(type[,data])用來傳遞數據

$("#bt").bind("myfun",function(event,m1,m2){
    alert("數據："+m1+m2);
});
$("#bt").trigger("myfun",["數據1","數據2"]);

triggerHandler()

觸發被選元素的指定事件類型。但不會執行瀏覽器默認動作，也不會產生事件冒泡。

triggerHandler() 方法與 trigger() 方法類似。不同的是它不會觸發事件（比如表單提交）的默認行爲，而且隻影響第一個匹配元素。

其他

添加事件命名空間

$("#id").bind("click.spacename",function(){
    
})
//當移除的時候可以
$("#btn").click(function(){
    $("#id").unbind(".spacename");
})

因爲參考的是《鋒利的jQuery》，

版本交老，現在都3.5.1了！

==後續增刪改==

後面的就不寫了