作业题
- 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>
- CSS代码
.red{
color:red;
}
- 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的过程，基本思路
- 封装数组
把节点的所有兄弟（不包括自己）放进一个伪数组
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这个节点的所有兄弟
注：判断子标签是不是给定的节点自己不用==或者！=是因为这两个太复杂了。
- 命名空间
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()
网友评论