一、简述
为了防止和全局对象冲突,先来个window.$,以后美元符号就是我们的jquery的唯一标识。声明jquery变量最好在前面加美元符号,以表示这是jquery查找到的,应该使用jquery的原型链。
二、选择器
就是用javascript自带的querySelectorAll来查找节点,查找到的结果应该放在对象构成的伪数组里,以便更好的添加方法。
三、addClass()
addClass()遇到的问题是函数传入的参数是不定参数,一开始没注意直接遍历了,结果把字符串遍历了。然后又想起来了arguments...
四、text()
这个很简单,直接换了就行……
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>sb</div>
<div>sb</div>
<script>
window.jQuery = function(nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector === "string"){
let item = document.querySelectorAll(nodeOrSelector)
for(let i=0;i<item.length;i++){
nodes[i]=item[i]
}
nodes.length = item.length
}
else if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,length:1
}
}
nodes.addClass = function(){
for(let x=0;x<arguments.length;x++){
for(let y=0;y<nodes.length;y++){
nodes[y].classList.add(arguments[x])
}
}
}
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')
</script>
</body>
</html>
网友评论