自己封装两个函数
// 有三个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;
}
- 第一个函数,查询一个节点的兄弟姐妹
首先,先实现以下怎么获取一个节点的兄弟姐妹,并将其全部放到一个伪数组中:
var allChildren = item2.parentNode.children // 先找到item2的爸爸,然后在找到他所有的儿子
var array = {length: 0} // 初始化一个伪数组
for(let i=0;i<allChildren.length;i++){ // 遍历获取到的所有儿子
if(allChildren[i] !== item2){
array[array.length] = allChildren[i] // push到数组的一种方法,因为伪数组没有push方法
array.length += 1
}
}
console.log(array) // {0: div#item1, 1: div#item2, 2: script, length: 3}
封装上面的代码:
// 封装一个函数,接受一个参数
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
}
- 给一个节点添加一个或者多个class
function addClass(node, classes){ // 接受两个参数,一个是需要添加class的节点,另一个是class名组成的数组
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就不添加
上面的代码可见,node.classList出现了两次, 如果出现类似的代码,就存在代码优化的可能
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})
上面的两个函数,都是在操作节点,那么可以将两个函数,使用命名空间设计模式进行整合,使其存在关联性(例如document.getElementById,document.querySelector)
window.xxx = {}
xxx.getSiblings = getSiblings
xxx.addClass = addClass
// 使用
xxx.getSiblings(item3)
xxx.addClass(item3, {'a':true, 'b':false, 'c':true})
- 将两个函数(addClass, setText)封装成一个jquery函数
window.jQuery = function(nodeOrSelector){ // 接受一个参数,可以是node,也可以是一个selector
let nodes = {} // 声明一个对象nodes
if(typeof nodeOrSelector === 'string'){ // 如果是一个selector string
let temp = document.querySelectorAll(nodeOrSelector) // 伪数组
for(let i=0; i<temp.length;i++){
nodes[i] = temp[i]
}
nodes.length = temp.length
}else if(nodeOrSelector instanceof Node){ // 如果是一个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')
请说出div和$div的联系和区别?
答
1.div 返回了一个HTML DOM 对象,$div 返回了一个jquery 对象.
2.$div是包装了dom对象后产生的,无法使用dom对象的任何方法,比如innerHTML
3.如果是jquery 对象,前面加$, 如果是html dom对象,就是普通的命名.
4.div变成$div, 只需要用jquery构造函数将dom对象包装起来就可以了.
5.$div变成div
- jquery对象是一个hash,分别包含了一个key对应所包装的dom 对象, length,还有__proto__原型 object(0), 里面包含了jquery的一个方法和属性.比如addClass,after,ajax等, 所以使用div[0]即可获取到div
- 使用jquery自身所提供的方法, 通过get(index), 也能得到相应的dom对象
6.div的属性方法:getElementById appendChild innerHTML 等
7.$div的属性方法: addClass after append等
