仿照jQuery封裝一個(gè)自己的js庫
接下來，我講封裝一個(gè)仿jQuery的庫夕晓，主要包含jQuery中綁定宛乃，css，等方法蒸辆，我講它定義為 "HQuery"
$符號(hào)的封裝
jQuery中的 $ 符號(hào)意味著什么征炼？
先思考一下jQuery庫中alert(typeof $)的結(jié)果，它是一個(gè)對(duì)象吁朦，也是一個(gè)函數(shù)
所以美元符$字面上是jQuery柒室，其實(shí)就是一個(gè)jq對(duì)象，里面可以接受函數(shù)逗宜，字符串雄右，還要一種是對(duì)象(比如this)
給自己的Hquery填加$符號(hào)：
function $(arg) {
return new Hquery(arg)
}
Hquery是基于面向?qū)ο髮?shí)現(xiàn)的，所以我們需要先寫構(gòu)造函數(shù)纺讲，為了方便遍歷和其他方法的操作擂仍，所有內(nèi)容返回到一個(gè)數(shù)組中，這個(gè)數(shù)組衣服于Hquery對(duì)象存在熬甚，之后將為這個(gè)Hquery對(duì)象屬性添加方法
function Hquery(arg){ //參數(shù)是變體變量
this.elements = [] // 選擇器選擇的元素放到這個(gè)數(shù)組中
}
選擇器的封裝：
我們使用Hquery操作DOM等實(shí)現(xiàn)一系列的功能逢渔，選擇器是必不可少的，所有我們首先封裝好選擇器乡括，這樣就可以能省去document.getElementsByClass等等麻煩的操作
// 通過class選擇元素 因?yàn)閏lass可以有多個(gè)肃廓，所以我們需要push一下
function getByClass(oParent, sClass) {
var aClass = [];
var elems = oParent.getElementsByTagName('*')
for (var i=0; i<elems.length; i++){
if (elems[i].className == sClass){
aClass.push(elems[i])
}
}
return aClass
}
// 構(gòu)造函數(shù)
function Hquery(arg) {
this.elements = [];
switch (typeof arg){
case 'function': // 如果傳進(jìn)來的是function智厌，那么window.onload
/* window.onload = arg; // 通過on的方式綁定事件會(huì)產(chǎn)生覆蓋，*/
bindEvent(window, 'load', arg)
break;
case 'string':
switch (arg.charAt(0)){
case '#': //id 選擇器
this.elements.push(document.getElementById(arg.substring(1)))
break;
case '.':
this.elements=getByClass(document, arg.substring(1))
break;
default:
this.elements = toArray(document.getElementsByTagName(arg))
break;
}
break;
case 'object':
this.elements.push(arg)
break;
}
}
封裝事件:
function bindEvent(obj, event, fn) {
if (obj.addEventListener){ //在標(biāo)準(zhǔn)瀏覽器下
obj.addEventListener(event, fn, false)
} else { // IE瀏覽器下
obj.attachEvents('on' + event, fn)
}
}
// click方法
Hquery.prototype.click=function (fn) {
// for (var i=0;i<this.elements.length;i++){
// bindEvent(this.elements[i], 'click', fn)
// }
this.on('click', fn) // 上面兩行是本來寫法盲赊， 我這里改成了事件委托铣鹏，更高效
}
// mouseover方法
Hquery.prototype.mouseover=function (fn) {
// for (var i=0;i<this.elements.length;i++){
// bindEvent(this.elements[i], 'mouseover', fn)
// }
this.on('mouseover', fn)// 上面兩行是本來寫法， 我這里改成了事件委托哀蘑，更高效
}
// on方法
Hquery.prototype.on=function (event, fn) {
for (var i=0;i<this.elements.length;i++){
bindEvent(this.elements[i], event, fn)
}
}
hide和show也是比較常用的方法：
// hide
Hquery.prototype.hide = function () {
for (var i=0;i<this.elements.length;i++){
this.elements[i].style.display = 'none'
}
}
// show
Hquery.prototype.show = function () {
for (var i=0;i<this.elements.length;i++){
this.elements[i].style.display = 'block'
}
}
eq方法
// eq
Hquery.prototype.eq = function (index) {
//返回出來的是元素對(duì)象诚卸，原生下面沒有css(),肯定沒有，所以此時(shí)需要換為$下的對(duì)象
return $(this.elements[index])
}
其他的方法绘迁，我就不一一介紹了合溺，下面直接給大家上一個(gè)多種方法封裝好的，大家k'y
