函数库—— 特定种类的API.
1、封装函数 ——
写一个函数，重复封装函数，实现一个DOM API 没有提供的功能
//html骨架
<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>
//第一个函数 - 获取所有子元素节点的API
window.Node2 = function(node){
return {
getSiblings : function(){
var allChildren =node.parentNode.children //children是获取所有元素节点
var array = { //新建一个空为数组
length:0
}
for(let i=0;i<allChildren.length;i++){ //遍历数组
if(allChildren[i] !== node){ //不等于item3的元素都放到伪数组中
array[array.length] = allChildren[i] //伪数组没有push方法
array.length += 1 //array加一
}
}
return array
},
addClass : function(classes){
classes.forEach( (value)=> node.classList.add(value))
}
}
}
var node2 = Node2(item3)
node2.getSiblings()
node2.addClass(['a','b','c'])
2、命名空间 ——
一个DOM下面的存放封装的函数的对象
var dom = { }
dom.getSiblings(node)
dom.addClass(node{a:true;b:false})
上面代码块修改：node放到前面
* 方法一：扩展node接口，直接在node.prototype上面添加函数
* 方法二：新的接口，BetterNode ,具体实现方法看下面代码块
//「无侵入方法」
function Node2(node){
return {
element: node,
getSiblings: function(){
},
addClass: function(){
}
}
}
let node =document.getElementById('x')
let node2 = Node2(node)
node2.getSiblings()
node2.addClass()
函数x调用对象的两种方法
- obj.x //点运算符
- obj['x'] //方括号运算符
指定this的分类: - 立即调用函数时用到了call属性，就叫做显示指定this
- 立即调用函数时没有用到this,就叫做隐士指定this
item3.getSiblings.call(item3) //这里的this就是item3
item3.addClass.call(item3,['a','b','c']) //这里的this也是item3
this就是对象，arguments就是伪数组。
3、再把函数名字改成jQuery
jQuery本质上是创建一个构造函数，这个函数的参数可能是节点，然后返回一个方法对这个参数进行操作，从而创建DOM API 没有提供特定功能函数。
window.jQuery = function(nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector === 'string'){
let temp
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){
classes.forEach((value)=> {
for(let k=0;k<nodes.length;k++){
nodes[k].classList.add(value)
}
} )
}
nodes.text = function(text){
if(text === undefined){
var texts = []
for(let i=0;i<nodes.length;i++){
texts.push(nodes[i].textContent)
}
return texts
}else{
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text}
}
}
return nodes
}
var node2 = jQuery('ul > li')
node2.addClass(['blue'])
node2.text('qinglin')
4、总结
jQuery文档就是API文档；
window.就是jQuery()函数的简写
1、页面中引用jQuery的方法：只要求引用路径在前，代码块在后就可以,可以放到head或body中
//方法一：到官网，src指向jQuery.js或jQuery.min.js
<scrip src = "相对路径/绝对路径"></scrip>
<script>
jQuery
</script>
//方法二：搜索cdnjs > jQuery,copy路径
<scrip src = "https://code.jquery.com/jquery-3.4.1.min.js"></scrip>
<script>
jQuery
</script>
2、官网提供的jQuery提供的下载地址区别：
https://code.jquery.com/jquery-3.4.1.min.js //压缩富文本链接混淆版本(也叫压缩版)，变量少，节省带宽和提高生产性能,用于生产环境的jQuery。
https://code.jquery.com/jquery-3.4.1.js //未压缩富文本链接，未混淆版本，适合开发和调试使用
https://code.jquery.com/jquery-3.4.1.min.map //映射文件，在用户运行jQuery不需要映射文件，他只是改善了开发人员的调试器体验，就是调试用的文件。
3、jQuery获取页面中带有id选择器的节点
$('#xxx') 或 jQuery('#xxx') //xxx就是idName
4、
<ul>
<li></li>
<li></li>
</ul>
请写出 $('li') 的结构。
-
$('li') 是一个对象，
image.png
-
$('li')的原型：
image.png
- 总结：$('li') 是一个对象，它的 key 有 length，它的原型（共享属性）为 jQuery.prototype，jQuery.prototype 的 key 有 addClass、removeClass、text、html 和 on 等。
5、【面试常见题目】
题目
<div id=x></div>
var div = document.getElementById('x')
var $div = $('#x')
- 请说出 div 和 $div 之间的联系是:
-
div一样
-
div的第一项就是div
-
- 请说出 div 和 $div 之间的区别是:
- div 的属性和方法有 childNodes firstChid nodeType 等
- $div 的 属性和方法有 addClass removeClass toggleClass 等
5、简版jQuery实例
window.jQuery = function(xx){
var nodes = {} //新建一个伪数组
//分析接收到的节点或选择器
if (typeof xx === 'string') {
let temp
temp = document.querySelectorAll(xx)
for (let i = 0; i < temp.length; i++) {
nodes[i] = temp[i]
}
nodes.length = temp.length
} else if (xx instanceof Node) {
nodes = { //以哈希形式返回
0: xx,
length: 1
}
}
nodes.addClass = function (classes) {
classes.forEach((value) => {
for (let k = 0; k < nodes.length; k++) {
nodes[k].classList.add(value)
}
})
}
nodes.text = function (text) {
if (text === undefined) {
var texts = []
for (let i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent)
}
return texts
} else {
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 的 textContent 变为 hi
代码实现细节：
- 声明一个伪数组
- 判断传入的参数是节点还是字符串，若是字符串则用querySelectorAll()方法获取，若是节点则以哈希形式存储在声明的伪数组中
- 以闭包形式封装功能函数
jQuery优点：
- 兼容性好
- jQuery不止DOM操作，还有动画、AJAX等模块
- JQuery功能丰富
- jQuery使用了prototype
网友评论