实现一个简单的"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 ...
随机推荐
- Java50道经典习题-程序11 求不重复数字
题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. public cla ...
- SoundPool在使用
Button playButton; SoundPool sp; int soundID_1,soundID_2; int streamID_1,streamID_2; @Override prot ...
- WIN7 64位配置X86 MySQL 数据源
在运行中输入“c:\windows\syswow64\odbcad32.exe”,在调出来的ODBC管理器中配置数据源.
- RPC 简单小试
由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 : --> 点击这里 RPC是指远程过程调用,也就是说两台服务器A,B,一个应用部署在A服务器 ...
- 指针版P3690 【模板】Link Cut Tree （动态树）
题面 传送门 题解 鉴于数组版实在是太慢我用指针版重新写了一遍 代码基本是借鉴了lxl某道关于\(LCT\)的题 //minamoto #include<bits/stdc++.h> #d ...
- 【flask】 学习flask macro 模板
首先 我是看着这个链接学习的 jinja2 macro官方文档 Flask开发中Macros的实践经验 Flask的Jinja2模板引擎 — 块与宏(6th) 在宏中 还可以赋值...用set标签.. ...
- Ionic2 启动加载优化总结
1. ionic2通过ionic serve生成的main.js大于4M,必须先build才能部署 npm run ionic:build --prod 之后main.js缩小为大概100K+ 2. ...
- Python 资源大全
我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列表,内容包括:Web框架.网络 ...
- P3292 [SCOI2016]幸运数字
题目链接 题意分析 一句话题意 : 树上一条链中挑选出某些数 异或和最大 我们可以考虑维护一个树上倍增线性基 然后倍增的时候 维护一个线性基合并就可以了 写起来还是比较容易的 CODE: #inclu ...
- Python 字符串前面加u,r,b,f的含义
1.字符串前加 u 例:u"我是含有中文字符组成的字符串." 作用: 后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格式问题,导致再次使用时 ...