【JavaScript】实现两个jQuery API

刺骨的言语ヽ痛彻心扉 2022-04-04 07:54 196阅读 0赞

window.jQuery = function(nodeOrSelector) {
      var nodes = {}
      //包装这个要返回的jQuery对象
      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 = {0: nodeOrSelector, length: 1}
      }
    
      console.log('nodes', nodes)
      nodes.getSiblings =  function() {
        var allChildren = node.parentNode.children
        var siblings = {length:0}
        for(var i = 0; i < allChildren.length; i++) {
          if(allChildren[i] !== node) {
            siblings[siblings.length++] = allChildren[i]
          }
        }
        console.log(siblings) 
    
        return siblings
      },
    
      nodes.addClass = function(classes) {
        classes.forEach((value) => {
          for(var i = 0; i < nodes.length; i++) {
            nodes[i].classList.add(value)
          }
        })
       
      },
    
      nodes.text = function(text) {
        if(text === undefined) {  //getText
          var texts = []
          for(var i = 0; i < nodes.length; i++) {
            texts.push(nodes[i].textContent)
          }
          console.log(texts)
          return texts
        } else { //setText
          for(var i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text
          }
        }
      }
    
      return nodes
    }
    
    使用：
    var my_node = jQuery('ul>li')
    更加简洁的使用：
    window.$ = jQuery
    var my_node2 = $('ul>li')

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 5 个 JavaScript Web API

Clipboard API：允许将内容复制到设备剪贴板并从设备剪贴板读取内容 navigator.clipboard.writeText('hello') .

ゝ一世哀愁。/ 2024年03月23日 18:20/ 0 赞/ 80 阅读

相关 jQuery实现两个列表框的值之间的互换：

jQuery实现两个列表框的值之间的互换：截图如下： ![SouthEast][] 代码如下： <%@ page language="java" import

电玩女神/ 2024年02月17日 14:16/ 0 赞/ 33 阅读

相关 leetcode----用两个栈实现队列（JavaScript解法）

一、题目描述用两个栈实现一个队列。队列的声明如下，请实现它的两个函数 appendTail 和 deleteHead ，分别完成在队列尾部插入整数和在队列头部删除整数的

布满荆棘的人生/ 2023年02月21日 12:49/ 0 赞/ 16 阅读

相关 JavaScript数组 API 实现的几个常见操作

点击关注下方卡片关注我???????? 回复“JS”查阅 JS精选文章来源 | https://segmentfault.com/a/1190000019126646

秒速五厘米/ 2022年10月21日 01:07/ 0 赞/ 208 阅读

相关使用JavaScript原生API替换Jquery

Query目前已经成为最流行的JavaScript库，它可以让开发者“write less, do more（写得更少，做得更多）”，这也是它的核心理念。通过它，用户可以更方便

左手的ㄟ右手/ 2022年08月03日 11:53/ 0 赞/ 156 阅读

相关 jquery实现同时提交两个form表单

<script type="text/javascript" src="jquery-1.5.1.js"></script> <script type="

曾经终败给现在/ 2022年06月14日 08:18/ 0 赞/ 197 阅读

相关【JavaScript】实现两个jQuery API

window.jQuery = function(nodeOrSelector) { var nodes = {} //包装这个要返回的jQue

刺骨的言语ヽ痛彻心扉/ 2022年04月04日 07:54/ 0 赞/ 197 阅读

相关 javascript交换两个数

(1) 临时变量 let a = 12,b = 5; let temp = a; a = b;

冷不防/ 2022年02月20日 04:27/ 0 赞/ 273 阅读

相关 jquery实现两个div中的元素相互拖动

这里写了两个实例，两个都是基于jquery实现的。如果有更好的方法，欢迎分享。第一个效果图：拖动中： ![watermark_type_ZmFuZ3poZW5naGV

小鱼儿/ 2022年02月03日 15:13/ 0 赞/ 280 阅读

相关 javascript三种方法实现将两个数组合并

javascript三种方法实现将两个数组合并三种方法将两个数组合并方法一：使用concat 方法二：使用循环方法三：使用apply

小灰灰/ 2020年06月02日 11:54/ 0 赞/ 777 阅读