美文网首页
实现一个简单的 jQuery 的 API

实现一个简单的 jQuery 的 API

作者: ttcs1991 | 来源:发表于2017-12-25 20:58 被阅读0次

问题如下

window.jQuery = ???

window.$ = jQuery

var $div = $('div')

$div.addClass('red') // 可将所有 div 的 class 添加一个 red

$div.setText('hi') // 可将所有 div 的 textContent 变为 hi


整体思路如下

我们考虑构造出一个新的函数,返回一个新的对象,该对象包含addClass和setText两个属性,之后便可以使用jQuery构造一个新的node(即$div)。在此之上,便可以使用$div调用addClass和setText两个属性。


addClass() 实现思路
  • 使用document.querySelectorAll这个API获取当前所有div标签,返回一个nodeList
  • 遍历nodeList中的所有div,给每个div加上相应的class

setText() 实现思路
  • 使用document.querySelectorAll这个API获取当前所有div标签,返回一个nodeList
  • 遍历nodeList中的所有div,将每个div的内容通过textContent方法设置为hi

其中,???部分具体实现如下

    function(node) {
        return {

            addClass: function (ccc) {
                var x = document.querySelectorAll(node)
                for (let i = 0; i < x.length; i++) {
                    x[i].classList.add(ccc)
                }
            },
            setText: function (text) {
                var x = document.querySelectorAll(node)
                for (let i = 0; i < x.length; i++) {
                    x[i].textContent = text
                }
            }
        }
    }

相关文章

  • 如何实现一个jQuery的api

    什么是jQuery 实现jQuery的api 实现jQuery的api说起来也很简单,就是对DOM进行封装。话不多...

  • 用原生DOM实现一个jQuery的API

    今天第一次接触jQuery,先简单的实现一个jQuery的API,实现两个方法: addClass() setTe...

  • 简单实现jQuery API

    具体的思路:1.封装一个函数,传入节点或者选择器字符串,可以返回伪数组,伪数组中包含获取到的dom元素==> 对函...

  • 初探jQuery

    jQuery API的实现 自己模拟jQuery的一个API预览:http://js.jirengu.com/pa...

  • 实现一个简单jQuery的API

    jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。使用jQuery的第一步,往...

  • jQuery 一个简单API的实现

    需求:写一个jQuery函数,函数的功能如下面描述。传入选择器,为所有符合条件的元素添加样式或改变文本内容。 实现...

  • 简单实现一个jQuery的API

    要实现的目标:使页面中所有的div添加一个class和改变div的textContent。我们给每个div加个名为...

  • 简单实现一个 jQuery 的 API

    一、先总体构建出函数如下 二、获得函数要操作的对象,保持输出结果一致 给node的添加class属性,用forEa...

  • 一个简单jquery api的实现

    如下的代码结构: 需求如下: 思路分析 写一个方法 ,找到这个节点写一个 addClass方法,给节点添加样式写一...

  • 实现一个简单的jquery 的api

    根据之前介绍的DOM的api实在太难记忆和使用繁杂 所以为了更好的调用John Resig 大神造了jquery的...

网友评论

      本文标题:实现一个简单的 jQuery 的 API

      本文链接:https://www.haomeiwen.com/subject/ewrrgxtx.html