实现一个简单的"jQuery"

本次博客记录一个简单的"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对象和使用对象的方法。

效果图:

原文地址:https://www.cnblogs.com/liubinsh/p/8682778.html