实现一个jQuery的API心得
2018-02-05 本文已影响0人
钢笔与橡皮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red{ background:red; }
.blue{ background:blue }
</style>
</head>
<body>
<div id='xxx'>nihao</div>
<div>nihao</div>
<div>nihao</div>
<div>nihao</div>
<div>nihao</div>
<script>
window.jQuery = function (nodeOrSelector) {
var node
if(typeof nodeOrSelector==='string'){
node=document.querySelector(nodeOrSelector)
}else{
node=nodeOrSelector
}
var allChildren = node.parentNode.children
return{
addClass:function(color){
for (let i = 0; i < allChildren.length; i++) {
allChildren[i].classList.add(color)
}
},
text:function(text){
if(text===undefined){
var texts=[]
for (let i = 0; i < allChildren.length; i++) {
texts.push(allChildren[i].textContent)
}
return texts
}
else{
for (let i = 0; i < allChildren.length; i++){
allChildren[i].textContent=text
}
}
}
}
}
window.$ = jQuery
var $div = $('div')
$div.addClass('blue') // 可将所有 div 的 class 添加一个 red
$div.text('hi') // 可将所有 div 的 textContent 变为 hi
</script>
</body>
</html>
1.通过在window.jQuery上添加一个函数声明命名空间，从而防止全局变量的产生。
- 考虑到用户可能传入的是一个节点或者是字符串，用
typeof nodeOrSelector==='string'进行判断。(这里很容易把typeof打成typeOf) - 取到用户输出的节点后用
node.parentNode.children来选择所有兄弟节点(包括自己)（如果要只选择兄弟节点可以对其遍历，剔除自身） - 返回两个方法，调用对象的方法传入必要参数。
- 调取方法时先判断是否传入了参数从而将设置text和获取功能合二为一。
