某統(tǒng)計網(wǎng)站的數(shù)據(jù)統(tǒng)計 赘来，使用jQuery的比例占70%左右现喳。我們來看看jQuery 到底做了哪些事情，給開發(fā)者帶來多么大的方便犬辰，能得到這么多的喜愛呢嗦篱？
探索一下jQuery內(nèi)部到底做了什么？
<div class="" id="sss">選項1</div>
<div class="" id="sss">選項2</div>
<div class="" id="sss">選項3</div>
<div class="" id="sss">選項4</div>
<div class="" id="sss">選項5</div>
.red{
color: red;
}
window.jQuery = function (nodeOrSelector) {
var nodes = {}
if (typeof nodeOrSelector === 'string') {
let temp = document.querySelectorAll(nodeOrSelector)
for (let i = 0; i < temp.length; i++) {
nodes[i] = temp[i]
}
nodes.length = temp.length
console.log(nodes)//得到一個純凈的原型鏈
} else {
if (nodeOrSelector instanceof Node) {
nodes = {
0: nodeOrSelector,
length: 1
}
}
}
nodes.addClass = function (value) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(value)
}
}
nodes.setText = function (text) {
var texts = []
if (text === undefined) {
console.log(nodes)
for (let i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent)
}
console.log(texts)
return texts
} else {
for (let i = 0; i < nodes.length; i++) {
console.log(nodes[i])
nodes[i].textContent = text
}
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個 red
$div.setText() // 可將所有 div 的 textContent 變?yōu)閔i hi
首先我們知道 window.$= jQuery幌缝，這表明 $就是jQuery
一般來說灸促，怎么使用jQuery獲取元素 ，回想一下有哪些常用的方式呢涵卵？
- 獲取ul 的子級li元素
$('ul>li')
- 獲取所有的<div>元素
$('div')
3.獲取id為item3的元素
$(item3)
- 獲取class為xx的元素
$('.xx')
首先寫獲取的元素浴栽，一定要搞清楚 獲取的元素的性質(zhì)和各自的特點。
$(item2) 轿偎，傳入的參數(shù) item2 是一個元素的id典鸡，就代表一個node 節(jié)點
其中id選擇器獲取的元素只有一個， 因為 id 是唯一的坏晦。
除此之外萝玷，像class，html中可以有相同的class名昆婿，和標(biāo)簽球碉，不唯一。
上述代碼中仓蛆，html 代碼中多個<div>
獲取div , 獲取的是多個元素睁冬， 所以用document.querySelectorAll()
nodeOrSelector instanceof Node
$(item2), item2 代表的元素是Node 構(gòu)造函數(shù)構(gòu)造的，也說明只傳入了一個節(jié)點看疙。
nodes是偽數(shù)組時豆拨，最好后面返回的數(shù)據(jù)也是偽數(shù)組（對象）的形式。
對比jQuery 獲取文本時狼荞， 當(dāng)text() 傳入?yún)?shù)辽装， 則是設(shè)置元素的文本
不傳參帮碰，就是獲取元素的文本內(nèi)容
對于兩種形式相味， 都存在，才能保證與jQuery本身的方法一致殉挽。
所以需要判斷 傳入的參數(shù)是否 為undefined
undefined 就是指傳入的參數(shù)名已存在丰涉， 但是沒賦值的一種判斷。
如果 $div.addClass('red')傳入的參數(shù)是 字符串斯碌， 就直接傳入一死。
當(dāng) $div.addClass(['red','yellow']) ，參數(shù)是一個數(shù)組傻唾，就必須遍歷數(shù)組投慈，array.forEach(function(){})將每一個class樣式傳給每一個元素承耿。
確定一下主題， 我們平常用到的jQuery 伪煤，相比js而言加袋， 不用寫一長串的API獲取元素， 使用更加簡潔抱既。但是了解內(nèi)部以后职烧， 會知道原來jQuery在我們執(zhí)行獲取時， 其實內(nèi)部調(diào)用了很多方法防泵， 獲取到元素
那么 經(jīng)過事先一個jQuery部分功能的API , 我們知道jQuery在自己要獲取一個或多個元素時蚀之， 內(nèi)部就會自動去查找符合條件的元素返回。當(dāng)使用jQuery方法時捷泞， jQuery會找到j(luò)Query對象的方法足删， 執(zhí)行相關(guān)操作。
jQuery 本質(zhì)就是一個構(gòu)造函數(shù)锁右， 接收一個參數(shù)壹堰， 參數(shù)可能是節(jié)點或者是選擇器， 返回一個方法對象去操作節(jié)點骡湖。
在輕松簡單表象的背后贱纠，jQuery得到的青睞也是付出了努力的不是嗎？哈哈end
