對jq能熟練運(yùn)用后在回頭發(fā)現(xiàn)，曾今的坑其實(shí)這兩本書多多少少都能提到清酥，當(dāng)時知道有這兩本好書，但是自己卻沒看蕴侣，如今在回首焰轻，真的覺得挺好，作為讀書筆記來分享給大家睛蛛，也是復(fù)習(xí)總結(jié)查漏補(bǔ)缺鹦马。本文以JQ來簡寫JQuery胧谈，鋒利的jq v1.3 jq權(quán)威指南v1.8 主要是由于現(xiàn)在更新太快忆肾，這兩個結(jié)合講2.0以下的jq應(yīng)該還算ok，把這兩本經(jīng)典柔和一下菱肖，就我而言覺得初學(xué)者學(xué)習(xí)鋒利的jq是個很好的選擇客冈，對初學(xué)者很友好

庫和框架？稳强？

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

類庫：類庫可以解決一系列常見編程任務(wù),封裝了方法簡便了操作的一個工具集合
框架： 框框嘛渠缕。鸽素。簡而言之就是大神寫的東西，你要按照他們的規(guī)則亦鳞，約束就能實(shí)現(xiàn)相對應(yīng)的功能馍忽，也是一個類庫的集合體

JQ有什么優(yōu)勢？

本書說道：
JQ強(qiáng)調(diào)的理念是寫得少燕差，做的多（write less遭笋，do more）這句話簡直是縮影

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

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

window.onload 與$(document).ready() 對比（重點(diǎn)：面試常客）

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

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

兩者對比思維導(dǎo)圖

鏈?zhǔn)讲僮鲿鴮懸?guī)范

要好好的利用這個鏈?zhǔn)讲僮鲿啽愫芏嗟钔校唵蔚脑砭褪敲看尾僮鞣祷亓藅his然后可以進(jìn)行下次操作
個人建議不要鏈太長，最好是每鏈一個就換個行,
注意分號的使用

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

JQ對象剧蚣？支竹？DOM對象？鸠按？

JQ 對象就是通過JQ包裝DOM對象后產(chǎn)生的對象
DOM對象就是文檔對象模型礼搁，可以想象成一棵樹，樹里有很多標(biāo)簽啥的目尖，可以操作

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

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

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

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

1. 通過jq.noConflict() 改名

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

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

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

//第二種 匿名函數(shù)
JQuery.noConflict()// 首先歹河，交出控制權(quán)
(function($){
    //內(nèi)部使用$
})(jQuery);

3. JQ先導(dǎo)入齿椅，不想沖突？
   如果是JQ比其他先導(dǎo)入启泣，直接使用jQuery不用交出控制權(quán)

可靠的事件處理機(jī)制涣脚？？

在說優(yōu)點(diǎn)的時候就已經(jīng)說到了寥茫，簡述一下：如果之前用JQ找到的一個對象被刪除了遣蚀，它在內(nèi)部會先做一個判斷是否存在，在運(yùn)行代碼纱耻，減少報錯芭梯，增加執(zhí)行效率

JQ選擇器

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

JQ選擇器種類

css樣式有多少弄喘，JQ就有多少應(yīng)用也很簡單

基本選擇器：

層次選擇器：

簡單過濾選擇器

內(nèi)容過濾選擇器：

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

可見性過濾選擇器：

屬性過濾選擇器：

子元素過濾選擇器：

表單對象屬性過濾選擇器

表單選擇器

打臉中

在這里想說：知識很重要，但是尊重別人的勞動成果更重要敌蚜，總結(jié)后才發(fā)現(xiàn)沒想到寫這些表能這么累桥滨，寫了一半，后來選擇了無情的復(fù)制弛车，這個表出自《jQuery權(quán)威指南（第二版）》我做了點(diǎn)修改齐媒，所有的東西都是從《鋒利的jQuery（第二版）》《jQuery權(quán)威指南（第二版）》和自己的想法來做的讀書筆記

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';//通過設(shè)置和獲取style對象的各種屬性來進(jìn)行改變

++ 元素屬性操作 ++：

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

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

++獲取和設(shè)置元素++：

1. 獲取和設(shè)置元素內(nèi)容

// 沒參數(shù)的時候是獲取唬血，有參數(shù)的時候是設(shè)置
html()//獲取html內(nèi)容
text()//獲取文本內(nèi)容

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

++元素樣式操作++：

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

++頁面元素操作++：

1. 創(chuàng)建節(jié)點(diǎn)

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

2. 內(nèi)部插入節(jié)點(diǎn)

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

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

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

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

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

//html
<p>coder</p>

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

prepend(): 表示插入目標(biāo)元素內(nèi)部前面的
內(nèi)容

prependTo(): 和appendTo()一樣啊

prependTo(function(index, html){})

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

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

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

2. 內(nèi)部插入節(jié)點(diǎn)

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

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

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

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

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

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

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

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

3. 復(fù)制元素節(jié)點(diǎn)

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

4.替換元素節(jié)點(diǎn)

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

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

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

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

5.包裹元素節(jié)點(diǎn)

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

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

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

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

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

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

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

6. 遍歷元素

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

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

7. 遍歷節(jié)點(diǎn)

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

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

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

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

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

8. JQ的 CSS-DOM 操作

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

offset() 無參數(shù)，獲取元素在當(dāng)前視窗的相對偏移酪穿，返回對象top和left与倡，他只對課件元素有效

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

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

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

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

The End

天哪，總結(jié)好累啊溉潭，感覺好像后沒啥但是知識點(diǎn)也好多净响，學(xué)習(xí)前端要抱著禿頭的精神去學(xué)習(xí)！Ｔ辍馋贤！