一、基础知识

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);
});
});

封装自己的JS库的更多相关文章

  1. 尝试封装自己的js库

    学了js,用过jquery,然后想着让自己在js这一块有更深的提高,就想尝试着封装自己的js库,偶尔就添加自己想到的功能.有参考过其他大牛封装库的方法,不懂的地方也有借鉴过,但代码还是自己想,自己理解 ...

  2. 仿照jquery封装一个自己的js库(一)

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...

  3. 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  4. JsQuick--个人封装的Js库

    JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架 版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $ ...

  5. 仿照jquery封装一个自己的js库

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括 ...

  6. 仿照jquery封装一个自己的js库(二)

    本篇为完结篇.主要讲述如何造出轮子的高级特性. 一. css方法的高级操作 先看本文第一部分所讲的dQuery css方法 //css方法 dQuery.prototype.css=function( ...

  7. 在Vue将第三方JS库封装为组件使用

    第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...

  8. js库写法

    前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...

  9. ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及abp封装的Javascript函数库

    经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这里算是前面几节的一个初次试水. 首先我们数据库已经有的相应的数据. 模型和DTO已经建好,所以我们直接在服务 ...

随机推荐

  1. 百度之星复赛Astar Round3

    拍照 树状数组(SB了).求出静止状态下,每个点能看到多少个向右开的船c1[i],多少个向左开的船c2[i]. max{c1[i] + c2[j], (满足i <= j)  }即为答案.从后往前 ...

  2. 11 半联结 & 反联结

    半联结 和 反联结是 oracle 优化器能够选择用来在获取信息时应用的两个密切相关的联结方法(实际上是联结方法的选项) 半联结 IN 的半联结 select /* using in */ depar ...

  3. Android 四种简单的动画(淡入淡出、旋转、移动、缩放效果)

    最近在Android开发当中,用到的动画效果. public void onClick(View arg0) { // TODO 自动生成的方法存根 switch (arg0.getId()) { c ...

  4. 图形处理的api

      [1]旋转      public class MainActivity extends Activity { private float degrees;// 图片旋转的角度 @Override ...

  5. sqlserver 2008 服务器拒绝连接;拒绝访问指定的数据库

    sqlserver配置管理器----sqlserver网络配置 --- 启用 named pipes OK 由于之前的程序是SQL2000开发的,迁移到SQL20008出了这个问题. 二 和主题没有什 ...

  6. centos JDK安装

    第一步:查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java versi ...

  7. D3.js 力导向图的制作

    力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...

  8. SyncServer obj

  9. Java线程(一):线程安全与不安全

    作为一个Java Web开发人员,很少也不需要去处理线程,因为服务器已经帮我们处理好了.记得大一刚学Java的时候,老师带着我们做了一个局域网聊天室,用到了AWT.Socket.多线程.I/O,编写的 ...

  10. 爬虫基础学习 转【http://www.cnblogs.com/huangxincheng/archive/2012/11/08/2759752.html】

    这一篇我们聊聊在页面抓取时应该注意到的几个问题. 一:网页更新 我们知道,一般网页中的信息是不断翻新的,这也要求我们定期的去抓这些新信息,但是这个“定期”该怎么理解,也就是多长时间需要 抓一次该页面, ...