1. jQuery 是什么
jQuery是JavaScript的一个库,包含很多可复用的函数,也就是一个特殊的 API。
jQuery的官方文档
2. jQuery 的引入
a. 在jQuery官网下载相应的版本,用<script>标签在Html文档中引用
b. 通过CDN使用 如用微软提供的
<script src=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js”></script>
使用CDN的好处:
- 减少等待时间
- 增加网页的同时载入速度
- 更好的缓存
3. jQuery 获取的对象
DOM获取的对象 div 和jQuery获取的对象 $div 的相互转化:
<div id= 'x' ></div> // Html
var div = document.getElementById('x')
var $div = $('#x')
将jQuery对象就转换成了DOM对象
var div = $div[0] 或 div = $div.get(0)
将DOM对象转换成了jQuery对象
var $div = $(div)
4. jQuery 原来如此
jQuery揭秘,让我们用DOM的API实现jQuery的addClass()和text()的部分功能:
window.jQuery = function(nodeOrSelector) {
//jQuery函数参数nodeOrSelector可以传递节点也可以传递CSS选择器
let nodes = {}
if (typeof nodeOrSelector === 'string'){
//判断传递的参数类型,CSS选择器
let temp = document.querySelectorAll(nodeOrSelector)
//找到DOM文档树中所有含有该选择器的节点
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) { //节点添加class属性
classes.forEach((value) => {
for (let i=0; i<nodes.length; i++) {
nodes[i].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 // 将函数jQuery()简化为 $()
于是,我们就可以使用jQuery了:
var $div = $('div') // 查找所有div标签
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.text('hi') // 可将所有 div 的 textContent 变为 hi
正如 jQuery 官网所说:write less,do more。或许,这就是大道至简吧。