一、需求如下
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
题目中要求将所有 div 的 class 添加一个 red，以及将所有 div 的 textContent 变为 hi。
二、解决思路
- jQuery本质就是一个构造函数然后接受一个参数（这个参数可能是节点）并返回一个nodes对象。
- 首先我们要能用var $div = $('div')获取到所有 div 。
window.jQuery = function (nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector === 'string'){
var 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 = {o: nodeOrSelector,length = 1}
}
return nodes
}
window.$ = jQuery
- 此时，
var $div = $('div')中的$div就是上述代码中的nodes，是一个 value 为所有 div 的伪数组。而且，nodes 需要 return 出去，才能被外面的代码调用。
$div.addClass('red')可将所有 div 的 class 添加一个 red，$div.setText('hi')可将所有 div 的 textContent 变为 hi，我们给 nodes 添加两个 hash ，即，名为 addClass 和 setText 的函数
nodes.addClass = function(){
}
nodes.setText = function(){
}
三、完整代码
window.jQuery = function (nodeOrSelector){
var nodes = {}
if(typeof nodeOrSelector === 'string'){
var 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 = {o: nodeOrSelector,length: 1}
}
nodes.addClass = function(classes){
for(let i = 0; i < nodes.length; i++){
nodes[i].classList.add(classes)
}
}
nodes.setText = function(text){
for(let i = 0; i < nodes.length; i++){
nodes[i].textContent = text
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red')
$div.setText('hi')
四、总结
- 在我看来jQuery就是将一个DOM对象重新包装成jQuery对象，这个jQuery对象中包含了许多DOM中不能轻松实现的方法（函数），可以省去很多复杂的代码。
- jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。
- 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。
- 首先，声明一个全局函数jQuery，函数通过传参数，通过判断参数的类型及参数是否为节点元素来获取对应的nodes，函数里写有addClass方法和setText方法。
- .addClass方法通过传参数（样式的className），遍历所有nodes并加上提供的class类
- .setText方法，把文本内容当作参数传递到函数中，遍历所有的nodes并通过textContent属性改变标签的文本内容
网友评论