大致介紹
學習了妙味，用原生的JavaScript實現jQuery中的某些部分功能
定義自己的函數庫lQuery
$()選擇器的實現
jQuery是面向對象的，所以自己編寫的也要是面向對象的，看看基本的結構
// 定義lQuery對象function lQuery(lArg){}function lQ(lArg){ return new lQuery(lArg);}// css()方法lQuery.prototype.css = function(){};// html()方法lQuery.prototype.html = function(){};先來仿寫jQuery中的$(函數)的方法
// 定義lQuery對象function lQuery(lArg){ // 用typeof判斷參數的類型是 function 、 switch( typeof lArg){ case 'function': // 如果采用這種寫法，給lQ綁定相同的函數，但是只會執行一次 // window.onload = lArg; // break; }}如果寫出這樣的函數就會出現問題
lQ(function(){ alert(1); }); lQ(function(){ alert(2); });這樣就只會彈出'2'，但是在jQuery中都會彈出，所以上面的方法不對，我們采用事件綁定的形式來解決這個問題
// 綁定事件函數function lQbind(obj,eventName,fn){ // 標準瀏覽器 if(obj.addEventListener){ obj.addEventListener(eventName,fn,false); }else{ // IE瀏覽器 obj.attachEvent('on'+eventName,fn); }}可以使用這樣調用
switch( typeof lArg){ case 'function': // 如果采用這種寫法，給lQ綁定相同的函數，但是只會執行一次 // window.onload = lArg; // break; lQbind(window,'load',lArg); break; }仿寫jQuery中的$('.div')、$('#div')、$('div')三種方法
這三種方法的區別是第一個字符的不同，所以我們可以根據第一個字符的不同來進行區別對待
先來仿寫$('.div')
// '.div' case '.': this.elements = getClass(document,lArg.substring(1)); break;
由于getElementsByClassName()是HTML5里的方法，像IE8以下不兼容所以我們自己寫了一個簡單的getClass方法
// 獲取class屬性function getClass(obj,name){ var arr = []; var elems = obj.getElementsByTagName('*'); for(var i=0;i<elems.length;i++){ if(elems[i].className == name){ arr.push(elems[i]); } } return arr;}仿寫$('#div')
case '#': this.elements.push(document.getElementById(lArg.substring(1))); break; // '.div' case '.':
仿寫$('div')
default: // getElementsByTagName返回的是一個類數組NodeList,為了防止以后出現麻煩，要把他轉為一個 // 數組 this.elements = toArray(document.getElementsByTagName(lArg)); break;
由于getElementsByTagName返回的是一個類數組NodeList,為了防止以后出現麻煩，要把他轉為一個數組，自定義了一個toArray方法
// 將一個類數組轉為真正的數組function toArray(lickArr){ var arr = []; for(var i=0;i<lickArr.length;i++){ arr.push(lickArr[i]); } return arr;}仿寫$(對象)的方法
// window document
case 'object':
this.elements.push(lArg);
break;
html()的實現
html()方法分為有參和無參
// html()方法lQuery.prototype.html = function(str){ if(str){ //設置 for(var i=0;i<this.elements.length;i++){ this.elements[i].innerHTML = str; } }else{ return this.elements[0].innerHTML; } return this;};on()方法的實現
利用前面實現的綁定函數可以很容易的實現
lQuery.prototype.on = function(eventName,fn){
for(var i=0;i<this.elements.length;i++){
lQbind(this.elements[i],eventName,fn);
}
}
click()和mouseover()方法的實現
利用on()方法可以容易的實現
// click()方法lQuery.prototype.click = function(fn){ this.on('click',fn); return this;}// mouseover()方法lQuery.prototype.mouseover = function(fn){ this.on('mouseover',fn); return this;}hide()和show()方法的實現
// hide()方法lQuery.prototype.hide = function(){ for(var i=0;i<this.elements.length;i++){ this.elements[i].style.display = 'none'; } return this;}// show()方法lQuery.prototype.show = function(){ for(var i=0;i<this.elements.length;i++){ this.elements[i].style.display = 'block'; } return this;}hover()方法的實現
// hover()方法 lQuery.prototype.hover = function(fnover,fnout){ this.on('mouseover',fnover); this.on('mouseout',fnout); return this; }css()方法的實現
實現$('div').css('width')和$('div').css('width','200px')
lQuery.prototype.css = function(attr,value){ if(arguments.length == 2){ for(var i=0;i<this.elements.length;i++){ this.elements[i].attr = value; } } if(arguments.length == 1){ return getStyle(this.elements[0],attr); }}定義了getStyle()方法是為了能找到行內樣式以外的樣式
// 獲取屬性function getStyle(obj,attr){ if(obj.currentStyle[attr]){ obj.currentStyle[attr]; }else{ obj.getComputedStyle(obj,false)[attr]; }}attr()方法的實現
用了和css()不同的方法
// attr()方法lquery.prototype.attr = function(attr,value){ if(arguments.length == 2){ //設置 for(var i=0;i<this.elements.length;i++){ this.elements[i].setAttribute(attr,value); } } else if(arguments.length == 1){ //獲取 return this.elements[0].getAttribute(attr); } return this;};eq()方法的實現
實現$('div').eq(1)
由于eq()方法返回的對象要操作許多lQuery的方法，所以返回的對象必須是lQuery對象
lQuery.prototype.eq = function(num){ return lQ(this.elements[num]); };index()方法的實現
實現$('div').index() 返回這個元素在同輩元素中的位置
lQuery.prototype.index = function(){ var elems = this.elements[0].parentNode.children; for(var i=0;i<elems.length;i++){ if( elems[i] == this.elements[0] ){ return i; } } };阻止默認事件和阻止事件冒泡
在jQuery中 return false 是阻止默認事件和事件冒泡，所以我們要對lQbind函數進行修改，通過判斷綁定的函數的返回值是否為false來判斷是否要進行阻止默認事件和阻止事件冒泡
function lQbind(obj,events,fn){ if(obj.addEventListener){ obj.addEventListener(events,function(ev){ if( fn() == false ){ ev.preventDefault(); ev.cancelBubble = true; } },false); } else{ obj.attachEvent('on'+events,function(){ if( fn() == false ){ window.event.cancelBubble = true; return false; } }); } }find()方法的實現
仿寫$('div').find('.box')和$('div').find('#box')方法
這里涉及到通過判斷find()參數第一個字符的方法來進行不同的操作和$()方法差不多，在循環時要使用concat()方法來連接數組，最后返回一個lQuery對象
lQuery.prototype.find = function(sel){ var arr = []; if( sel.charAt(0) == '.' ){ for(var i=0;i<this.elements.length;i++){ arr = arr.concat(getClass( this.elements[i] , sel.substring(1) )); } } else{ for(var i=0;i<this.elements.length;i++){ arr = arr.concat(toArray(this.elements[i].getElementsByTagName(sel))); } } return lQ(arr); };以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
