实现一个简单的"jQuery"

时间 2019-11-07

标签实现一个简单 jquery 栏目 JQuery 繁體版

原文原文链接

本次博客记录一个简单的"jQuey"的实现方式，来加深对jQuery的理解：javascript

代码：css

<!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>

实现步骤：html

1.首先咱们建立一个函数并给了window.jQuey，这样咱们就能够直接使用jQuery.call来直接调用函数了。java

2. 建立了一个空对象 nodes；node

3.判断传入实参的类型，若是是一个字符串，就经过选择器来获取节点们，经过for循环，来构造咱们想要的nodes,并指定length，若是是一个节点，咱们就直接将这个节点放到第0个位置，并指定length为1；函数

4.这里咱们实现了两个方法, 添加单个属性的addClass和设置节点内文本的setText，将这两个函数做为值给了nodes的两个键addClass和setText，而后返回对象;htm

5.为了更像jQuery，咱们将jQuery给了window.$，这样咱们就能够直接使用$('div')获取咱们所定义的jQuery对象和使用对象的方法。对象

效果图：blog