先上代码
HTML代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> .red { color: red; } </style> <title>Document</title> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <script src="./demo.js"></script> </body> </html>
JS代码如下
#传入参数，如果参数是string类型，则调用DOM的querySelectorAll方法，将获取到的元素用伪数组返回；如果参数是Node，则返回nodes伪数组
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, lenght: 1 } }
#遍历nodes，给每一个元素添加上classes类 nodes.addClass = function (classes) { for (let i = 0; i < nodes.length; i++) { nodes[i].classList.add(classes) } }
#遍历nodes，将每一个元素的文本设置成参数的内容 nodes.setText = function (text) { for (let i = 0; i < nodes.length; i++) { nodes[i].textContent = text } } return nodes; } window.$ = jQuery var $div = $('div') //获取div元素 $div.addClass('red') // 可将所有 div 的 class 添加一个 red $div.setText('Rony') // 可将所有 div 的 textContent 变为 Rony
终上，通过对DOM方法的封装。实现了一个简单的jQuery功能，可以通过选择器，选到元素。再通过添加的API，对元素进行操作。
优化Text函数
nodes.Text = function (text) { if (text === undefined) { var texts = [] for (let i = 0; i < nodes.length; i++) { texts.push(nodes[i].textContent) } console.log(texts) return texts } else { for (let i = 0; i < nodes.length; i++) { nodes[i].textContent = text } } }
该函数，带参数情况下实现setText()的功能；不带参数的情况下，实现getText()的功能；
如果不带参数，即text === undefined，则声明一个texts数组，将获取到的元素的文本放入texts数组中
如果带有参数，则将每一个获取到的元素的文本修改为参数的内容