實現一個簡單的"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