方方讲课了
一、封装函数
1.function getSiblings(node){ } 和function addClass(node,classes){ }
(1)HTML代码块
<body>
<ul>
<li id="item1">选项1</li>
<li id="item2">选项2</li>
<li id="item3">选项3</li>
<li id="item4">选项4</li>
<li id="item5">选项5</li>
</ul>
</body>
(2)JS代码块
（封装前）
//返回array
var allChildren=item3.parentNode.children
var array={length:0}
for (let i=0;i<allChildren.length;i++){
if(allChildren[i]!==item3){
array[array.length]=allChildren[i]
array.length+=1
}
}
console.log(array)
//修改class
var classes={'a':true,'b':false,'c':true}
for (let key in classes){
var value=classes[key]
if(value){
item3.classList.add(key)
}else{
item3.classList.remove(key)
}
}
(封装后）
//开始封装，使用function getSiblings(node){ }
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
}
console.log(getSiblings(item3))
//开始封装，使用function addClass(node,classes){ }
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})
二、命名空间
window.ffdom={}
ffdom.getSiblings=function(node){
var allChildren=node.parentNode.children
var array={lenth:0}
for(let i=0;i<allChildren.length;i++){
if (allChildren[i]!==node){
array[array.length]=allChildren[i]
array.length+=1
}
}
return array
}
ffdom.addClass=function(node,classes){
classes.forEach( (value)=>node.classList.add(value) )
}
ffdom.getSiblings(item3)
ffdom.addClass(item3,['a','b','c'])
//上面两行代码可以更换为以下两行
//item3.getSiblings()
//item3.addClass(['a','b','c'])
三、把node放在前面
方法一
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
}
Node.prototype.addClass=function(classes){
classes.forEach( (value)=>this.classList.add(value) )
}
//item3.getSiblings()
//item3.addClass(['a','b','c'])
//下面两句加call的代码和上面两句作用相同
item3.getSiblings.call(item3)
item3.addClass.call(item3,['a','b','c'])
方法二
window.Node2=function(node){
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
},
addClass:function(classes){
classes.forEach((value)=>node.classList.add(value))
}
}
}
var node2=Node2(item3)
node2.getSiblings()
node2.addClass(['a','b','c'])
四、引入jQuery
版本一
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
},
addClass:function(classes){
classes.forEach( (value)=>node.classList.add(value))
}
}
}
var node2=jQuery('#item3')
node2.getSiblings()
node2.addClass(['a','b','c'])
版本二
window.jQuery=function(nodeOrSelector){
let 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
}else if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,
length:1
}
}
nodes.addClass=function(classes){
classes.forEach( (value)=>{
for(i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}
})
}
nodes.getText=function(){
var texts=[]
for(let i=0;i<nodes.length;i++){
texts.push(nodes[i].textContent)
}
return texts
}
nodes.setText=function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent=text
}
}
return nodes
}
var node2=jQuery('ul>li')
node2.addClass(['pink'])
node2.setText('hi')
版本三
window.jQuery=function(nodeOrSelector){
let 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
}else if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,
length:1
}
}
nodes.addClass=function(classes){
classes.forEach( (value)=>{
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}
})
}
nodes.text=function(text){
if(text===undefined){
var texts=[]
for(let i=0;i<nodes.length;i++){
texts.push(nodes[i].textContent)
}
return texts
}else{
for(let i=0;i<nodes.length;i++){
nodes[i].textContent=text
}
}
}
return nodes
}
var node2=jQuery('ul>li')
node2.addClass(['blue'])
node2.text('hi')
版本四
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>
<button id="x">X</button>
</body>
</html>
CSS
.red{
color:red;
}
.blue{
color:blue;
}
.green{
color:green;
}
.yellow{
color:yellow;
}
.black{
color:black;
}
JS
var nodes=jQuery('ul>li')
var classes=['red','blue','green','yellow','black']
x.onclick = function(){
nodes.addClass(function(index,currentClass){
return classes[index]
})
}
版式五
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li class="red">选项1</li>
<li class="red">选项2</li>
<li class="red">选项3</li>
<li class="red">选项4</li>
<li class="red">选项5</li>
</ul>
<button id="x">X</button>
</body>
</html>
CSS
.red{
color:red;
}
.blue{
color:blue;
}
.green{
color:green;
}
.yellow{
color:yellow;
}
.black{
color:black;
}
JS
var nodes=jQuery('ul>li')
var classes=['red','blue','green','yellow','black']
x.onclick = function(){
nodes.removeClass('red').addClass('green')
}
版本六
//版本五的JS修改版
var $nodes=$('ul>li')
var classes=['red','blue','green','yellow','black']
x.onclick = function(){
$nodes.removeClass('red').addClass('green')
}
五、总结
1.命名空间的好处：便于寻找和表述
2.hash表是key，value设计
3.jQuery实质上是一个构造函数
4.闭包的解释：如果一个函数用到了它在外面声明的变量，那么这个变量加上这个函数就叫做闭包
5.闭包的好处：可以一直用nodes来操作api
