继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装;只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高

/**
* Created by Jason on 2016/12/31.
*/
//jquery 的构造函数
function Jquery(arg){
//用来存选出来的元素
this.elemenets=[];
switch(typeof arg){
case 'function' :
domReady(arg);
break;
case 'string' :
this.elements = getEle(arg);
break;
case 'object' :
this.elements.push(arg);
break;
}
}
//DOM ready onload 如果参数是函数,则进行domReady操作
function domReady(fn){
// FF chrome
if(document.addEventListener){
//jquery中已经省略false,false解决低版本火狐兼容性问题
document.addEventListener('DOMContentLoaded',fn,false);
}else{
document.attachEvent('onreadystatechange',function(){
if(document.readyState=='complete'){
fn();
}
});
}
} function getByClass(oParent,sClass){
//高级浏览器支持getElementsByClassName直接使用
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(sClass);
}else{
//不支持需要选中所有标签的类名来选取
var res=[];
var aAll=oParent.getElementsByTagName('*');
for(var i=;i<aAll.length;i++){
//选中标签的全部类名是个str='btn on red'=aAll[i].className 使用正则 reg=/\b sClass \b/g
var reg= new RegExp('\\b'+sClass+'\\b','g');
if(reg.test(aAll[i].className)){
res.push(aAll[i]);
}
}
return res;
}
} //如果参数是str 进行选择器的操作
function getByStr(aParent,str){
//用来存放选中的元素的数组 这个数组在getEle存在,为了每次执行的时候都需要清空,所以使用局部函数的变量
var aChild=[];
//aParent开始是[document],再执行完getByStr的时候getEle将aParent指向了getByStr函数的返回值aChild数组以确保循环父级下面的所有匹配元素
for(var i=;i<aParent.length;i++){
switch(str.charAt()){
//id选择器 eg: #box 使用document.getElementById选取
case '#':
var obj=document.getElementById(str.substring());
aChild.push(obj);
break;
//类选择器 eg: .box 使用上面封装的getByClass选取
case '.':
//由于一个标签可以有多个类选择器 所以需要进行循环选取
var aRes=getByClass(aParent[i],str.substring());
for(var j=;j<aRes.length;j++){
aChild.push(aRes[j]);
}
break;
//今天先简单的编写选择器 这里我们假设除了id和类选择器,就是标签选择器
default:
// 如果是li.red 那么用正则来判断
if(/\w+\.\w+/g.test(str)){
//先选择标签,在选择类选择器 使用类选择器的时候重复选择器函数即可
var aStr=str.split('.');
var aRes=aParent[i].getElementsByTagName(aStr[]);
var reg=new RegExp('\\b'+aStr[]+'\\b','g');
//循环选取标签,注意外层已经有i的循环
for(var j=;j<aRes.length;j++){
if(reg.test(aRes[j].className)){
aChild.push(aRes[j]);
}
}
//如果是li:eq(2) 或者 li:first这样的选择器 书写正则是的时候注意()可有可以无为? 有或者没有为* 至少有一个也就是若干个为+ {2,5}这种则为2-5个
}else if(/\w+\:\w+(\(\d+\))?/g.test(str)){
//讲str进行整理 [li,eq,2] 或者 [li,first]
var aStr=str.split(/\:|\(|\)/);
//aStr[2]是eq、lt、gt传入的参数,这里使用n来保存
var n=aStr[];
//在父级下获取所有匹配aStr[0]项的标签
var aRes=aParent[i].getElementsByTagName(aStr[]);
//这时候会循环判断aStr[1]项是的内容,jquery中经常使用的为eq、lt、gt、even、odd、first、last
switch(aStr[]){
//如果是eq则把第n项传入aChild数组即可
case 'eq':
aChild.push(aRes[n]);
break;
//如果是lt需要将aRes数组中获取到的小于n的标签循环推入aChild中
case 'lt':
for(var j=;j<n;j++){
aChild.push(aRes[j]);
}
break;
//如果是gt则和lt相反
case 'gt':
for(var j=n;j<aRes.legth;j++){
aChild.push(aRes[j]);
}
break;
//如果是event的话需要隔数添加,注意jquery中的event是从第0开始循环的
case 'event':
for(var j=;j<aRes.length;j+=){
aChild.push(aRes[j]);
}
break;
//如果是odd的和event不同的只是从第1项开始循环
case 'odd':
for(var j=;j<aRes.length;j+=){
aChild.push(aRes[j]);
}
break;
//如果是first,则将aRes[0]推入aChild
case 'first':
aChild.push(aRes[]);
break;
case 'last':
aChild.push(aRes[aRes.length-]);
break;
}
//属性选择器 eg:input[type=button] 同样适用正则来判断
}else if(/\w+\[\w+\=\w+\]/g.test(str)){
//将属性选择器切成数组 [input,type,button]
var aStr=str.split(/\[|\=|\]/g);
var aRes=aParent[i].getElementsByTagName(aStr[]);
//在选中标签中选出有aRes[1]的属性
for(var j=;j<aRes.length;j++){
//把属性值为aRes[2]的标签推入aChild中
if(aRes[j].getAttribute(aStr[])==aStr[]){
aChild.push(aRes[j]);
}
}
//标签选择器 div、span
}else{
var aRes=aParent[i].getElementsByTagName(str);
for(var j=;j<aRes.length;j++){
aChild.push(aRes[j]);
}
}
break;
}
}
return aChild;
} function getEle(str){
//如果是字符串的话先要去除收尾空格 eg:" on replace index play auto "
var arr = str.replace(/^\s+|\s+$/g,'').split(/\s+/g);
var aChild = [];
var aParent = [document];
for(var i = ;i<arr.length;i++){
aChild = getByStr(aParent,arr[i]);
aParent = aChild
}
return aChild;
} //实现jquery $符号的写法
function $(arg){
return new Jquery(arg);
} //css方法
Jquery.prototype.css=function(name,value){
//设置单个样式的时候使用 oEle.css(name,value); 注意可能是一个元素,也可能是一组元素,需要循环添加
if(arguments.length==){
for(var i=;i<this.elements.length;i++){
this.elements[i].style[name]=value;
}
}else{
//当参数为字符串是获取样式 oEle.css(name); 当参数为object的时候是批量添加样式{name1:value1,name2:value2} 这里判断的是参数类型
switch(typeof name){
//获取元素的样式只要返回获取的样式的值即可,jqeury中当选中一组元素获取样式的时候是默认返回第一个元素的样式
case 'string':
return this.elements[].style[name];
break;
//当为参数为json的时候循环json添加样式
case 'object':
for(var i=;i<this.elelemts.length;i++){
for(var item in name){
this.elements[i].style[item]=name[item];
}
}
break;
}
}
}; //attr 获取属性 和css的思路是一样的,这里就不过多的注释了
Jquery.prototype.attr=function(name,value){
if(arguments.length==){
for(var i=;i<this.elements.length;i++){
this.elements[i].setAttribute[name]=value;
}
}else{
switch(typeof name){
case 'string':
return this.elements[].getAttribute[name];
break;
case 'object':
for(var i=;i<this.elements.length;i++){
for(var item in name){
this.elements.setAttribute[item]=item;
}
}
break;
}
}
}; //事件,使用了下面的事件绑定函数封装 jquery中事件全是绑定的
'mouseover mouseout click keydown keyup resize scroll load change'.replace(/\w+/g,function(sEv){
Jquery.prototype[sEv]=function(fn){
for(var i=;i<this.elements.length;i++){
addEvent(this.elements[i],sEv,fn);
}
}
}); //事件绑定函数的封装
function addEvent(obj,sEv,fn){
//高级浏览器支持addEventListener
if(obj.addEventListener){
obj.addEventListener(sEv,function(ev){
var ev=ev || event;
fn.apply(obj,arguments);
},false);
}else{
obj.attachEvent('on'+sEv,function(ev){
var ev=ev || event;
fn.apply(obj,arguments);
});
}
}
//onmouseenter事件的添加,onouseenter是进入范围后只触发一次,这里使用onmouseover实现
Jquery.prototype.mouseenter=function(fn){
for(var i=;i<this.elements.length;i++){
addEvent(this.elements[i],'mouseenter',function(ev){
//获取鼠标上一次的位置
var ev=ev || event;
var oFrom=ev.fromElement || ev.relatedTarget;
//在构造函数中,如果有return就直接返回return后面的东西,如果没有return会返回构造函数的属性值;这里判断上一次鼠标的位置是不是在this的范围之内,如果是就直接返回空结束onmouseenter事件,若果没有就修改this的指向
if(this.contains(oFrom)){
return;
}
fn&&fn.apply(this,arguments);
});
}
};

原生js实现jquery库中部分事件的功能(jquery库封装二)的更多相关文章

  1. jquery ajax 中各个事件执行顺序

    jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...

  2. 原生js监听input值改变事件

    哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...

  3. ActiveX(二)Js 监听 ActiveX中的事件

    在上一篇随笔:ActiveX(一)第一个简单的Demo 中,已经可以实现 js 单向调用 ActiveX 中的方法,在很多情况下ActiveX中的方法的执行时相对耗时.耗性能的.在这样的情况下.Act ...

  4. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  5. jquery ajax中各个事件执行顺序如下

    $(function(){ setTimeout(function(){ $.ajax({ url:'/php/selectStudent.php', }); },0); $(document).aj ...

  6. 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

    最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...

  7. 原生js给同一对象绑定多个事件

    事件监听 var son = document.querySelector(".son"); son.addEventListener('click', once1); funct ...

  8. jquery 获取点击事件的id;jquery如何获取当前触发事件的控件ID值

    写html时这样绑定 <input type="text" name="address4" id="address4" onFocus ...

  9. js_原生js实现上拉加载更多的功能。

    1.人生啊,是我莽撞了啊.这是我公司一个喜欢读书的女孩子的个性签名,喜欢哪些句子,不悲伤,却切切实实的令人喜好. 2.写程序是一件很直接明了的事情,明白了就是明白了,不懂就是不懂,不懂装懂的会让你走很 ...

随机推荐

  1. C#Abstract抽象类的语法

    1. 抽象方法只能放在抽象类中,且不用实现(没有方法体); 2.抽象类中可以放非抽象方法; 3.抽象类不能实例化,只能实例化他的子类,是为子类"活着";

  2. Java Web学习系列——Maven Web项目中集成使用Spring

    参考Java Web学习系列——创建基于Maven的Web项目一文,创建一个名为LockMIS的Maven Web项目. 添加依赖Jar包 推荐在http://mvnrepository.com/.h ...

  3. 多线程进行n皇后计算

    在浏览zhihu的时候, 看到了这个问题:Linux c++服务器端这条线怎么走? http://www.zhihu.com/question/22608820 , 其中排第一的答案说的很不错.针对他 ...

  4. 【原】GO 语言常见错误

    1. Scan error on column index 4: converting string "" to a int: strconv.ParseInt: parsing ...

  5. Struts2国际化文件乱码解决

    方法1:使用native2ascii进行编码转换 代码如下: native2ascii -encoding UTF-8 GlobalMessages.properties NewGlobalMessa ...

  6. 提高你的Java代码质量吧:使用构造函数协助描述枚举项

    一.分析 一般来说,我们经常使用的枚举项只有一个属性,即排序号,其默认值是从0.1.2... ....但是除了排序号外,枚举还有一个(或多个)属性. 二.场景 比如,可以通过枚举构造函数声明业务值,定 ...

  7. POCO系列之——什么是POCO

    做过JAVA的朋友应该对这个比较熟悉了在JAVA中叫POJO,POCO是Plain Old CLR Object的缩写.所谓的POCO就是那些不包括INSERT.ADD.DEL等数据持久化操作的以及不 ...

  8. BootStrap详解之(二)

    六.内容 Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428 中心内容 .lead 将字体大小.加粗.行高修改 (无卵高深用) 标记 mark ...

  9. UNIX环境高级编程——进程基本概述

    一.什么是进程 从用户的角度来看进程是程序的一次执行过程.从操作系统的核心来看,进程是操作系统分配的内存.CPU时间片等资源的基本单位.进程是资源分配的最小单位.每一个进程都有自己独立的地址空间与执行 ...

  10. Java中关于类型自动提升的两个注意点。

    问题一:在进行赋值运算时,进行类型提升: 例如:short s1 = 1;s1 = s1 + 1; (错的编译通不过) short s2 = 1;s2 += 1;(正确,编译和运行都能通过) 为什么呢 ...