实现一个简单的"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 ...
随机推荐
- stringBuilder类的一些用法
对String对象进行处理的时候比如拼接.截取,会在内存中新建很多字符串对象.为了减少内存开支,可以使用StringBuilder类型. 创建StringBuiler实例: 用构造函数直接创建: St ...
- EF查询记录
public void TestMethod1() { , Ids = , Ids = "4,5,6" } }; , , , , , , , }; var query = quer ...
- WPF GridControl单元格值与过滤值相同时，改变单元格背景色
DataTrigger的Value不可绑定,所以我们需要用MultiBinding来实现这个功能. <dxg:TableView.CellStyle> <Style TargetTy ...
- 原生 javaScript 百叶窗 效果的实现及原理介绍
百叶窗大家都见过吧!如图: 原理: 如图所示,空心格子就好比是每个li,给它设定相对定位属性,设置overflow:hidden: 黑块为li子元素,高度为li的2倍,设置absolute属性,我们正 ...
- deepin jdk 安装
一.安装JDK环境 1 .卸载系统自带的Openjdk(可能不需要) 先用检测是否安装了openjdk dpkg -l | grep openjdk 如果安装了, 使用下面命令卸载. sudo apt ...
- AI-Info-Micron：人如其食：人工智能和人类微生物组
ylbtech-AI-Info-Micron:人如其食:人工智能和人类微生物组 1.返回顶部 1. 人如其食:人工智能和人类微生物组 “相信你身体发出的信号”,的确是一个很好的建议.研究人员在不遗余力 ...
- leecode刷题（22）-- 反转数组
leecode刷题(22)-- 反转数组 反转数组 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3-> ...
- P3622 [APIO2007]动物园
题目链接 题意分析 这是一道状压\(DP\)的题 一个人只可以欣赏到\(5\)只动物 显然可以状压 我们用\(dp[i][j]\)表示当前\([i,i+4]\)中这\(5\)只动物的状态\(j\) 在 ...
- C#（同步调用、异步调用、异步回调）
Review: 原作者虽然使用了汉字的类名,看起来十分蹩脚,但是,还是把同步调用.异步调用.异步回调的使用讲解的很详细的.原理讲解的很清晰. ------ 本文将主要通过“同步调用”.“异步调用”.“ ...
- linux centOS 7 GUI安装
centOS 7 GUI 图形用户界面(Graphical User Interface 克隆clone Windows中安装xshell和xftp传输软件 https://blog.csdn.net ...