本次博客记录一个简单的"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. Java Been, EJB, POJO 之间的区别

    Java Bean 是可复用的组件,对Java Bean并没有严格的规范,理论上讲,任何一个Java类都可以是一个Bean.但通常情况下,由于Java Bean是被容器所创建(如Tomcat)的,所以 ...

  2. Vue的基本认识与使用

    什么是Vue? Vue是一个渐进式的js框架,采用的是MVVM模式的双向绑定, Vue的使用 引入vue        <script src="vuejs/vue.js"& ...

  3. 201621123023《Java程序设计》第10周学习总结

    一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 二.书面作业 本次PTA作业题集异常 1. 常用异常 结合题集题目7-1回答 1.1 自己以前编写的代码中经常出 ...

  4. Servlet（汇聚页）

    Servlet(汇聚页) --------------------------------------------------------------------------------------- ...

  5. php全局变量漏洞 $GLOBALS

    在Discuz代码中有这么一段: if (isset($_REQUEST[‘GLOBALS’]) OR isset($_FILES[‘GLOBALS’])) {  exit(‘Request tain ...

  6. Java线程池学习心得

    一.普通线程和线程池的对比 new Thread的弊端如下: a. 每次new Thread新建对象性能差.b. 线程缺乏统一管理,可能无限制新建线程,相互之间竞争,及可能占用过多系统资源导致死机或o ...

  7. Flowportal-BPM——环境配置

    环境配置: 一.控制面板→程序和功能→打开或不关闭Window功能→选择选项 二.控制面板→管理工具→Internet信息服务(IIS)管理器→左侧第一个→ISAPI和CGI限制→全部选为[允许] 三 ...

  8. Sci-Hub

    提到Sci-Hub这个文献下载利器,大家肯定都不陌生.你在各大SCI杂志上看到的英文文献,90%以上都能免费下载.因为它严重侵犯了爱思唯尔.施普林格.Wiley等各大出版商的利益,遭到起诉与封杀. 不 ...

  9. 02-url路由分配及模板渲染方式

    本章主要内容 1.url基本概念及格式 2.path和re_path 3.模板路径配置 4.模板渲染方式 1.url基本概念及格式 URL(uniform Resoure Locator)统一资源定位 ...

  10. Python flask Reason: image not found libmysqlclient.21.dylib

    Python flask Reason: image not found libmysqlclient.21.dylib 折腾了半个下午,在这里找到了答案,在此记录一下,以免后人躺坑 错误提示: Im ...