原生js封装jquery
来源:互联网 发布:xp系统cpu优化工具 编辑:程序博客网 时间:2024/05/28 11:28
原生js封装jquery
由于本人经验优先,对有些解释也是含糊不清,模棱两可,大家在借鉴的同时可以深思一下
1. 如何封装$符
// 1.把$挂载在window对象上(function (window) {//这个是参数 // body... //构造函数使用 function Jquery(){ } function $(){ new Jquery(); //jquery实例 } window.Jquery=window.$=$;})(window)//这个是window对象那
在js中,所有的操作都是基于对对象的方法的使用,例如function,其实就是一个Function对象的实例化,很多js api方法都是基于对象方法的使用,alert(),弹出对话框,其实就是window对象下的方法,可谓说是,js是一门基于原型的面向对象语言,像其他后台语言一样,有封装 继承 多态,但是它不像java语言一样,有那么强的特征
class person{//定义人这一个类 属性 行为}
这是一个java的类,一眼就可以看出来这是定义了一个person的类
function Person(){ //普通函数function对象 构造函数->类 this.name="max"; this.sun=function(){}}//function 通过字面量的行式Function创建的实例var a = new Person();console.log(a.name); //max
通过构造函数方式,定义一个person类,在类中定义属性和方法,通过new字符一个Person对象的实例,其中,a继承person的所有方法和属性,在构造函数时,this指向实例化对象a
2. 封装的部分jquery,id,class,标签,以及事件
// 1.把$挂载在window对象 function Jquery(arguments) { //本质就是Functoion的实例对象 prototype arguments this // body... this.event=[]; //在构造函数时,this指向实例化对象 复制对象(继承) switch(typeof arguments){ case "function": //代表传进来是函数 myAddEvent(window,"load",arguments); break; case "string": switch(arguments.charAt(0)){ case "#": var obj=document.getElementById(arguments.substring(1)); // 去掉第一个# this.event.push(obj); break; case ".": this.event=getClass(document,arguments.substring(1)); break; default: this.event=getTags(document,arguments); break; } break; case "object": break; }}//给函数绑定事件function myAddEvent(obj,sev,fn){ if(obj.addachEvent){ obj.addachEvent("on"+sev,fn); }else{ obj.addEventListener(sev,fn,false); } }//遍历所有的元素,找到所有相同的class名称元素function getClass(ohtml,oclass){ //解决兼容性问题 var myElement=ohtml.getElementsByTagName("*");//查找到所有元素 var result=[]; //element元素 for(var i=0;i<myElement.length;i++){ if(myElement[i].className==oclass){ result.push(myElement[i]) } } return result;}//找到dom节点下的所有标签元素function getTags(ohtml,otag){ var myElement=ohtml.getElementsByTagName("*");//查找到所有元素 var result=[]; for(var i=0;i<myElement.length;i++){ if(myElement[i].tagName==otag.toUpperCase()){ result.push(myElement[i]) } } return result;}Jquery.prototype={ click:function(fn){ for(var i=0;i<this.event.length;i++){ myAddEvent(this.event[i],"click",fn) } }}function $(arguments){ return new Jquery(arguments);}
一切基于js的操作,都是基于对象的操作,如果想要学好js,设计模式和面向对象一定要掌握好
阅读全文
0 0
- 原生js封装jquery
- 原生js实现对Ajax的封装(模仿jquery)
- 原生js封装好的动画函数+jQuery函数animate
- 原生js实现jQuery常用方法的封装
- 原生js封装Ajax
- JS 原生方法封装
- js原生事件封装
- 原生js封装ajax
- 原生JS封装Ajax
- 原生JS的封装
- 原生JS封装ajax()
- 原生JS 封装运动函数
- 原生js封装ajax方法
- 原生JS封装AJAX请求
- 原生js封装ajax函数
- 原生JS封装ajax方法
- js 原生ajax:封装函数
- 原生js---轮播图封装函数
- 中文乱码小结
- 使用node.js搭建简易的个人博客(一)
- 第八讲 拦截器
- 深入探讨array_map、foreach、for循环处理数组的效率
- 小小白爬虫入门——selenium模拟登录qq空间
- 原生js封装jquery
- c++学习笔记,面向对象设计模式,装饰者模式
- HeadFirstJava 11异常处理
- 蓝桥杯 摆动序列
- [LeetCode 解题报告]008.String to Integer (atoi)
- Error:Cannot find module 'stylus'
- codevs 1214 线段覆盖(贪心 or dp)
- 1、intellij idea 常用快捷键 加快开发速度
- L