实现一个简单的"jQuery"
本次博客记录一个简单的"jQuey"的实现方式，来加深对jQuery的理解：
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.red{
color:red;
}
</style>
<body>
<div>你好</div>
<div>你好</div>
</body>
<script type="text/javascript">
window.jQuey = function (selectorOrNode){
var nodes = {}
// 判断用户传进来的是个字符串还是一个节点
if (typeof selectorOrNode === 'string'){
var temp = document.querySelectorAll(selectorOrNode)
for (var i=0; i < temp.length; i++){
nodes[i] = temp[i]
}
nodes.length = temp.length
}else if(selectorOrNode instanceof Node){
nodes = {
0:selectorOrNode,
length:1
}
}
// 添加单个属性
nodes.addClass = function(newClass){
for (var i=0; i<nodes.length; i++){
nodes[i].classList.add(newClass)
}
}
// 设置文本
nodes.setText = function(text){
for (var i=0; i<nodes.length; i++){
nodes[i].textContent = text
}
}
return nodes
}
window.$ = jQuey
var $div = $('div')
$div.addClass('red')
$div.setText("hi") </script>
</html>
实现步骤：
1.首先我们创建一个函数并给了window.jQuey，这样我们就可以直接使用jQuery.call来直接调用函数了。
2. 创建了一个空对象 nodes；
3.判断传入实参的类型，如果是一个字符串，就通过选择器来获取节点们，通过for循环，来构造我们想要的nodes,并指定length，如果是一个节点，我们就直接将这个节点放到第0个位置，并指定length为1；
4.这里我们实现了两个方法, 添加单个属性的addClass和设置节点内文本的setText，将这两个函数作为值给了nodes的两个键addClass和setText，然后返回对象;
5.为了更像jQuery，我们将jQuery给了window.$，这样我们就可以直接使用$('div')获取我们所定义的jQuery对象和使用对象的方法。
效果图：
实现一个简单的"jQuery"的更多相关文章
- 编写一个简单的Jquery插件
1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...
- 一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
- layer —— 一个简单的jQuery弹出层插件
layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...
- 怎样实现一个简单的jQuery编程
第一步:在head中载入jQuery框架 <script type="text/javascript" src="jQuery文档所在的绝对路径"> ...
- 一个简单的jQuery回调函数例子
jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先 ...
- 自己写的一个简单的jQuery提示插件
代码: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = &qu ...
- 图片延迟加载并等比缩放，一个简单的JQuery插件
使用方法: $(".viewArea img").zoom({height:74,width:103}); (function($){ $.fn.zoom = function(s ...
- 一个简单的jquery左右列表内容切换应用
选中左边某个选项点击添加,即可将选中项添加到右边文本框中,点击选中全部即可将全部选项移到右边,移除按钮功能相同. html代码: <div id="main"> < ...
- 一个简单的jquery ajax表单提交 带数据校验 layer弹框提示
<input type="hidden" id="url" value="index.php"/> <form id=&q ...
随机推荐
- how to trace the error log
Executed as user: WTC\Ebw.Admin. Transaction (Process ID 95) was deadlocked on lock resources with a ...
- Proxy account failing to run SSIS Error (Proxy (11) is not allowed for subsystem "SSIS" and user "AB\testuser ".
USE [msdb]EXEC msdb.dbo.sp_grant_login_to_proxy @proxy_name=N'SSISProxyAgentV1', @login_name=N'WTC\E ...
- PHP header函数设置http报文头示例详解以及解决http返回头中content-length与Transfer-Encoding: chunked的问题
最近在服务器上,多媒体与设备(摄像头)对接的时候,总是发生错误导致设备崩溃,抓包发现响应头不对,没有返回length,使得摄像头立即崩溃.找了一下资料,改了一下响应头就好了. //定义编码 heade ...
- java学习笔记—校验码的实现（15）
校验码的出现主要的任务是解决表单的重复提交问题. public void doGet(HttpServletRequest request, HttpServletResponse response) ...
- “全栈2019”Java多线程第七章：等待线程死亡join()方法详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- 3XX重定向
3XX响应结果表明浏览器需要执行某些特殊的处理以正确处理请求 301 Moved Permanently 永久性重定向 该状态码表示请求的资源已经被分配了新的URI,以后应使用资源现 ...
- 安装zlib的过程（Compression requires the (missing) zlib module）（Python2.6升级为2.7出现的问题）
觉得有必要把解决问题的过程写下来 1,因为要安装flask,所以安装pip,所以安装setuptools,所以安装zlib.(具体过程http://www.cnblogs.com/aiyr/p/726 ...
- Creating a custom analyzer in ElasticSearch Nest client
Creating a custom analyzer in ElasticSearch Nest client Question: Im very very new to elasticsearch ...
- 【vue】——CDN或全局引入CSS、JS。
在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- MySQL之查看数据库编码
MySQL之查看数据库编码