美文网首页
实现一个简单的jquery 的api

实现一个简单的jquery 的api

作者: 饕餮潴 | 来源:发表于2018-11-04 01:25 被阅读5次

根据之前介绍的DOM的api实在太难记忆和使用繁杂 所以为了更好的调用John Resig 大神造了jquery的轮子
jquery的核心The Write Less,Do More,简洁的API、优雅的链式、强大的查询与便捷的操作。

做一个简单的jquery的功能
var $div = $('div')    //输入div
$div.addClass('red')  // 可将所有 div 的 class 添加一个 red
$div.setText('hi')  // 可将所有 div 的 textContent 变为 hi

1.参数传递

var div =('div')
要实现上面这个功能,我的理解是首先设置window对象jQuery为函数返回的结果,然后把参数'div'传递到函数内的DOM,作为变量进行下一步的操作。

window.jQuery=function(selector){  
let alldiv=document.querySelectorAll(selector)  
}

window.$ = jQuery

2.返回对象

div.addClass('red') // 可将所有 div 的 class 添加一个 reddiv.setText('hi') // 可将所有 div 的 textContent 变为 hi
可以观察得到$div是一个对象,它的key有addClass和setText。

那我也返回一个含有addClass和setClass的对象。

window.jQuery=function (selector){
let alldiv=document.querySelectorAll(selector)  
  return{
       addClass:function (){},
       setClass:function(){}
  }
}
window.$ = jQuery

3.补全对象

我们得到了alldiv,它是一个伪数组。如果每个div都要添加class的话,需要一个for循环,然后每一次用DOM的方法里的classList.add功能对div添加class。
addClass: function(){
for(var i=0;i<alldiv.length;i++){
alldiv[i].classList.add("red")
}
setText: function(){
for(var i=0;i<alldiv.length;i++){
alldiv[i].textContent = "hi"
}
把addClass和setText的内容结合到函数内,得到:

window.jQuery=function (selector){
  let alldiv=document.querySelectorAll(selector)
  return{
       addClass: function(){
               for(var i=0;i<alldiv.length;i++){
                   alldiv[i].classList.add("red")
               }
       },
       setText: function(){
               for(var i=0;i<alldiv.length;i++){
                  alldiv[i].textContent = "hi"
              }
      }
   }
}
window.$ = jQuery

相关文章

  • 如何实现一个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/awkcxqtx.html