博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第208天:jQuery框架封装(一)
阅读量:6291 次
发布时间:2019-06-22

本文共 4475 字,大约阅读时间需要 14 分钟。

一、事件框架

1、DOM2 --事件流

事件流 :冒泡 捕获

1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。

1.1.1浏览器兼容问题处理

如何去判断一个浏览器是否支持某个功能

其实就是判断对象是否拥有某个方法或者属性

1 if(dom.addEventListener ){2    dom.addEventListener(type, fn, false);3 }else if(dom.attachEvent){4    //如果支持 --IE5    //6    dom.attachEvent('on' + type, fn);7 }

1.1.2 DOM2- addEventListener 优点

传统:元素只能绑定一个事件

DOM2:可以绑定多个

动态的添加和移除事件

1.1.3阻止冒泡

1 W3C:e.stopPropagation2 IE:event.cancelBubble = true;

1.1.4阻止默认行为

1 W3c:e.preventDefault();2 IE:event.returnValue = false;

 

1.2事件委托

 

1.3使用三种方式封装框架

使用三种方式封装框架:

1 原型方式

我们必须要先实例化才能使用

Var $$ =function(){}

$$.prototype={}

$$= new $$ ()

2 json方式  -- 对象的字面量形式

我们不用实例化,对象的字面量就是原型对象的一个实例。

所以使用json的时候不需要实例化了。

Var $$= {on:function(){}}

$$.on()

3 extend 模块化

 

二、选择框架

基本选择器

标签选择器、class选择器、ID选择器、通配符选择器、群组选择器

1、层次选择器

2、属性选择器

3、表单选择器

4、层次+多组

 

foo = foo||bar ,这行代码是什么意思?为什么要这样写?

答案:if(!foo) foo = bar; //如果foo存在,值不变,否则把bar的值赋给foo。

短路表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。

二、CSS样式

1、如何获取和设置样式

1.1访问css的两种方式

常用方式:点语法

1 doms[0].style.color ='yellow'2 键值对方式3 doms[0].style['color']='yellow'4 我们封装框架只能使用第二种

1.2设置css

1 //设置css2 function setStyle(doms,key,value){3     for(var i=0;i

封装css框架

2.1原生获取

1 //获取样式值2 console.log(doms[0].style.color)//color是通过style方式添加上去的,可以通过style.color获取3 console.log(doms[0].style.background)//background是通过class方式添加上去的,获取不到

 

原生获取存在问题:

1通过class设置的样式也是无法获取

2 动态添加的样式也无法获取

解决:

使用getComputedStyle函数

用法 - 第一种用法:

 

1 console.log(window.getComputedStyle(dom[0],null).color)

 

第二种方式:

1 console.log(window.getComputedStyle(dom[0],null)[‘color’])

 

getComputedStyle语法:

语法如下:

 var style = window.getComputedStyle("元素", "伪类");

 例如:

 var dom = document.getElementById("test"),

 style = window.getComputedStyle(dom , ":after"); /*如果不是伪类 直接null*/

 

 /*getComputedStylestyle的区别

 我们使用element.style也可以获取元素的CSS样式声明对象,但是其与getComputedStyle方法还有有一些差异的。

 只读与可写

 正如上面提到的getComputedStyle方法是只读的,只能获取样式,不能设置;而element.style能读能写,能屈能伸。

 获取的对象范围

 getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>getComputedStyle方法返回对象中length属性值(如果有)就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), element.style就是0

IE不支持getComputedStyle的解决办法

1 dom.currentStyle[key]

2.2封装

1 function css(context, key, value){ 2         /*如果传递过来的是dom 如果传递过来的是id*/ 3         var dom = $$.isString(context)?$$.$all(context) : context; 4 //        如果是数组 5         if(dom.length){ 6             //先骨架骨架 -- 如果是获取模式 -- 如果是设置模式 7 //            如果value不为空,则表示设置 8             if(value){ 9                 for(var i = dom.length - 1; i >= 0; i--){10                     setStyle(dom[i],key, value);11                 }12  //            如果value为空,则表示获取13             }else{14                 return getStyle(dom[0]);15             }16 //            如果不是数组17         }else{18             if(value){19                 setStyle(dom,key, value);20             }else{21                 return getStyle(dom);22             }23         }24         function getStyle(dom){25             if(dom.currentStyle){26                 return dom.currentStyle[key];27             }else{28                 return getComputedStyle(dom,null)[key];29             }30         }31         function setStyle(dom,key,value){32             dom.style[key] = value;33         }34     }

 

三、属性框架

三个主要的:attraddClassremoveClass

1、封装attr

1 function attr(context,key,value){ 2     var doms = $$.$all(context) 3     //设置模式 4     if(value){ 5         for(var i =0;i

2封装 addClass

1 function addClass(context,name){ 2     var doms = $$.$all(context) 3     for(var i=0;i

3、封装removeClass

1 function removeClass(context, name){ 2     var doms = $$.$all(context); 3     for(var i= 0,len=doms.length;i

 

4、封装hasClass

1 function hasClass(context,name){ 2     var doms = $$.$all(context) 3     var flag = true; 4     for(var i= 0,len=doms.length;i

 

5、封装getClass

1 //获取2 function getClass(id){3     var doms = $$.$all(id)4     return $$.trim(doms[0].className).split(" ")5 }

 

四、内容框架

1、封装Html

1 function html(context,value){ 2     var doms = $$.$all(context) 3     //设置模式 4     if(value){ 5         for(var i = 0;i

 

2、封装Text

1 function text(dom,text){2     dom.textContent = text3 }

 

3、封装val

Jquery

1 //基本用法 设置 2 $("p").val("Hello world!"); 3 //基本用法 获取 4 console.log($("#test").val()); 5  6 //单选框 7 console.log($("#fruit").val()); 8 $( "#fruit" ).val( "芒果" ); 9 10 //多选框11 console.log($("#vage").val())12 $( "#vage" ).val([ "土豆", "西葫芦" ]);13 14 //checkbox15 $( "input[name='checkboxname']").val([ "三国演义", "水浒传", "红楼梦" ]);

 

转载地址:http://yfuta.baihongyu.com/

你可能感兴趣的文章
2(2).选择排序_冒泡(双向循环链表)
查看>>
MySQL 索引 BST树、B树、B+树、B*树
查看>>
微信支付
查看>>
CodeBlocks中的OpenGL
查看>>
短址(short URL)
查看>>
第十三章 RememberMe——《跟我学Shiro》
查看>>
mysql 时间函数 时间戳转为日期
查看>>
索引失效 ORA-01502
查看>>
Oracle取月份,不带前面的0
查看>>
Linux Network Device Name issue
查看>>
IP地址的划分实例解答
查看>>
如何查看Linux命令源码
查看>>
运维基础命令
查看>>
入门到进阶React
查看>>
SVN 命令笔记
查看>>
检验手机号码
查看>>
重叠(Overlapped)IO模型
查看>>
Git使用教程
查看>>
使用shell脚本自动监控后台进程,并能自动重启
查看>>
Flex&Bison手册
查看>>