jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍
学习了妙味,用原生的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来判断是否要进行阻止默认事件和阻止事件冒泡
1 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);
};
jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能的更多相关文章
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- 原生 JavaScript 代替 jQuery【转】
目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- 原生javascript与jquery 的比较
JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽 轻量级的脚本语言,比较容易学习 运行在用户机器上,运行结果和处理相对比较快. ...
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery 学习之路(1):引子
一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- 常见的dom操作----原生JavaScript与jQuery
1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document. ...
- Jquery学习之路(二) 实现table样式的设定
上一篇jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看<锋利的Jquery>,说实话正在看了.由于正在学习中,我 ...
随机推荐
- UWP 律师查询 MVVM
APP简介 律师查询是基于聚合数据的律师查询接口做的,这个接口目前处于停用状态,但是,由于我是之前申请的,所以,还可以用,应该是无法再申请了. 效果图 开发 一.HttpHelper 既然是请求接口的 ...
- 在.NET Core 里使用 BouncyCastle 的DES加密算法
.NET Core上面的DES等加密算法要等到1.2 才支持,我们可是急需这个算法的支持,文章<使用 JavaScriptService 在.NET Core 里实现DES加密算法>需要用 ...
- Asp.net MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合
今天为大家分享下 Asp.net MVC 将数据从前台传递到后台的几种方式. 环境:VS2013,MVC5.0框架 1.基本数据类型 我们常见有传递 int, string, bool, double ...
- Redis数据库
Redis是k-v型数据库的典范,设计思想及数据结构实现都值得学习. 1.数据类型 value支持五种数据类型:1.字符串(strings)2.字符串列表(lists)3.字符串集合(sets)4.有 ...
- PHP-----文件系统的交互
本文讲解php中于文件交互中所使用的函数 代码示例 <html> <head> <title> File Detail </title> </he ...
- git命令行操作
从本地上传代码到仓库(假设已经建好仓库): 1.初始化: git init 2.将所有文件加入缓存区: git add * 3.提交当前工作空间的修改内容: git commit -m 'commit ...
- 全网独家MongoDB Certified DBA Associate考试认证视频
该视频意在让所有学员一次通过考试,避免重复考试而承担的巨额考试费用! 目前MongDB发展迅猛,有赶超mysql,和oracle看齐的苗头.在这个时候MongoDB也适时的推出了官方的认证考试&quo ...
- myrocks复制中断问题排查
背景 mysql可以支持多种不同的存储引擎,innodb由于其高效的读写性能,并且支持事务特性,使得它成为mysql存储引擎的代名词,使用非常广泛.随着SSD逐渐普及,硬件存储成本越来越高,面向写优化 ...
- AutoMapper(三)
返回总目录 自定义类型转换 有时,需要完全控制一个类型到另一个类型的转换.一个类型一点都不像另一个类型,而且转换函数已经存在了,在这种情况下,你想要从一个“宽松”的类型转换成一个更强壮的类型,例如一个 ...
- 我认为JS还可以改进的点
曾经我一度在寻找JS的替代语言,尝试过CoffeeScript/TypeScript/Dart(都是浅尝).不为什么原因,而是当你写的越多的JS,越觉得JS很多时候显得很操蛋.好在ES2015和Bab ...