自己封裝兩個(gè)函數(shù)
// 有三個(gè)div
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
.red{
background: red;
}
div{
width:100px;
height:100px;
border: 1px solid green;
}
- 第一個(gè)函數(shù),查詢一個(gè)節(jié)點(diǎn)的兄弟姐妹
首先,先實(shí)現(xiàn)以下怎么獲取一個(gè)節(jié)點(diǎn)的兄弟姐妹,并將其全部放到一個(gè)偽數(shù)組中:
var allChildren = item2.parentNode.children // 先找到item2的爸爸,然后在找到他所有的兒子
var array = {length: 0} // 初始化一個(gè)偽數(shù)組
for(let i=0;i<allChildren.length;i++){ // 遍歷獲取到的所有兒子
if(allChildren[i] !== item2){
array[array.length] = allChildren[i] // push到數(shù)組的一種方法,因?yàn)閭螖?shù)組沒(méi)有push方法
array.length += 1
}
}
console.log(array) // {0: div#item1, 1: div#item2, 2: script, length: 3}
封裝上面的代碼:
// 封裝一個(gè)函數(shù),接受一個(gè)參數(shù)
function getSiblings(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
}
- 給一個(gè)節(jié)點(diǎn)添加一個(gè)或者多個(gè)class
function addClass(node, classes){ // 接受兩個(gè)參數(shù),一個(gè)是需要添加class的節(jié)點(diǎn),另一個(gè)是class名組成的數(shù)組
for(let key in classes){
var value = classes[key]
if(value){
node.classList.add(key)
}else{
node.classList.remove(key)
}
}
}
addClass(item3,{'a':true, 'b':false, 'c':true}) // 如果是true就添加,false就不添加
上面的代碼可見(jiàn),node.classList出現(xiàn)了兩次, 如果出現(xiàn)類似的代碼,就存在代碼優(yōu)化的可能
function addClass(node, classes){
for(let key in classes){
var value = classes[key]
var methodName = value ? 'add' : 'remove'
node.classList[methodName](key)
}
}
addClass(item3,{'a':true, 'b':false, 'c':true})
上面的兩個(gè)函數(shù),都是在操作節(jié)點(diǎn),那么可以將兩個(gè)函數(shù),使用命名空間設(shè)計(jì)模式進(jìn)行整合,使其存在關(guān)聯(lián)性(例如document.getElementById,document.querySelector)
window.xxx = {}
xxx.getSiblings = getSiblings
xxx.addClass = addClass
// 使用
xxx.getSiblings(item3)
xxx.addClass(item3, {'a':true, 'b':false, 'c':true})
- 將兩個(gè)函數(shù)(addClass, setText)封裝成一個(gè)jquery函數(shù)
window.jQuery = function(nodeOrSelector){ // 接受一個(gè)參數(shù),可以是node,也可以是一個(gè)selector
let nodes = {} // 聲明一個(gè)對(duì)象nodes
if(typeof nodeOrSelector === 'string'){ // 如果是一個(gè)selector string
let temp = document.querySelectorAll(nodeOrSelector) // 偽數(shù)組
for(let i=0; i<temp.length;i++){
nodes[i] = temp[i]
}
nodes.length = temp.length
}else if(nodeOrSelector instanceof Node){ // 如果是一個(gè)node
nodes = {0: nodeOrSelector, length: 1}
}
nodes.addClass = function(classes){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}
}
nodes.setText = function(text){
for(let i =0;i < nodes.length;i++){
nodes[i].textContent = text
}
}
return nodes
}
// 使用
window.$ = jQuery
var $div = $('div')
$div.addClass('red')
$div.setText('hi')
image
面試題
var div = document.getElementById('x')
var $div = $('#x')
請(qǐng)說(shuō)出div和$div的聯(lián)系和區(qū)別?
答
1.div 返回了一個(gè)HTML DOM 對(duì)象,$div 返回了一個(gè)jquery 對(duì)象.
2.$div是包裝了dom對(duì)象后產(chǎn)生的,無(wú)法使用dom對(duì)象的任何方法,比如innerHTML
3.如果是jquery 對(duì)象,前面加$, 如果是html dom對(duì)象,就是普通的命名.
4.div變成$div, 只需要用jquery構(gòu)造函數(shù)將dom對(duì)象包裝起來(lái)就可以了.
5.$div變成div
- jquery對(duì)象是一個(gè)hash,分別包含了一個(gè)key對(duì)應(yīng)所包裝的dom 對(duì)象, length,還有__proto__原型 object(0), 里面包含了jquery的一個(gè)方法和屬性.比如addClass,after,ajax等, 所以使用div[0]即可獲取到div
- 使用jquery自身所提供的方法, 通過(guò)get(index), 也能得到相應(yīng)的dom對(duì)象
6.div的屬性方法:getElementById appendChild innerHTML 等
7.$div的屬性方法: addClass after append等
