美文网首页
JQuery简单实现

JQuery简单实现

作者: 苹果咏 | 来源:发表于2019-02-27 10:46 被阅读0次
window.jQuery = function (element) {
        var tags = document.querySelectorAll(element)
        return {
            addClass: function (params) {
                for(var i=0;i<tags.length;i++){
                    tags[i].classList.add(params)
                }
            },
            setText: function (params) {
                for(var i=0;i<tags.length;i++){
                    tags[i].innerHTML = params
                }
            }
        }
    }
    window.$ = jQuery;
    var $div = $('div')
    $div.addClass('red') // 可将所有 div 的 class 添加一个 red
    $div.setText('hi') // 可将所有 div 的 textContent 变为 hi

将jQuery封装成一个函数,先获取所有标签,直接返回一个对象,对象当中有两个函数:addClass和setText,给每个标签执行相应的操作即可。

相关文章

  • 如何实现一个jQuery的api

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

  • JQuery简单实现

    将jQuery封装成一个函数,先获取所有标签,直接返回一个对象,对象当中有两个函数:addClass和setTex...

  • 利用jquery子属性过滤器实现隔行变色

    利用jquery子属性过滤器实现隔行变色 之前这个方法不够简单css实现隔行换色 - 简书 参考 jQuery子属...

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

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

  • JQuery 的元素选择器的实现原理

    jQuery源码的结构 下面是模拟jQuery实现简单的获取元素内容 结论 所以,JQuery 其实就是在一个匿名...

  • jQuery结构简析

    本文简单实现jQuery框架,深入理解javascript对象。本文的对照版本是jQuery-1.2.6.js 本...

  • jquery实现页面内链接锚点跳转平滑滚动效果

    jQuery下实现锚点链接的平滑滚动(带浮动侧边栏)css+html+js JQuery实现简单的平滑过渡效果 J...

  • jQuery基础知识

    jQuery jQuery能实现的效果,js都能实现;js能实现的效果,jQuery未必能实现 jQuery大体分...

  • 简单实现jQuery API

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

  • 简单模仿jQuery

    今天开始学习jQuery,理解其实现模式和大体思想,然后自己简单实现一些类jQuery功能,这样能更好地学习使用它...

网友评论

      本文标题:JQuery简单实现

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