实现一个简单jQuery的API

jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。
使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。


下面就讲述了如何实现一个jQuery的API。
通过这个问题来讲述:

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

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

先说答案吧!!!
上面???的内容为:

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

思路如下

我们的需求是通过构造一个新的函数,这个函数返回一个对象,该对象包括两种属性方法,即addClass和setText,便可以使用jQuery构造一个新的node(即$div),随后便可以使用$div调用addClass和setText两个属性。

首先我们在这个函数体的内部声明一个变量findNode,随后可以在下面两种属性方法中调用。


addClass()实现思路
  • 通过外部声明的变量findNode,然后通过document.querySelectorAll(node)找到所有的节点
  • 遍历findNode,给每个节点添加相应的class。

setText()实现思路
  • 通过外部声明的变量findNode,然后通过document.querySelectorAll(node)找到所有的节点
  • 遍历findNode,将每个节点的内容通过textContent方法设置为用户设置的text。

更具体的代码:http://js.jirengu.com/moqur/3/edit?html,css,js,output

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 712评论 0 3
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,258评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,490评论 0 2
  • 第一章 认识jQuery jQuery 能做什么 1. 取得文档中的元素 2. 修改页面的外观 CSS虽然为影响文...
    七弦桐语阅读 546评论 0 1
  • 先贤有云:“君子喻于色,小人喻于利”,言下之意,人非圣贤孰能不色?色而能忍,方为人上之人。诸君熟读三百千,当知...
    陈迂阅读 1,069评论 1 2

友情链接更多精彩内容