根据之前介绍的DOM的api实在太难记忆和使用繁杂 所以为了更好的调用John Resig 大神造了jquery的轮子
jquery的核心The Write Less,Do More,简洁的API、优雅的链式、强大的查询与便捷的操作。
做一个简单的jquery的功能
var $div = $('div') //输入div
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
1.参数传递
var ('div')
要实现上面这个功能,我的理解是首先设置window对象jQuery为函数返回的结果,然后把参数'div'传递到函数内的DOM,作为变量进行下一步的操作。
window.jQuery=function(selector){
let alldiv=document.querySelectorAll(selector)
}
window.$ = jQuery
2.返回对象
div.setText('hi') // 可将所有 div 的 textContent 变为 hi
可以观察得到$div是一个对象,它的key有addClass和setText。
那我也返回一个含有addClass和setClass的对象。
window.jQuery=function (selector){
let alldiv=document.querySelectorAll(selector)
return{
addClass:function (){},
setClass:function(){}
}
}
window.$ = jQuery
3.补全对象
我们得到了alldiv,它是一个伪数组。如果每个div都要添加class的话,需要一个for循环,然后每一次用DOM的方法里的classList.add功能对div添加class。
addClass: function(){
for(var i=0;i<alldiv.length;i++){
alldiv[i].classList.add("red")
}
setText: function(){
for(var i=0;i<alldiv.length;i++){
alldiv[i].textContent = "hi"
}
把addClass和setText的内容结合到函数内,得到:
window.jQuery=function (selector){
let alldiv=document.querySelectorAll(selector)
return{
addClass: function(){
for(var i=0;i<alldiv.length;i++){
alldiv[i].classList.add("red")
}
},
setText: function(){
for(var i=0;i<alldiv.length;i++){
alldiv[i].textContent = "hi"
}
}
}
}
window.$ = jQuery