html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
</body>
</html>
js部分
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(){
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.lenght; i++){
nodes[i].textContent=text
}
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
- html 就是加了几个div，没什么好说的。
- js代码分为两部分，第一部分是封装jQuery的API过程。第二部分是使用jQuery的API
- 简单说，封装jQuery的API就是个把一堆代码封装成函数的过程，这个跟普通封装函数没有什么区别。这部分分为3步：
1 获取并重构nodes对象，也是个伪数组，有length。注意先要初始化nodes，即 let nodes = {};,然后我们在获取nodes对象的成员时，使用了DOM的API - querySelectorAll。
2.1给对象nodes添加方法addClass（函数属性）,说白了就是nodes本来就是个对象，给对象加个（key）属性addClass，属性值(value)是个函数，这样我们在使用属性就能调用这个函数。在编写addClass这个函数我们用到了数组属性forEach，一定要记得传数组参数。还用到了箭头函数以及DOM的API - ndoe.classList.add。
2.2 同理，给对象nodes添加方法setText（函数属性），这个函数也用了DOM的API - node.textContent。
3 return nodes,一定要记得返回值，函数一定要有返回值，不然就给你 return undefined。
- 第二部分，jQuery的API使用。
-
window.[图片上传失败...(image-c5563c-1557067129259)]
就是jQuery这个函数，可以少写单词。
-
var [图片上传失败...(image-679515-1557067129259)]
('div'),此时[图片上传失败...(image-9d3cae-1557067129259)]
，这样就能清楚地知道这是jQuery的对象，要使用jQuery的API,而不是使用DOM的API。
-
[图片上传失败...(image-184b3f-1557067129259)]
div这个对象调用了它的属性函数addClass，同时传了一个数组参数['red']，注意必须是数组，因为我们用了forEach。这里还要注意一点是[图片上传失败...(image-c27c23-1557067129259)]
div.addClass(['red'])实际上是[图片上传失败...(image-a8d18-1557067129259)]
div,['red'])的简写，后者是js函数调用的规范版。.前面的东西也是作为参数传入到函数里面的。
-
[图片上传失败...(image-50d2ad-1557067129258)]
div调用了它的属性函数setText，实际传入了两个参数$div和'hi'。
网友评论