28进阶 初识jQuery

jQuery就是一个javascript函数库
学习资料推荐:
阮一峰 jQuery
jQuery API文档 https://www.jquery123.com/

封装一个函数
  1. 获取一个节点的兄弟姐妹
function getSiblins(node) {}
  1. 给节点添加class
function addClass(node.calsses) {}
命名空间

命名空间就是一个可以由用户自己定义的作用域,在不同的作用域中可以定义相同名字的变量,互不干扰,系统能够区分它们。

命名空间的好处:
1.便于向别人介绍你写的库
2.防止互相冲突、覆盖
例如这样:

window.yydom={}
yydom.getSiblings=getSiblings
yydom.addClass=addClass
//使用
yydom.getSiblings(node)
yydom.addClass(node,classes)
把node放前面,像下面这样使用
node.getSiblings()
node.addClass()
  1. 方法一:扩展Node接口——直接在Node.prototype上加函数
    缺点:会互相覆盖
Node.prototype.getSiblings=function() {
  var allChildren=this.parentNode.children
  var array={length:0}
  for(let i=0;i

注:this就是call的第一个参数,

  1. 方法二:使用新的接口Node
    优点:无侵入
function Node2(node) {
  return {
    element:node,
    getSiblings:function() {
    
    },
    addClass:function() {

    }
  }
}
let node=document.getElementById('x')
let node2=Node2(node)
node2.getSiblings()
node2.addClass()
自己实现一个jQuery的API的方法

给上述的Node2改个名字为jQuery,就是一个简单的jQuery了
再给个缩写alias

window.$=jQuery

注:建议使用 jQuery 构造出来的对象都在前面加一个 $ ,以便记住它是jQuery的,避免和DOM弄混

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.length = temp.length
    } else if (nodeOrSelector instanceof Node) {
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }
    nodes.addClass = function (classes) {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].classList.add(classes)
        }
    }
    nodes.setText = function (text) {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text
        }
    }
    return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red')//给div添加一个class='red'
$div.setText('hi')//将div的文本内容设置为'hi'
真正的jQuery远比这强大
  1. jQuery兼容性强大,1.7版本可以兼容IE6
  2. jQuery还有动画、AJAX等模块,不止DOM操作
  3. JQuery功能更丰富
  4. jQuery使用了prototype
作业

你可能感兴趣的:(28进阶 初识jQuery)