作業(yè)題
- HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>選項(xiàng)1</div>
<div>選項(xiàng)2</div>
<div>選項(xiàng)3</div>
</body>
</html>
- CSS代碼
.red{
color:red;
}
- JS代碼
window.jQuery = function(nodeOrSelector){//先接受一個(gè)節(jié)點(diǎn)或者選擇器
let nodes = {}//聲明一個(gè)空的偽數(shù)組
if(typeof nodeOrSelector === 'string'){//如果接受的是一個(gè)字符串
let temp = document.querySelectorAll(nodeOrSelector)//建立一個(gè)臨時(shí)的偽數(shù)組
for(let i=0;i<temp.length;i++){
nodes[i] = temp[i]//遍歷一遍，放進(jìn)nodes，獲得一個(gè)只有key:value和length和__proto__的純凈的偽數(shù)組
} nodes.length = temp.length
}else if(nodeOrSelector instanceof node){//如果是一個(gè)節(jié)點(diǎn)营曼，就封裝成偽數(shù)組
nodes = {0:nodeOrSelector,length:1}
}
nodes.addClass = function (classes){//給nodes添加addClass屬性
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(classes)//用的是DOM的API
}
}
nodes.setText = function (text){給nodes添加setText屬性
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
return nodes//把nodes送出去
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個(gè) red
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi
jQuery 接受舊節(jié)點(diǎn)囊扳，返回新的對(duì)象，新API調(diào)用的還是DOM得API
學(xué)習(xí)jQuery的過(guò)程净蚤，基本思路
- 封裝數(shù)組
把節(jié)點(diǎn)的所有兄弟（不包括自己）放進(jìn)一個(gè)偽數(shù)組
HTML代碼
<body>
<ul>
<li id="item1">選項(xiàng)1</li>
<li id="item2">選項(xiàng)2</li>
<li id="item3">選項(xiàng)3</li>
<li id="item4">選項(xiàng)4</li>
<li id="item5">選項(xiàng)5</li>
</ul>
</body>
JS代碼第一步，找到所有兄弟茉贡，放進(jìn)偽數(shù)組
var allChildren = node.parentNode.children//獲得節(jié)點(diǎn)node的父節(jié)點(diǎn)的所有子標(biāo)簽
var array = { length: 0 }
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {//如果子標(biāo)簽不是node自己塞栅，而是他的所有兄弟
array[array.length] = allChildren[i]//把他們放進(jìn)array偽數(shù)組里，這里不用array[i] = allChild[i]的原因是i可能會(huì)跳過(guò)一個(gè)腔丧，不能一一對(duì)應(yīng)放椰。
array.length += 1//每放進(jìn)一個(gè)，length+1
}
}
JS代碼第二步愉粤，封裝成函數(shù)
function getSiblings(node) { //這就叫API砾医，node就是需要外部輸入的節(jié)點(diǎn).函數(shù)名叫g(shù)etSiblings
var allChildren = node.parentNode.children
var array = {
length: 0
}
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array//把這個(gè)偽數(shù)組送出去
}
getSiblings(item3)//調(diào)用函數(shù)，獲取item3這個(gè)節(jié)點(diǎn)的所有兄弟
注：判斷子標(biāo)簽是不是給定的節(jié)點(diǎn)自己不用==或者衣厘！=是因?yàn)檫@兩個(gè)太復(fù)雜了如蚜。
- 命名空間
2.1 參照DOM的API命名，document.xxx()影暴，我們也可以聲明一個(gè)變量比如
window.mydom = {}
mydom.getSiblings = getSliblings
mydom.getSiblings(item3)//使用API
2.2 命名空間的好處：
1 那么為什么要使用命名空間呢错邦，假如你封裝了很多API，你想要?jiǎng)e人也能使用這個(gè)工具型宙，就取個(gè)名字比如mydom撬呢，方便宣傳，能讓別人一眼知道該去哪里找到你的API妆兑。
2 如果不使用命名空間魂拦，比如別人也聲明了一個(gè)getSiblings = xxx毛仪，那么就會(huì)被覆蓋掉。
命名空間后的代碼
window.mydom = {} /*yui*/
mydom.getSiblings = function (node) {
var allChildren = node.parentNode.children
var array = { length: 0 }
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
}
2.3 但是每次調(diào)用需要輸入mydom.getSiblings(item3)有點(diǎn)麻煩芯勘，為什么不能直接輸入item3.getSiblings()呢箱靴。怎么實(shí)現(xiàn)呢？來(lái)看這個(gè)例子：我們?cè)?code>Node的公有屬性中直接添加一個(gè)函數(shù)
Node.prototype.getSiblings = function (){ console.log(1)}
item3.getSliblings() //1
我們來(lái)修改下上面的封裝函數(shù)
Node.prototype.getSiblings = function () {
var allChildren = this.parentNode.children
var array = { length: 0 }
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== this) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
}
item3.getSiblings ()
注：為什么使用this就能獲取node呢荷愕？因?yàn)?code>item3.getSiblings ()
等同于item3.getSiblings.call(item3)
這樣直接在原型鏈上添加函數(shù)的缺點(diǎn)：萬(wàn)一別人也添加了相同的衡怀，就會(huì)覆蓋。
換一種方法：
window.node2 = function(node){//node就是需要操作的那個(gè)節(jié)點(diǎn)
return{//返回的是一個(gè)對(duì)象路翻，key為getSiblings狈癞，value為function(){}
getSiblings:function(){}
}
}
var node2 = node2(item3)//item3就是函數(shù)里的node
node2.getSiblings()
把setSiblings的函數(shù)體放進(jìn)去
window.node2 = function(node){//node就是需要操作的那個(gè)節(jié)點(diǎn)
return{//返回的是一個(gè)對(duì)象茄靠，key為getSiblings茂契，value為function(){}
getSiblings:function(){
var allChildren = this.parentNode.children
var array = { length: 0 }
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== this) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
}
}
}
var node2 = node2(item3)//item3就是函數(shù)里的node
node2.getSiblings()
這樣就實(shí)現(xiàn)了使用node2.getSiblings()的需求
把代碼中的node2改成jQuery
window.jQuery= function(node){
return{
getSiblings:function(){
var allChildren = this.parentNode.children
var array = { length: 0 }
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== this) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
}
}
}
var node2 = jQuery(item3)
node2.getSiblings()
這就是jQuery的基本思路。
jQuery功能更加強(qiáng)大慨绳，不僅可以接受node節(jié)點(diǎn)掉冶，還能接受選擇器
window.jQuery= function(nodeOrSelector){
let node
if (typeof nodeOrSelector === 'string'){
node = document.querySelector(nodeOrSelector)
}else{ node = nodeOrSelector}
return{
getSiblings:function(){
var allChildren = node.parentNode.children
var array = { length: 0 }
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
}
}
}
var node2 = jQuery('#item3')
node2.getSiblings()
