封装函数作业回顾
2019-02-02 本文已影响0人
松鼠煮鳜鱼
作业：
image.png
分析：all div 加 class="red"
-
判断 后 获取 选择器or节点
选择器---返回hash： document.querySelectorAll | document.querySelector区别
image.png
节点---放到hash里： instanceof Node
nodes = { 0:nodeorSelect, length:1 }
- 遍历这堆hash
forEach() 方法对数组的每个元素执行一次提供的函数。 - .classList.add(形参名)
.textContent = 形参名
如果你设置了 textContent 属性, 子节点会被移除!!!!!
nodes.addClass = function (形参) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(形参)
}
}
nodes.forEach.
4.往自己构造的函数squirreldom里挂
window.squirreldom = function(){
let nodes
return nodes
}
5.用一用
window.$ = squirreldom
var $div = $('div')
$div.addClass('red')
$div.setText('hi')
代码：
<!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>
<!-- <script src="http://code.jquery.com/jquery-latest.js"></script> -->
<style>
#apple {
width: 100px;
height: 100px;
border: 1px solid green;
}
#pear {
width: 100px;
height: 100px;
border: 1px solid green;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="apple"></div>
<div id="pear"></div>
<script>
window.jQuery = function (nodeorSelect) {
let nodes
if (typeof nodeorSelect === 'string') {
nodes = document.querySelectorAll(nodeorSelect)
} else if (nodes instanceof Node) {
nodes = {
0: nodeorSelect,
length: 1
}
}
//加一个属性
nodes.addClass = function (name) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(name)
}
}
//加一个属性 forEach箭头函数 （不会）
// nodes.forEach((color) => nodes.classList.add(color))
//加一个属性 forEach函数 （不会）
// nodes.addClass= function()
// }
//加一组属性（不会）
// nodes.addClass = function (classes) {
// classes.forEach((value) => {
// for (let i = 0; i < nodes.length; i++) {
// nodes[i].classList.add(value)
// }
// })
// }
nodes.setText = function (text) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
console.log($div)
$div.addClass('red')
$div.setText('hi')
</script>
</body>
</html>
