- jQuery 在兼容性方面做得很好,1.7 版本兼容到 IE 6
- jQuery 还有动画、AJAX 等模块,不止 DOM 操作
- jQuery 的功能更丰富
基础(对象转换)
var div = document.getElementById('x')
var $div = $('#x')
jQuery的原型为jQuery.prototype
div
和 \$div
的联系是:
\$div === \$(document.getElementById('x'))
div === \$(div)[0]
div
和 \$div
的区别是:
document.getElementById()
返回的是DOM
对象,而$()
返回的是jQuery
对象
自己实现jQuery
首先封装两个函数
addclass()
nodes.addClass = function(classes) {
//classes是一个数组//
classes.forEach((value) => {
for(let i = 0; i< nodes.length; i++){
//遍历所有节点//
nodes[i].classList.add(value)
}
})
}
setText()
nodes.setText = function(text) {
if (text === undefined){
var texts = []
for(let i = 0;i< nodes.length; i++){
texts.push(nodes[i].textContent)
}
return texts
//text()为空时获取原有的text//
}else{
for(let i = 0;i< nodes.length; i++){
nodes[i].textContent = text
}
//不为空时改变text//
}
}
获取节点
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
}
}
return nodes
}
调用
window.$ = jQuery
//缩写
var $div = $('div')
$div.addClass('red')
$div.setText('hi')
API
$nodes.addClass(function(index,currentClass){
return 'sd-'+index;
});
//依次添加sd-0 sd-1 sd-2 sd-3 的class//
var classes = ['red','blue','black'];
$nodes.addClass(function(index,currentClass){
return classes[index];
});
//前三项就会添加red、blue、black的class//
$(x).on('click', function(){
$nodes.toggleClass('red');
})
//建一个button并给它id为x每点一次button,nodes就增加或删除'red'class//
网友评论