對jq能熟練運用后在回頭發(fā)現(xiàn)，曾今的坑其實這兩本書多多少少都能提到，當時知道有這兩本好書，但是自己卻沒看，如今在回首，真的覺得挺好，作為讀書筆記來分享給大家，也是復(fù)習總結(jié)查漏補缺。本文以JQ來簡寫JQuery，鋒利的jq v1.3 jq權(quán)威指南v1.8 主要是由于現(xiàn)在更新太快，這兩個結(jié)合講2.0以下的jq應(yīng)該還算ok，把這兩本經(jīng)典柔和一下，就我而言覺得初學者學習鋒利的jq是個很好的選擇，對初學者很友好
庫和框架？？
JQ是一個JavaScript的類庫，vue、angular這些是框架，
類庫：類庫可以解決一系列常見編程任務(wù),封裝了方法簡便了操作的一個工具集合
框架： 框框嘛。。簡而言之就是大神寫的東西，你要按照他們的規(guī)則，約束就能實現(xiàn)相對應(yīng)的功能，也是一個類庫的集合體
JQ有什么優(yōu)勢？
本書說道：
JQ強調(diào)的理念是寫得少，做的多（write less，do more）這句話簡直是縮影
- [x] 輕量級 ：v3.20 min版：85k
- [x] 強大的選擇器：利用選擇器可以拿到各種對象
- [x] 可靠的事件處理機制：處理事件時，在預(yù)留退路、循序漸進，和非侵入式的編程思想。
- [x] 出色的DOM封裝：封裝了方法讓大家能夠簡單的使用
- [x] 完善的Ajax：在里面做了很多兼容和HMLHttpRequest的處理
- [x]** 不污染頂級變量** JQ只建立一個JQuery對象，所有函數(shù)方法都在這個對象之下，別名：$，可隨時交出控制權(quán)，也就是個類庫是用$可以快速讓給別的類庫
- [x] 出色的瀏覽器兼容性：用JQ從來不用擔心什么火狐用getAttribute才能獲取之類的
- [x] 隱式迭代： 這個意思就是$('div')它會返回所有的div的集合數(shù)組，這樣就可以少去很多循環(huán)
- [x] 行為層與結(jié)構(gòu)層的分離：HTML結(jié)構(gòu)、CSS表現(xiàn)、JavaScript行為 方便維護
- [x] 豐富的插件庫：遇到問題好多同學第一想到就是找個插件吧（哈哈）
- [x] 支持鏈式調(diào)用：要注意代碼書寫規(guī)范，好玩還很炫酷
- [x] 完善的文檔豐富的插件庫
- [x] 開源
這也就是為什么JQ久盛不衰的原因了
window.onload 與$(document).ready() 對比（重點：面試?？停?/h3>
$(function(){}) 是$(document).ready()簡寫
$(function(){}) 是$(document).ready()簡寫
為什么要有這什么onload 什么ready：如果要寫代碼在頭部，dom還沒被渲染，自然操作不了DOM，想要操作DOM就放在底下或者加這些，大致意思就是等待加載好了之后的意思
鏈式操作書寫規(guī)范
要好好的利用這個鏈式操作會簡便很多，簡單的原理就是每次操作返回了this然后可以進行下次操作
個人建議不要鏈太長，最好是每鏈一個就換個行,
注意分號的使用
$('.coderlfy').addClass('go')
.click(function(){...})
.hide();
JQ對象？？DOM對象？？
JQ 對象就是通過JQ包裝DOM對象后產(chǎn)生的對象
DOM對象就是文檔對象模型，可以想象成一棵樹，樹里有很多標簽啥的，可以操作
JQ與DOM對象相互轉(zhuǎn)換：通過$()這個工廠方法進行封裝成JQ對象，只有JQ才能操作JQ的函數(shù)方法
var dx //這是一個dom對象
var $dx //這是一個JQ對象
//dom轉(zhuǎn)JQ
$(dx)
//JQ轉(zhuǎn)DOM
$dx[0]
JQ和其他庫沖突時該怎么辦？？
這個問題曾今筆者被問過，嘎嘎，印象深刻
- 通過jq.noConflict() 改名
var $JQ = noConflict();// $被交出控制權(quán)。$JQ頂替$
- 不想改名怎么辦？還想不沖突？有兩種方法
//第一種
JQuery.noConflict()// 首先，交出控制權(quán)
JQuery(fucntion($){
//內(nèi)部就能使用$了
})
//第二種 匿名函數(shù)
JQuery.noConflict()// 首先，交出控制權(quán)
(function($){
//內(nèi)部使用$
})(jQuery);
- JQ先導(dǎo)入，不想沖突？
如果是JQ比其他先導(dǎo)入，直接使用jQuery不用交出控制權(quán)
可靠的事件處理機制？？
在說優(yōu)點的時候就已經(jīng)說到了，簡述一下：如果之前用JQ找到的一個對象被刪除了，它在內(nèi)部會先做一個判斷是否存在，在運行代碼，減少報錯，增加執(zhí)行效率
JQ選擇器
這個選擇器很多，大家選擇著看
css樣式有多少，JQ就有多少應(yīng)用也很簡單
基本選擇器：
| 選擇器 | 用法 | 描述 | 返回值 |
|---|---|---|---|
| 標簽選擇器 | $('#lfy') | 以文檔唯一標識符號作為選擇符 | 單個元素 |
| 類選擇器 | $('.lfy') | 以文檔元素的class作為選擇符 | 元素集合 |
| 群組選擇器 | $('a,h1,div') | 多個選擇符操作 | 元素集合 |
| 通配符選擇器 | $('*') | 全部元素 | 元素集合 |
層次選擇器：
| 選擇器 | 用法 | 描述 | 返回 |
|---|---|---|---|
| 后代選擇器 | $('ul li') | 選擇了ul的后代li | 元素集合 |
| 父子選擇器 | $('ul>li') | 根據(jù)父元素匹配子元素 | 元素集合 |
| 相鄰選擇器 | $('a+div') | 匹配所有緊接在 a 元素后的相鄰元素 | 元素集合 |
| 兄弟選擇器 | $('a~div') | 匹配所有緊接在 a 元素后的所有兄弟元素 | 元素集合 |
簡單過濾選擇器
| 選擇器 | 用法 | 描述 | 返回 |
|---|---|---|---|
| first() 或者：fires | $("li:first") | 獲取第一個元素 | 單個元素 |
| last() 或者：last | $("li:last") | 獲取最后一個元素 | 單個元素 |
| :not(selector) | $("li:not(.NotClass)") | 獲取除了指定的選擇器意外的所有元素 | 元素集合 |
| ：even | $("li:even") | 獲取所有索引值為偶數(shù)的元素，索引號從 0 開始 | 元素集合 |
| ：odd | $("li:odd") | 獲取所有索引值為基數(shù)的元素，索引號從 0 開始 | 元素集合 |
| ：eq(index) | $("li:eq(1)") | 獲取指定索引值的元素，索引號從 0 開始 | 單個元素 |
| :gt(index) | $("li:eq(1)") | 獲取所有大于給定索引值的元素，索引號從 0 開始 | 元素集合 |
| :lt(index) | $("li:lt(1)") | 獲取所有小于給定索引值的元素，索引號從 0 開始 | 元素集合 |
| :header | $('a~div') | 獲取所有標題類型的元素，如 h1、h2…… | 元素集合 |
| :animated | $('a~div') | 獲取正在執(zhí)行動畫效果的元素 | 元素集合 |
內(nèi)容過濾選擇器：
| 選擇器 | 用法 | 描述 | 返回 |
|---|---|---|---|
| :contains(text) | $("div:contains('A')") | 獲取包含給定文本的元素 | 元素集合 |
| :empty | $("div:empty") | 獲取所有不包含子元素或者文本的空元素 | 元素集合 |
| :has(selector) | $("div:has(span)") | 獲取含有選擇器所匹配的元素 | 元素集合 |
| :parent | $("div:parent") | 獲取含有子元素或者文本的元素 | 元素集合 |
tip：在 :contains(text) 內(nèi)容過濾選擇器中，如果是查找字母，則有大小寫的區(qū)別
可見性過濾選擇器：
| 選擇器 | 用法 | 描述 | 返回 |
|---|---|---|---|
| :hidden | $("div:hidden") | 獲取所有不可見元素，或者 type 為 hidden 的元素 | 元素集合 |
| :visible | $("div:visible") | 獲取所有的可見元素 | 元素集合 |
屬性過濾選擇器：
| 選擇器 | 用法 | 描述 | 返回 |
|---|---|---|---|
| [attribute] | $("div[id]") | 獲取包含給定屬性的元素 | 元素集合 |
| [attribute=value] | $("div[id = 'lfy']") | 獲取等于~ | 元素集合 |
| [attribute!=value] | $("div[id ！= 'lfy']") | 獲取不等于~ | 元素集合 |
| [attribute^=value] | $("div[id ^= 'lfy']") | 獲取以某個值開頭的屬性 | 元素集合 |
| [attribute$=value] | $("div[id $= 'lfy']") | 以~結(jié)尾 | 元素集合 |
| [attribute*=value] | $("div[id *= 'lfy']") | 獲取包含~ | 元素集合 |
| [selector1][selector2][selectorN] | $("div[id='divAB'][title*='B']") | 獲取滿足多個條件的復(fù)合屬性的元素 | 元素集合 |
子元素過濾選擇器：
| 選擇器 | 用法 | 描述 | 返回 |
|---|---|---|---|
| :nth-child(eq、even、odd、index) | $("li:nth-child(2)") | 獲取包含給定屬性的元素 | 元素集合 |
| :first-child | $("li:first-child") | 獲取每個父元素下的第一個子元素 | 元素集合 |
| :last-child | $("li:last-child") | 獲取每個父元素下的最后一個子元素 | 元素集合 |
| :only-child | $("li:only-child") | 獲取每個父元素下的僅有一個子元素 | 元素集合 |
表單對象屬性過濾選擇器
| 選擇器 | 用法 | 描述 | 返回 |
|---|---|---|---|
| :enabled | $("#form1 input:enabled") | 獲取表單中所有屬性為可用的元素 | 元素集合 |
| :disabled | $("#form1 input:disabled") | 獲取表單中所有屬性為不可用的元素 | 元素集合 |
| :checked | $("#form1 input:checked") | 獲取表單中所有被選中的元素 | 元素集合 |
| :selected | $("select option:selected") | 獲取表單中所有被選中 option 的元素 | 元素集合 |
表單選擇器
| 選擇器 | 用法 | 描述 | 返回 |
|---|---|---|---|
| :input | $("#form1 :input") | 獲取所有 input、textarea、select 素 | 元素集合 |
| :text | $("#form1 :text") | 獲取所有單行文本框 | 元素集合 |
| :password | $("#form1 :password") | 密碼 | 元素集合 |
| :radio | $("#form1 :radio") | 獲radio | 元素集合 |
| :checkbox | $("#form1 :checkbox") | 獲取checkbox | 元素集合 |
| :submit | $("#form1 :submit") | 獲取submit | 元素集合 |
| :image | $("#form1 :image") | 獲取image | 元素集合 |
| :reset | $("#form1 :reset") | 獲取reset | 元素集合 |
| :button | $("#form1 :button") | 獲取button | 元素集合 |
| :file | $("#form1 :file") | 獲取file | 元素集合 |
在這里想說：知識很重要，但是尊重別人的勞動成果更重要，總結(jié)后才發(fā)現(xiàn)沒想到寫這些表能這么累，寫了一半，后來選擇了無情的復(fù)制，這個表出自《jQuery權(quá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對象的各種屬性來進行改變
++ 元素屬性操作 ++：
- 獲取元素屬性：通過Attr(name)來進行查找屬性
- 設(shè)置元素屬性：設(shè)置單個屬性：Attr(key,value) 設(shè)置多個屬性 attr({key0:value0, key1:value1})
- 刪除元素屬性：通過removeAttr(name)
說道這個Attr()，剛學習的時候總是把它和css()搞混,其實Attr就是弄這個元素上的屬性，而css就只設(shè)置樣式等等的
//屬性就是標簽上的id/src這些
++獲取和設(shè)置元素++：
- 獲取和設(shè)置元素內(nèi)容
// 沒參數(shù)的時候是獲取，有參數(shù)的時候是設(shè)置
html()//獲取html內(nèi)容
text()//獲取文本內(nèi)容
html()和text() 這個就像是原生中的innerHTML和innerText
html能識別標簽，text不能
++元素樣式操作++：
- 直接設(shè)置元素樣式值: 通過css()和Attr()用法一樣
- 增加元素類別：通過addClass(className className1...)
$("html").addClass('coderlfy') - 切換元素 CSS 類別：使用 toggleClass(class)
- 刪除元素的css類別：removeClass([class]),可以刪除多個，不加參數(shù)就是刪除全部
$("html").removeClass("coderlfy");
++頁面元素操作++：
- 創(chuàng)建節(jié)點
var $div = $("<div>sss</div>");
$("body").append($div)
- 內(nèi)部插入節(jié)點
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(): 表示插入目標元素內(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>
- 內(nèi)部插入節(jié)點
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>
- 復(fù)制元素節(jié)點
clone();無參數(shù)是復(fù)制dom元素，參數(shù)為true時時把就可以復(fù)制元素的所有事件處理
4.替換元素節(jié)點
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é)點
wrap(html/elem/fn);參數(shù)為html：字符串代碼，用與生成元素并包裹所選元素
unwrap():無參數(shù),移除所選元素的父元素或包裹標記
//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é)點 ) 用
字符串代碼包裹起來
//html
<strong>包裹</strong>
//JQ
$('strong').wrapInner('<b></b>')
//結(jié)果
<strong><b>包裹</b></strong>
- 遍歷元素
each(callback) 回調(diào)函數(shù)可以接受一個形參 index，從零開始
$('li').each(function(index){...});
- 遍歷節(jié)點
children() 取得匹配元素的子元素集合
next() 取得匹配元素后面緊鄰的同輩元素
prev() 取得匹配元素前面緊鄰的同輩元素
sibling() 取得匹配元素前后所有同輩元素
closest() 取得最近的匹配元素。首先檢查當前元素是否匹配，如果匹配則直接返回元素本身，如果不匹配則向上查找父元素，逐級向上直到找到匹配選擇器的元素，如果什么都沒有則返回一個空的JQ對象（簡單講就是找最近的匹配的父級）
- JQ的 CSS-DOM 操作
css() height()有參數(shù)設(shè)置無參數(shù)獲取高度 width()
offset() 無參數(shù)，獲取元素在當前視窗的相對偏移，返回對象top和left，他只對課件元素有效
var offset = $('div').offset; // divoffset
var left = offset.left; // 獲取左偏移
var top = offset.top; // 獲取右偏移
position() 無參數(shù)，作用是獲取元素相對與最近的一個position樣式屬性設(shè)置為relative 或者absolute的祖父節(jié)點的相對偏移，和offset一樣返回也是top和left用法一樣
scrollTop()和scrollLeft有參數(shù)是設(shè)置滾動條到指定位置------- 兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側(cè)的距離。
$('textarea').scrollTop(300);//元素的垂直滾動條滾動到指定位置
$('textarea').scrollLeft(300);//元素的水平滾動條滾動到指定位置
天哪，總結(jié)好累啊，感覺好像后沒啥但是知識點也好多，學習前端要抱著禿頭的精神去學習?。。?/p>
