【日常记录】jQuery初探

一个题目

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

我的解答
代码链接
1. jQuery本质上是什么？
在一个页面引入jQuery，用typeof运算符检测，显然jQuery本质上是一个函数。
这个函数对element对象进行包装，于是这个对象经过包装后，具备了一些简洁好用的api。
2. 分析题目

window.$ = jQuery//首先用`$`符号代替jQuery的写法
var $div = $('div')//经过处理后，$div升级了，多了很多新的方法和属性
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

3. 写代码

• 这个函数接受了一个字符串，然后选择和这个字符串值一样的全部标签。

  window.jQuery = function(tagName) {   
     let nodes=document.getElementsByTagName(tagName)   
  return nodes } 
  

  返回出一个经过包装后的新对象。

• 增加的addClass方法，接受一个类名，给所有元素添加这个类

  nodes.addClass = function(className) {
            for (let i = 0; i < nodes.length; i++) {
              nodes[i].classList.add(className)
            }   
      } 
  

• 增加的setText方法，接收一个字符串，设置所有元素的文本都为这个字符串。

   nodes.setText = function(text) {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].textContent = text
      }
    }
  

本文为番茄小火锅的原创文章，版权归番茄小火锅和饥人谷所有，转载请注明出处。