<!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 變?yōu)?hi
</script>
</body>
</html>
1.通過在window.jQuery上添加一個函數聲明命名空間逗爹，從而防止全局變量的產生谷市。
- 考慮到用戶可能傳入的是一個節(jié)點或者是字符串蛔垢，用
typeof nodeOrSelector==='string'進行判斷。(這里很容易把typeof打成typeOf) - 取到用戶輸出的節(jié)點后用
node.parentNode.children來選擇所有兄弟節(jié)點(包括自己)（如果要只選擇兄弟節(jié)點可以對其遍歷迫悠，剔除自身） - 返回兩個方法鹏漆，調用對象的方法傳入必要參數。
- 調取方法時先判斷是否傳入了參數從而將設置text和獲取功能合二為一创泄。
