本次博客记录一个简单的"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. vim 命令全

    1 简介 vim是文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用.下面讲述一些必要的基本命令,而掌握好这些命令,您就能够很容易将vim当作一个通用的万能编辑器来使用 ...

  2. SQL查询速度慢的原因分析和解决方案

    SQL查询速度慢的原因分析和解决方案 查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3.没有创建 ...

  3. 如何使用jQuery实现根据不同IP显示不同的内容

    一些SEM的投放页会针对不同地域做针对性的内容推广,下面我把实现方法分享出来. 一.引用新浪提供的IP查询的js库 <script src="http://int.dpool.sina ...

  4. 【Oracle 12c】最新CUUG OCP-071考试题库（59题）

    59.(16-8)choose two: Which two statements are true regarding the USING and ON clauses in table joins ...

  5. 微信小程序二维码是无法识别二维码跳转到小程序

    今天测试了一下,微信小程序圆形二维码是不能直接识别跳转到小程序: 但h5页面的那种微信公众号二维码是可以直接识别

  6. zTree第一章，纯静态

    zTree v3.5 Demo 演示 http://www.treejs.cn/v3/demo.php#_101 ------------------------------------------- ...

  7. Python装饰器（函数）

    闭包 1．作用域L_E_G_B(局部.内嵌.全局...): x=10#全局 def f(): a=5 #嵌套作用域 def inner(): count = 7 #局部变量 print a retur ...

  8. Java中将图片保存到数据库中

    在实际的开发中,我们可能需要将图片.影音等文件直接保存到数据库中,然后通过编程方式将数据读出进行使用.例如将读出的图片数据显示出来,将读出的电影文件播放出来. 二进制数据直接保存到文件和从文件中读出非 ...

  9. JavaScript求数组Array的并集（javascript面试常见题目）

    var Utils = { joinArray:function(source,target){ for(var i = 0;i<source.length;i++){ var oa = sou ...

  10. 开源系统-edusoho在线教育

    #部署 ```bash [root@localhost ~]# docker run --name edusoho -tid         -p 9900:80         -e DOMAIN= ...