第208天:jQuery框架封装(一)-阿里云开发者社区

开发者社区> 半指温柔乐> 正文

第208天:jQuery框架封装(一)

简介: 一、事件框架 1、DOM2 --事件流 事件流 :冒泡 捕获 1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。 1.1.1浏览器兼容问题处理 如何去判断一个浏览器是否支持某个功能 其实就是判断对象是否拥有某个方法或者属性 1 if(dom.
+关注继续查看

一、事件框架

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    //如果支持 --IE
5    //
6    dom.attachEvent('on' + type, fn);
7 }

1.1.2 DOM2- addEventListener 优点

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

DOM2:可以绑定多个

动态的添加和移除事件

1.1.3阻止冒泡

1 W3C:e.stopPropagation
2 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 //设置css
2 function setStyle(doms,key,value){
3     for(var i=0;i<doms.length;i++){
4         doms[i].style[key]=value
5     }
6 }

封装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<doms.length;i++){
 6             doms[i].setAttribute(key,value)
 7         }
 8     }else{
 9         //获取模式
10       return doms[0].getAttribute(key)
11     }
12 }

2封装 addClass

 1 function addClass(context,name){
 2     var doms = $$.$all(context)
 3     for(var i=0;i<doms.length;i++){
 4         addOneName(doms[i])
 5     }
 6     /*给一个元素添加class*/
 7     function addOneName(dom){
 8         dom.className = dom.className + " " +  name
 9     }
10 }

3、封装removeClass

 1 function removeClass(context, name){
 2     var doms = $$.$all(context);
 3     for(var i= 0,len=doms.length;i<len;i++){
 4         removeName(doms[i],name);
 5     }
 6     function removeName(dom,name){
 7         /!*'add buy hide' --- 'add buy'*!/
 8         dom.className =  dom.className.replace(name,'')
 9        /!* dom.className = dom.className + ' ' + name;*!/
10     }

 

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<len;i++){
 5         flag = flag && check(doms[i],name)
 6     }
 7 
 8     return flag;
 9     //判定单个元素
10     function check(element,name){
11         return -1<(" "+element.className+" ").indexOf(" "+name+" ")
12     }
13 }

 

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<doms.length;i++){
 6             doms[i].innerHTML = value
 7         }
 8     }else{
 9         /*获取模式*/
10         return doms[0].innerHTML
11     }
12 }

 

2、封装Text

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

 

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 //checkbox
15 $( "input[name='checkboxname']").val([ "三国演义", "水浒传", "红楼梦" ]);

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10081 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26790 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13887 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9161 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22403 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4504 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
245
文章
205
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载