本次博客记录一个简单的"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. 关于Unity中MonoBehaviour的构造函数

    关于Unity中MonoBehaviour的构造函数 在学习Unity MVVM UI框架的时候,一不小给一个继承自MonoBehaviour类的子类编写了自定义构造函数,结果调Bug调了两个钟,特此 ...

  2. 【OCP-12c】CUUG 071题库考试原题及答案解析（19）

    1.choose the best answerWhat is the primary difference between the relational database (RDB) andobje ...

  3. 在myeclipse中有的项目上有个红色感叹号

    之前做项目的时候遇到过这个问题,最后确定原因是项目引用了很多放在D盘或E盘上的jar包,但是我们不小心把这些jar包删除或移动路径了,因此myeclipse识别不了出现红色的感叹号,解决方式是在mye ...

  4. 机器学习笔记(四)--sklearn数据集

    sklearn数据集 (一)机器学习的一般数据集会划分为两个部分 训练数据:用于训练,构建模型. 测试数据:在模型检验时使用,用于评估模型是否有效. 划分数据的API:sklearn.model_se ...

  5. 3.1 High Availability

    摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...

  6. ObjectMapper 动态用法

    class DymicObject {     private Object o; public DymicObject(Object o) {         this.o = o;     } p ...

  7. jpetStore 学习总结(2)

    在写jpetstore时,最难理解的应该是数据库还有每个表之间的关系了,我在这里对数据库简单的介绍. 以下是数据库的所有表:    account表是个人信息表,里面包括用户的名字,邮箱,地址,哪个城 ...

  8. RDD转换成为DataFrame

    方式一: 通过case class创建DataFrames(反射) TestDataFrame1.scala package com.bky // 隐式类的导入 // 定义case class,相当于 ...

  9. python socket文件传输实现

    简单版 server(服务端) import socket import subprocess import struct import json import os share_dir = r'E: ...

  10. masm32环境配置

    软件: Windows7-32bit visual c++6.0 Masm32 sdk 11 安装: 0x00 || 下载Masm sdk 11并安装,下载路径:http://www.masm32.c ...