jQuery初体验

作业题

  1. HTML代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>选项1</div>
<div>选项2</div>
<div>选项3</div>
</body>
</html>
  1. CSS代码
.red{
  color:red;
}
  1. JS代码
window.jQuery = function(nodeOrSelector){//先接受一个节点或者选择器
  let nodes = {}//声明一个空的伪数组
  if(typeof nodeOrSelector === 'string'){//如果接受的是一个字符串
    let temp = document.querySelectorAll(nodeOrSelector)//建立一个临时的伪数组
    for(let i=0;i<temp.length;i++){
      nodes[i] = temp[i]//遍历一遍，放进nodes，获得一个只有key:value和length和__proto__的纯净的伪数组
  }   nodes.length = temp.length
  }else if(nodeOrSelector instanceof node){//如果是一个节点，就封装成伪数组
    nodes = {0:nodeOrSelector,length:1}
  }
  nodes.addClass = function (classes){//给nodes添加addClass属性
    for(let i=0;i<nodes.length;i++){
     nodes[i].classList.add(classes)//用的是DOM的API
   }
  }
  nodes.setText = function (text){给nodes添加setText属性
   for(let i=0;i<nodes.length;i++){
     nodes[i].textContent = text
   }
  }
  return nodes//把nodes送出去
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

jQuery 接受旧节点，返回新的对象，新API调用的还是DOM得API

学习jQuery的过程，基本思路

  1. 封装数组
    把节点的所有兄弟（不包括自己）放进一个伪数组
    HTML代码
<body>
  <ul>
    <li id="item1">选项1</li>
    <li id="item2">选项2</li>
    <li id="item3">选项3</li>
    <li id="item4">选项4</li>
    <li id="item5">选项5</li>
  </ul>
</body>

JS代码第一步，找到所有兄弟，放进伪数组

var allChildren = node.parentNode.children//获得节点node的父节点的所有子标签
 var array = { length: 0 }
  for (let i = 0; i < allChildren.length; i++) {
    if (allChildren[i] !== node) {//如果子标签不是node自己，而是他的所有兄弟
      array[array.length] = allChildren[i]//把他们放进array伪数组里，这里不用array[i] = allChild[i]的原因是i可能会跳过一个，不能一一对应。
      array.length += 1//每放进一个，length+1
    }
  }

JS代码第二步，封装成函数

function getSiblings(node) { //这就叫API，node就是需要外部输入的节点.函数名叫getSiblings
  var allChildren = node.parentNode.children

  var array = {
    length: 0
  }
  for (let i = 0; i < allChildren.length; i++) {
    if (allChildren[i] !== node) {
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array//把这个伪数组送出去
}
getSiblings(item3)//调用函数，获取item3这个节点的所有兄弟

注：判断子标签是不是给定的节点自己不用==或者！=是因为这两个太复杂了。

  1. 命名空间
    2.1 参照DOM的API命名，document.xxx()，我们也可以声明一个变量比如
window.mydom = {}
mydom.getSiblings = getSliblings

mydom.getSiblings(item3)//使用API

2.2 命名空间的好处：
1 那么为什么要使用命名空间呢，假如你封装了很多API，你想要别人也能使用这个工具，就取个名字比如mydom，方便宣传，能让别人一眼知道该去哪里找到你的API。
2 如果不使用命名空间，比如别人也声明了一个getSiblings = xxx，那么就会被覆盖掉。
命名空间后的代码

window.mydom = {} /*yui*/
mydom.getSiblings = function (node) { 
  var allChildren = node.parentNode.children
  var array = { length: 0 }
  for (let i = 0; i < allChildren.length; i++) {
    if (allChildren[i] !== node) {
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}

2.3 但是每次调用需要输入mydom.getSiblings(item3)有点麻烦，为什么不能直接输入item3.getSiblings()呢。怎么实现呢？来看这个例子：我们在Node的公有属性中直接添加一个函数

Node.prototype.getSiblings = function (){ console.log(1)}
item3.getSliblings() //1

我们来修改下上面的封装函数

Node.prototype.getSiblings = function () { 
  var allChildren = this.parentNode.children
  var array = { length: 0 }
  for (let i = 0; i < allChildren.length; i++) {
    if (allChildren[i] !== this) {
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}
item3.getSiblings ()

注：为什么使用this就能获取node呢？因为item3.getSiblings ()
等同于item3.getSiblings.call(item3)

这样直接在原型链上添加函数的缺点：万一别人也添加了相同的，就会覆盖。
换一种方法：

window.node2 = function(node){//node就是需要操作的那个节点
  return{//返回的是一个对象，key为getSiblings，value为function(){}
  getSiblings:function(){}
}
}
var node2 = node2(item3)//item3就是函数里的node
node2.getSiblings()

把setSiblings的函数体放进去

window.node2 = function(node){//node就是需要操作的那个节点
  return{//返回的是一个对象，key为getSiblings，value为function(){}
  getSiblings:function(){
     var allChildren = this.parentNode.children
     var array = { length: 0 }
     for (let i = 0; i < allChildren.length; i++) {
     if (allChildren[i] !== this) {
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}
}
}
var node2 = node2(item3)//item3就是函数里的node
node2.getSiblings()

这样就实现了使用node2.getSiblings()的需求

把代码中的node2改成jQuery

window.jQuery= function(node){
  return{
  getSiblings:function(){
     var allChildren = this.parentNode.children
     var array = { length: 0 }
     for (let i = 0; i < allChildren.length; i++) {
     if (allChildren[i] !== this) {
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}
}
}
var node2 = jQuery(item3)
node2.getSiblings()

这就是jQuery的基本思路。
jQuery功能更加强大，不仅可以接受node节点，还能接受选择器

window.jQuery= function(nodeOrSelector){
 let node
 if (typeof nodeOrSelector === 'string'){
   node = document.querySelector(nodeOrSelector)  
}else{ node = nodeOrSelector}
  return{
  getSiblings:function(){
     var allChildren = node.parentNode.children
     var array = { length: 0 }
     for (let i = 0; i < allChildren.length; i++) {
     if (allChildren[i] !== node) {
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}
}
}
var node2 = jQuery('#item3')
node2.getSiblings()
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • jQuery初体验，不深入但浅出
    一、为什么会出现jQuery呢？ 客观原因：原生JS的API有很多的不便，DOM的API尤其反人类，所以这一期就从...
    饥人谷_朱笑笑啊阅读 289评论 0赞 0
  • 模拟 jQuery API的实现
    jQuery 是什么？ jQuery实质上是一个构造函数，接受一个参数，这个参数可能是节点，然后返回一个方法对象去...
    夜未央_M阅读 676评论 0赞 0
  • jQuery 初体验
    什么是JQ？ 一个优秀的JS库 写越少的代码，做越多的事情 JQ的好处？ 简化JS的复杂操作 不再需要关心兼容性 ...
    卓小生阅读 261评论 0赞 1
  • jQuery初体验
    1. 封装一个函数 1.1 再封装一个 代码优化守则：如果出现类似的代码，就存在优化的可能 2. 命名空间 2.1...
    酒当茶阅读 407评论 0赞 0
  • jQuery初体验
    1.什么是jQuery?jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。js...
    well_907c阅读 123评论 0赞 1