本次博客记录一个简单的"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. ES6摘抄

    1.函数可选参数function log(x, y = 'World') {} 只能作为尾参数使用,因为如果不是尾参数还是要输入的.2.函数参数默认值与解构赋值结合使用.(注意对象冒号解构等号)fun ...

  2. ActionBarSherlock（一）在Eclipse中如何引入ActionBarSherlock和它的例子？

    ActionBarSherlock,是一个开源的Actionbar项目(http://actionbarsherlock.com/download.html).为什么我们要用它呢?谷歌已经不强制要求厂 ...

  3. PHP设计日历类一 （38）

    由两个文件组成: 第一个test.php <style> table { border:1px solid #; } .fontb { color:white; background:bl ...

  4. NOI2019省选模拟赛 第六场

    传送门 又炸了-- \(A\) 唐时月夜 不知道改了什么东西之后就\(A\)掉了\(.jpg\) 首先,题目保证"如果一片子水域曾经被操作过,那么在之后的施法中,这片子水域也一定会被操作&q ...

  5. Mysql Insert Or Update语法实例

    有的时候会需要写一段insert的sql,如果主键存在,则update:如果主键不存在,则insert.Mysql中提供了这样的用法:ON DUPLICATE KEY UPDATE.下面就看看它是如何 ...

  6. mxonline实战8，机构列表分页功能，以及按条件筛选功能

    对应github地址:列表分页和按条件筛选     一. 列表分页   1. pip install django-pure-pagination   2. settings.py中 install ...

  7. vs2010和opencv2.4.9配置

    1.下载安装opencv2.4.9 直接到官网上下载opencv,我下载的是opencv2.4.9版本,然后进行安装,opencv的安装其实就是解压,我解压的路径是D:\opencv249.解压完成后 ...

  8. BurpSuite系列----Extender模块(扩展器)

    一.简介 Burp在软件中提供了支持第三方拓展插件的功能,方便使用者编写自己的自定义插件或从插件商店中安装拓展插件.Burp扩展程序可以以多种方式支持自定义Burp的行为,例如:修改HTTP请求和响应 ...

  9. 常见的http错误提示

    1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明100 (继续) 请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101 (切换协议 ...

  10. [BZOJ 2894]世界线

    传送门 \(\color{green}{solution}\) 在开这道题之前建议先看看3756:pty的字符串,然后你会发现这题就很zz了. 当然,作为一名合格的博主,我还是应该写点什么的 首先,我 ...