本次博客记录一个简单的"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"的更多相关文章

  1. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  2. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  3. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

  4. 怎样实现一个简单的jQuery编程

    第一步:在head中载入jQuery框架 <script type="text/javascript"  src="jQuery文档所在的绝对路径"> ...

  5. 一个简单的jQuery回调函数例子

    jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先 ...

  6. 自己写的一个简单的jQuery提示插件

    代码: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = &qu ...

  7. 图片延迟加载并等比缩放，一个简单的JQuery插件

    使用方法: $(".viewArea img").zoom({height:74,width:103}); (function($){ $.fn.zoom = function(s ...

  8. 一个简单的jquery左右列表内容切换应用

    选中左边某个选项点击添加,即可将选中项添加到右边文本框中,点击选中全部即可将全部选项移到右边,移除按钮功能相同. html代码: <div id="main"> < ...

  9. 一个简单的jquery ajax表单提交 带数据校验 layer弹框提示

    <input type="hidden" id="url" value="index.php"/> <form id=&q ...

随机推荐

  1. Bootstrap变形记

    bootstrap审美疲劳了,想个招换换样子,THINKING... 变形 >>> 哈,不用改已有代码,添加我的Harley.js即可,有空在玩... 真实好久不玩博客园了,200字 ...

  2. 2.C#WebAPI设置路由和参数1

    1.当我们创建WebApi的时候我们的项目下的Contorls文件夹下的ValuesController文件下会出现这么几个方法: // GET http://程序ip:程序端口/api/values ...

  3. 字体变色详解链接：https://www.cnblogs.com/daofaziran/p/9015284.html

    格式:\033[显示方式;前景色;背景色m + 结尾部分:\033[0m 字体色 | 背景色 | 颜色描述 ------------------------------------------- 30 ...

  4. C# 依赖注入 & MEF

    之前面试有问道依赖注入,因为一直是做客户端的发开发,没有接触这个,后边工作接触到了MEF,顺便熟悉一下依赖注入 详细的概念解释就不讲了,网上一大把,个人觉着依赖注入本质是为了解耦,方便扩展 依赖注入的 ...

  5. Redis数据库结构与读写原理

    此文已由作者赵计刚薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.数据库结构 每一个redis服务器内部的数据结构都是一个redisDb[],该数组的大小可以在redi ...

  6. C博客的第1次作业--分支，顺序结构

    1.本章学习总结 1.1 思维导图 1.2本章学习体会,代码量学习体会 1.2.1学习体会 初步了解什么是C语言,明白了这门语言的基本运行功能.了解了关于c语言结构上,语法上的基本知识.下一步要进一步 ...

  7. LOJ121 【离线可过】动态图连通性

    题目链接:戳我 [线段树分治版本代码] 这里面的线段树是时间线段树,每一个节点都要开一个vector,记录当前时间区间中存在的边的标号qwq #include<iostream> #inc ...

  8. 未能加载文件或程序集“ICSharpCode.SharpZipLib, Version=0.86.0.518, Culture=neutral, PublicKeyToken=1b03e6acf116

    最近项目新增需求批量通过Excel导入数据,果断想到NPOI,结果导入的时候突然跳出 未能加载文件或程序集“ICSharpCode.SharpZipLib, Version=0.86.0.518, C ...

  9. json相关知识

    整理json相关知识: 1.for in 循环获取json中的键(key)与值(value) <!DOCTYPE html> <html lang="en"> ...

  10. 第一个PSP0级

    1.计划: 需求描述: 按照图片要求设计添加新课程界面.(0.5分) 在后台数据库中建立相应的表结构存储课程信息.(0.5分) 实现新课程添加的功能. 要求判断任课教师为王建民.刘立嘉.刘丹.王辉.杨 ...