對jq能熟練運用后在回頭發現，曾今的坑其實這兩本書多多少少都能提到，當時知道有這兩本好書，但是自己卻沒看，如今在回首，真的覺得挺好，作為讀書筆記來分享給大家，也是復習總結查漏補缺。本文以JQ來簡寫JQuery，鋒利的jq v1.3 jq權威指南v1.8 主要是由于現在更新太快，這兩個結合講2.0以下的jq應該還算ok，把這兩本經典柔和一下，就我而言覺得初學者學習鋒利的jq是個很好的選擇，對初學者很友好

庫和框架？？

JQ是一個JavaScript的類庫，vue、angular這些是框架，

類庫：類庫可以解決一系列常見編程任務,封裝了方法簡便了操作的一個工具集合
框架： 框框嘛。。簡而言之就是大神寫的東西，你要按照他們的規則，約束就能實現相對應的功能，也是一個類庫的集合體

JQ有什么優勢？

本書說道：
JQ強調的理念是寫得少，做的多（write less，do more）這句話簡直是縮影

• [x] 輕量級 ：v3.20 min版：85k
• [x] 強大的選擇器：利用選擇器可以拿到各種對象
• [x] 可靠的事件處理機制：處理事件時，在預留退路、循序漸進，和非侵入式的編程思想。
• [x] 出色的DOM封裝：封裝了方法讓大家能夠簡單的使用
• [x] 完善的Ajax：在里面做了很多兼容和HMLHttpRequest的處理
• [x]** 不污染頂級變量** JQ只建立一個JQuery對象，所有函數方法都在這個對象之下，別名：$，可隨時交出控制權，也就是個類庫是用$可以快速讓給別的類庫
• [x] 出色的瀏覽器兼容性：用JQ從來不用擔心什么火狐用getAttribute才能獲取之類的
• [x] 隱式迭代： 這個意思就是$('div')它會返回所有的div的集合數組，這樣就可以少去很多循環
• [x] 行為層與結構層的分離：HTML結構、CSS表現、JavaScript行為 方便維護
• [x] 豐富的插件庫：遇到問題好多同學第一想到就是找個插件吧（哈哈）
• [x] 支持鏈式調用：要注意代碼書寫規范，好玩還很炫酷
• [x] 完善的文檔豐富的插件庫
• [x] 開源

這也就是為什么JQ久盛不衰的原因了

window.onload 與$(document).ready() 對比（重點：面試?？停?/h3>

$(function(){}) 是$(document).ready()簡寫

為什么要有這什么onload 什么ready：如果要寫代碼在頭部，dom還沒被渲染，自然操作不了DOM，想要操作DOM就放在底下或者加這些，大致意思就是等待加載好了之后的意思

兩者對比思維導圖

鏈式操作書寫規范

要好好的利用這個鏈式操作會簡便很多，簡單的原理就是每次操作返回了this然后可以進行下次操作
個人建議不要鏈太長，最好是每鏈一個就換個行,
注意分號的使用

$('.coderlfy').addClass('go')
.click(function(){...})
.hide();

JQ對象？？DOM對象？？

JQ 對象就是通過JQ包裝DOM對象后產生的對象
DOM對象就是文檔對象模型，可以想象成一棵樹，樹里有很多標簽啥的，可以操作

JQ與DOM對象相互轉換：通過$()這個工廠方法進行封裝成JQ對象，只有JQ才能操作JQ的函數方法

var dx      //這是一個dom對象
var $dx     //這是一個JQ對象
//dom轉JQ
$(dx)
//JQ轉DOM
$dx[0]

JQ和其他庫沖突時該怎么辦？？

這個問題曾今筆者被問過，嘎嘎，印象深刻

1. 通過jq.noConflict() 改名

var $JQ = noConflict();// $被交出控制權。$JQ頂替$

2. 不想改名怎么辦？還想不沖突？有兩種方法

//第一種
JQuery.noConflict()// 首先，交出控制權
JQuery(fucntion($){
    //內部就能使用$了
})

//第二種 匿名函數
JQuery.noConflict()// 首先，交出控制權
(function($){
    //內部使用$
})(jQuery);

3. JQ先導入，不想沖突？
   如果是JQ比其他先導入，直接使用jQuery不用交出控制權

可靠的事件處理機制？？

在說優點的時候就已經說到了，簡述一下：如果之前用JQ找到的一個對象被刪除了，它在內部會先做一個判斷是否存在，在運行代碼，減少報錯，增加執行效率

JQ選擇器

這個選擇器很多，大家選擇著看

JQ選擇器種類

css樣式有多少，JQ就有多少應用也很簡單

基本選擇器：

層次選擇器：

簡單過濾選擇器

內容過濾選擇器：

tip：在 :contains(text) 內容過濾選擇器中，如果是查找字母，則有大小寫的區別

可見性過濾選擇器：

屬性過濾選擇器：

子元素過濾選擇器：

表單對象屬性過濾選擇器

表單選擇器

打臉中

在這里想說：知識很重要，但是尊重別人的勞動成果更重要，總結后才發現沒想到寫這些表能這么累，寫了一半，后來選擇了無情的復制，這個表出自《jQuery權威指南（第二版）》我做了點修改，所有的東西都是從《鋒利的jQuery（第二版）》《jQuery權威指南（第二版）》和自己的想法來做的讀書筆記

JQ操作Dom

在原生js中,Dom操作分為三個方面，即DOM Core（核心）、HTML-DOM 和CSS—DOM

//通過鋒利中的例子讓大家了解，這些大家肯定都用過
//DOM Core 
var xx = document.getElementById('coderlfy');//獲取DOM Core 對象
xx.getAttribute('src')//通過DOM Core 獲取屬性

//HTML-DOM
xx.src//就是提供了一些簡明的幾號來描述HTML元素的屬性

//CSS-DOM
xx.style.color = 'red';//通過設置和獲取style對象的各種屬性來進行改變

++ 元素屬性操作 ++：

1. 獲取元素屬性：通過Attr(name)來進行查找屬性
2. 設置元素屬性：設置單個屬性：Attr(key,value) 設置多個屬性 attr({key0:value0, key1:value1})
3. 刪除元素屬性：通過removeAttr(name)

說道這個Attr()，剛學習的時候總是把它和css()搞混,其實Attr就是弄這個元素上的屬性，而css就只設置樣式等等的![](zzzz)//屬性就是標簽上的id/src這些

++獲取和設置元素++：

1. 獲取和設置元素內容

// 沒參數的時候是獲取，有參數的時候是設置
html()//獲取html內容
text()//獲取文本內容

html()和text() 這個就像是原生中的innerHTML和innerText
html能識別標簽，text不能

++元素樣式操作++：

1. 直接設置元素樣式值: 通過css()和Attr()用法一樣
2. 增加元素類別：通過addClass(className className1...) $("html").addClass('coderlfy')
3. 切換元素 CSS 類別：使用 toggleClass(class)
4. 刪除元素的css類別：removeClass([class]),可以刪除多個，不加參數就是刪除全部$("html").removeClass("coderlfy");

++頁面元素操作++：

1. 創建節點

var $div = $("<div>sss</div>");
$("body").append($div)

2. 內部插入節點

append()：每個匹配的元素內追加內容
append(function(index,html){}) index是對象在這個集合中的索引值，html是要插入的html

//這部分本來想用圖片但是畫的太丑了還是用代碼來展示更直觀些

//html
<p>前端水好深 </p>

//JQ
$('p').append('<b>國足都贏了韓國，還不擼起袖子干</b>')
//結果：
<p>前端水好深 <b>國足都贏了韓國，還不擼起袖子干</b></p>

appendTo(): 把所有匹配的元素追加到指定的元素中

//html
<p>coder</p>

//JQ
$('<b>lfy</b>').append('p')
//結果：
<p>coder <b>lfy</b></p>

prepend(): 表示插入目標元素內部前面的
內容

prependTo(): 和appendTo()一樣啊

prependTo(function(index, html){})

//這部分本來想用圖片但是畫的太丑了還是用代碼來展示更直觀些

//html
<p>和append使用方式一樣 </p>

//JQ
$('p').prepend('<b>一樣的使用方式</b>')
//結果：
<p><b>一樣的使用方式</b> 和append使用方式一樣 </p>

2. 內部插入節點

after()：在有每個匹配的元素之后插入內容

//html
<p> 外部插入</p>
//JQ 
$('p').after('<b>外部</b>')
//結果
<p>外部插入</p><b>外部</b>

insertAfter()：將所有匹配的的元素插入到指定的元素后面

//html
<p> 外部插入</p>
//JQ 
$('<b>外部</b>').insertAfter('p')
//結果
<p>外部插入</p><b>外部</b>

before()：在每個匹配的元素之前插入內容

//html
<p> 外部插入</p>
//JQ 
$('p').before('<b>外部</b>')
//結果
<b>外部</b><p>外部插入</p>

insertBefore()：將所有匹配的的元素插入到指定的元素前面

//html
<p> 外部插入</p>
//JQ 
$('<b>外部</b>').insertBefore('p')
//結果
<b>外部</b><p>外部插入</p>

3. 復制元素節點

clone();無參數是復制dom元素，參數為true時時把就可以復制元素的所有事件處理

4.替換元素節點

replaceWith(content)----該方法的功能是將所有選擇的元素替換成指定的 HTML 或 DOM 元素，其中參數
content 為被所選擇元素替換的內容

//html
<p>111</p>
//JQ
$('p').replaceWith('<b>替換</b>')
//結果
<b>替換</b>

replaceAll(selector)---該方法的功能是將所有選擇的元素替換成指定 selector 的元素，其中參數 selector 為需要
被替換的元素

//html
<p>111</p>
//JQ
$('<b>替換</b>').replaceAll('p');
//結果
<b>替換</b>

5.包裹元素節點

wrap(html/elem/fn);參數為html：字符串代碼，用與生成元素并包裹所選元素

unwrap():無參數,移除所選元素的父元素或包裹標記

//html 
<strong>包裹</strong>
//JQ
$('strong').wrap('<b></b>')
//結果
<b><strong>包裹</strong></b>

wrapAll(html/elem/fn)：把所有選擇的元素用單個元素包裹起來

//html 
<strong>包裹</strong>
<strong>包裹</strong>
//JQ
$('strong').wrapAll('<b></b>')
//結果
<b>
    <strong>包裹</strong>
    <strong>包裹</strong>
</b>

wrapInner(html/elem/fn):把所有選擇的元素的子內容 ( 包括文本節點 ) 用
字符串代碼包裹起來

//html 
<strong>包裹</strong>
//JQ
$('strong').wrapInner('<b></b>')
//結果
<strong><b>包裹</b></strong>

6. 遍歷元素

each(callback) 回調函數可以接受一個形參 index，從零開始

$('li').each(function(index){...});

7. 遍歷節點

children() 取得匹配元素的子元素集合

next() 取得匹配元素后面緊鄰的同輩元素

prev() 取得匹配元素前面緊鄰的同輩元素

sibling() 取得匹配元素前后所有同輩元素

closest() 取得最近的匹配元素。首先檢查當前元素是否匹配，如果匹配則直接返回元素本身，如果不匹配則向上查找父元素，逐級向上直到找到匹配選擇器的元素，如果什么都沒有則返回一個空的JQ對象（簡單講就是找最近的匹配的父級）

8. JQ的 CSS-DOM 操作

css() height()有參數設置無參數獲取高度 width()

offset() 無參數，獲取元素在當前視窗的相對偏移，返回對象top和left，他只對課件元素有效

var offset = $('div').offset; // divoffset
var left = offset.left; // 獲取左偏移
var top = offset.top; // 獲取右偏移

position() 無參數，作用是獲取元素相對與最近的一個position樣式屬性設置為relative 或者absolute的祖父節點的相對偏移，和offset一樣返回也是top和left用法一樣

scrollTop()和scrollLeft有參數是設置滾動條到指定位置------- 兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離。

$('textarea').scrollTop(300);//元素的垂直滾動條滾動到指定位置
$('textarea').scrollLeft(300);//元素的水平滾動條滾動到指定位置

The End

天哪，總結好累啊，感覺好像后沒啥但是知識點也好多，學習前端要抱著禿頭的精神去學習?。?！