需求:
写一个jQuery函数,函数的功能如下面描述。传入选择器,为所有符合条件的元素添加样式或改变文本内容。
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
实现思路:
由功能想到DOM对应的API
querySelectorAll()
element.classList.add()
element.textContent
结构表示$div是一个对象,可以调用addClass方法。$()函数需返回一个对象。addClass、setText实现对应功能。
实现一个addClass方法
addClass = function(classname) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(classname)
}
}
实现setText功能
setText = function(text) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
jQuery函数实现,
假如函数需要返回一个nodes,且包含有元素的信息。可以构造一个对象nodes,由于 querySelectorAll()
返回的是一个包含元素的伪数组结构,因此 遍历这个列表,把对应元素存储到nodes里,添加length属性,标记元素数量。最后函数里把addClass,setText函数添加到nodes的属性里。
window.jQuery = function(selector) {
let nodes = {}
if (typeof selector === 'string') {
let temp = document.querySelectorAll(selector)
for (let i = 0; i < temp.length; i++) {
}
nodes.length = temp.length
nodes.addClass = function(classname) {
}
nodes.setText = function(text) {
}
}
return nodes
}