三分钟手写一个迷你jQuery,附源码

简介: 诚然,不管前端技术怎么发展,重心都不会变,就是 操作DOM + 获取数据。下面的代码演示了如何快速手写一个简单的jQuery:

诚然,不管前端技术怎么发展,重心都不会变,就是 操作DOM + 获取数据

下面的代码演示了如何快速手写一个简单的jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写minijQuery</title>
</head>
<body>
    <input id="username" placeholder="请输入用户名" autocomplete="off"> <span id="username2"></span> <br>
    <input id="password" placeholder="请输入密码" autocomplete="off"> <span id="password2"></span>
    <script>
        let $ = function(id){
            /**为了简洁,只实现ID选择器* */
            let dom = document.getElementById(id);
            return {
                _dom : dom ,
                /** 获取元素的value属性值 || 赋值* */
                val: function(newVal){
                    if(arguments.length){
                        this._dom.value = newVal;
                        return;
                    }
                    return this._dom.value;
                },
                /** 获取元素的innerHTML属性值 || 赋值* */
                html: function(newVal){
                    if(arguments.length){
                        this._dom.innerHTML = newVal;
                        return;
                    }
                    return this._dom.innerHTML;
                },
                /** 给元素绑定事件* */
                on: function(event,callback){
                    this._dom['on' + event] = callback;
                }
            }
        }
        $('username').on('input',function(){
            $('username2').html($('username').val());
        });
        $('password').on('input',function(){
            $('password2').html($('password').val());
        });
    </script>
</body>
</html>

73f5190086ed411b8e6860110b9c5675.png

效果如上图所示, 就是在输入框右边同步显示左边输入框的值。

如果你是JavaScript零基础,并看过《JavaScript百炼成仙》的函数七重关的话,相信也可以很快写出来。虽然不难,但是通过这个例子,可以很好地巩固基础,和增强自己学习前端的自信心。


相关文章
|
6月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
60 1
jQuery+CSS3自动轮播焦点图特效源码
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
132 0
|
3天前
|
JavaScript
jQuery制作的3D冰块立方时钟动态特效源码
jQuery制作的3D冰块立方时钟动态特效源码是一段基于jQuery实现的3D魔方立方时钟效果代码,该设计非常特别,且支持数字颜色的变化,提供8款颜色选择,非常有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
19 8
|
4天前
|
JavaScript
jQuery制作的网站首页宽屏导航轮播图特效源码
jQuery制作的网站首页宽屏导航轮播图特效源码是一段基于jQuery制作的可用于商城首页 微商城 互联网公司或某些电子商城的首页特效,自带有二级菜单栏、轮播图滚动、登录注册按钮等等,非常全面,欢迎对此段代码感兴趣的朋友前来下载使用。
11 4
|
4天前
|
JavaScript
jQuery实现的手风琴四季场景变换特效源码
jQuery实现的手风琴四季场景变换特效源码是一段基于jQuery实现的手风琴四季场景变换效果代码,拥有春夏秋冬四季转场特效,鼠标可放大每个季节的图像,欢迎对此段代码感兴趣的朋友前来下载使用。
10 1
|
26天前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
43 0
|
5月前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
38 0
|
5月前
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
114 0
|
6月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
88 0
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
346 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)