一、基础知识
1、点击计数
第一种：
var aBtn=document.getElementsByTagName('input');
var i=0;
for(i=0;i<aBtn.length;i++){
addClick(aBtn[i]);
}
function addClick(obj){
var count=0;
obj.onclick=function (){
alert(count++);
};
}
第二种：
var aBtn=document.getElementsByTagName('input');
var i=0;
for(i=0;i<aBtn.length;i++){
(function (obj){
var count=0;
obj.onclick=function (){
alert(count++);
};
})(aBtn[i]);
}
第三种：
var aBtn=document.getElementsByTagName('input');
var i=0;
for(i=0;i<aBtn.length;i++){
aBtn[i].onclick=(function(count){//参数与局部变量等价
return function(){
alert(count++);
}
})(0);
}
2.链式操作
先在库中设置
vQuery.prototype.css=function(attr,value){
if(arguments.length==2){//设置样式
var i=0;
for(i=0;i<this.elements.length;i++){
this.elements[i].style[attr]=value;
}
}else{//获取样式
if(typeof attr=='string'){
return getStyle(this.elements[0],attr);
}else{
for(i=0;i<this.elements.length;i++){
var k='';
for(k in attr){//循环得到json的值
this.elements[i].style[k]=attr[k];
}
}
}
}
return this;//函数的链式操作
};
其他方法类似
然后调用
$(function(){
$('#btn2').css({'background':'gray','width':'100px'}).toggle(function(str){alert(1);
alert($('#txt1').attr('value'));
},function(){alert(0);
$('#txt1').attr('value',35235345);
}).hover(function(){
$('#div1').hide();
alert($(this).css('width'));
});
});
3.阻止冒泡
先封装
function myAddEvent(obj,sEv,fn){
if(obj.attachEvent){//IE下
obj.attachEvent('on'+sEv,function(){
if(false==fn.call(obj)){//此处obj为发生事件的那个元素，用 call()解决 this 在 IE 下使用绑定事件的指向问题
event.cancelBubble=true;
return false;
}
});
}else{//ff.chrome下
obj.addEventListener(sEv,function(ev){
if(false==fn.call(obj)){
ev.cancelBubble=true;
ev.preventDefault();
}
},false);
}
}
再调用
$(document).bind('contextmenu',function(){//阻止右键菜单
alert(0);return false;//console.log($(this));=vQuery
});
4.插件扩展
$().extend('size',function(){
return this.elements.length;
});
$(function(){
alert($('div').size());//得到所选元素的个数
});
二、进行封装
function myAddEvent(obj,sEv,fn){
if(obj.attachEvent){//IE下
obj.attachEvent('on'+sEv,function(){
if(false==fn.call(obj)){//此处obj为发生事件的那个元素，用 call()解决 this 在 IE 下使用绑定事件的指向问题
event.cancelBubble=true;
return false;
}
});
}else{//ff.chrome下
obj.addEventListener(sEv,function(ev){
if(false==fn.call(obj)){
ev.cancelBubble=true;
ev.preventDefault();
}
},false);
}
}
function getByClass(oParent,sClass){
var aEle=oParent.getElementsByTagName('*');
var aResult=[];console.log(aEle[0]);
var i=0;
for(i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function vQuery(vArg){
this.elements=[];//用来保存选中的元素
switch(typeof vArg){
case 'function'://console.log(vArg);
myAddEvent(window,'load',vArg);
break;
case 'string':
switch(vArg.charAt(0)){
case '#':
var obj=document.getElementById(vArg.substring(1));
this.elements.push(obj);
break;
case '.':
this.elements=getByClass(document,vArg.substring(1));console.log(this.elements);
break;
default:
this.elements=document.getElementsByTagName(vArg);
}
break;
case 'object':
this.elements.push(vArg);
}
}
vQuery.prototype.click=function(fn){
var i=0;
for(i=0;i<this.elements.length;i++){
myAddEvent(this.elements[i],'click',fn);
}
return this;//函数的链式操作
};
vQuery.prototype.show=function(){
var i=0;
for(i=0;i<this.elements.length;i++){
this.elements[i].style.display='block';
}
return this;//函数的链式操作
};
vQuery.prototype.hide=function(){
var i=0;
for(i=0;i<this.elements.length;i++){
this.elements[i].style.display='none';
}
return this;//函数的链式操作
};
vQuery.prototype.hover=function(fnOver,fnOut){
var i=0;
for(i=0;i<this.elements.length;i++){
myAddEvent(this.elements[i],'mouseover',fnOver);
myAddEvent(this.elements[i],'mouseout',fnOut);
}
return this;
};
vQuery.prototype.css=function(attr,value){
if(arguments.length==2){//设置样式
var i=0;
for(i=0;i<this.elements.length;i++){
this.elements[i].style[attr]=value;
}
}else{//获取样式
if(typeof attr=='string'){
return getStyle(this.elements[0],attr);
}else{
for(i=0;i<this.elements.length;i++){
var k='';
for(k in attr){
this.elements[i].style[k]=attr[k];
}
}
}
}
return this;//函数的链式操作
};
vQuery.prototype.attr=function(attr,value){
if(arguments.length==2){//设置属性
var i=0;
for(i=0;i<this.elements.length;i++){
this.elements[i][attr]=value;
}
}else{//获取属性
return this.elements[0][attr];
}
return this;//函数的链式操作
};
vQuery.prototype.toggle=function(){
var i=0;
var _arguments=arguments;//同this一样，arguments也要设置一个变量
for(i=0;i<this.elements.length;i++){
addToggle(this.elements[i]);
}
function addToggle(obj){
var count=0;
myAddEvent(obj,'click',function(){//console.log(arguments);
_arguments[count++%_arguments.length].call(obj);//alert(count++);
});
}
return this;//函数的链式操作
};
vQuery.prototype.eq=function(n){
return $(this.elements[n]);
};
function appendArr(arr1,arr2){
var i=0;
for(i=0;i<arr2.length;i++){
arr1.push(arr2[i]);
}
}
vQuery.prototype.find=function(str){
var i=0;
var aResult=[];//存放临时数据
for(i=0;i<this.elements.length;i++){
switch(str.charAt(0)){
case '.':
var aEle=getByClass(this.elements[i],str.substring(1));
aResult=aResult.concat(aEle);console.log(aResult);
break;
default:
var aEle=this.elements[i].getElementsByTagName(str);
//aResult=aResult.concat(aEle);
appendArr(aResult,aEle);
}
}
var newVquery=$();
newVquery.elements=aResult;
return newVquery;
};
function getIndex(obj){
var aBrother=obj.parentNode.children;
var i=0;
for(i=0;i<aBrother.length;i++){
if(aBrother[i]==obj){
return i;
}
}
}
vQuery.prototype.index=function(){
return getIndex(this.elements[0]);
};
vQuery.prototype.bind=function(sEv,fn){
var i=0;
for(i=0;i<this.elements.length;i++){
myAddEvent(this.elements[i],sEv,fn);
}
};
vQuery.prototype.extend=function(name,fn){
vQuery.prototype[name]=fn;//扩展插件
}
function $(vArg){
return new vQuery(vArg);
}
三、应用
1.简单的选项卡
$(function(){
var aBtn=$('#tab').find('ul').find('li');
var aDiv=$('#tab').find('.box').find('.content');
aBtn.click(function(){
aBtn.attr('className','link');
$(this).attr('className','hover');
aDiv.hide();
aDiv.eq($(this).index()).css('display','block');
});
});
2.淘宝幻灯片上下滑动效果
$().extend('size',function(){//添加插件
return this.elements.length;
});
$(function(){
var aBtn=$('#play').find('ol').find('li');
var oUl=$('#play').find('ul');
var aLi=oUl.find('li');
var iNow=0;
var timer=null;
aBtn.click(function(){
iNow=$(this).index();
tab();
});
function tab(){
aBtn.attr('className','');
aBtn.eq(iNow).attr('className','active');//console.log($(this));
oUl.animate({top:-150*iNow});
}
function timerInter(){
iNow++;
if(iNow==aBtn.size()){
iNow=0;
}
tab();
}
timer=setInterval(timerInter,2000);
$('#play').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(timerInter,2000);
});
});