第208天：jQuery框架封装（一）

一、事件框架

1、DOM2 --事件流

事件流 ：冒泡 捕获

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

1.1.1浏览器兼容问题处理

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

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

 if(dom.addEventListener ){
    dom.addEventListener(type, fn, false);
 }else if(dom.attachEvent){
    //如果支持 --IE
    //
    dom.attachEvent('on' + type, fn);
 }

1.1.2 DOM2- addEventListener 优点

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

DOM2：可以绑定多个

动态的添加和移除事件

1.1.3阻止冒泡

 W3C：e.stopPropagation
 IE:event.cancelBubble = true;

1.1.4阻止默认行为

 W3c:e.preventDefault();
 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的两种方式

常用方式：点语法

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

1.2设置css

 //设置css
 function setStyle(doms,key,value){
     for(var i=0;i<doms.length;i++){
         doms[i].style[key]=value
     }
 }

封装css框架

2.1原生获取

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

原生获取存在问题：

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

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

解决：

使用getComputedStyle函数

用法 - 第一种用法：

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

第二种方式：

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

getComputedStyle语法：

语法如下：

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

例如：

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

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

/*getComputedStyle与style的区别

我们使用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的解决办法

 dom.currentStyle[key]

2.2封装

 function css(context, key, value){
         /*如果传递过来的是dom 如果传递过来的是id*/
         var dom = $$.isString(context)?$$.$all(context) : context;
 //        如果是数组
         if(dom.length){
             //先骨架骨架 -- 如果是获取模式 -- 如果是设置模式
 //            如果value不为空，则表示设置
             if(value){
                 for(var i = dom.length - 1; i >= 0; i--){
                     setStyle(dom[i],key, value);
                 }
  //            如果value为空，则表示获取
             }else{
                 return getStyle(dom[0]);
             }
 //            如果不是数组
         }else{
             if(value){
                 setStyle(dom,key, value);
             }else{
                 return getStyle(dom);
             }
         }
         function getStyle(dom){
             if(dom.currentStyle){
                 return dom.currentStyle[key];
             }else{
                 return getComputedStyle(dom,null)[key];
             }
         }
         function setStyle(dom,key,value){
             dom.style[key] = value;
         }
     }

三、属性框架

三个主要的：att、raddClass、removeClass

1、封装attr

 function attr(context,key,value){
     var doms = $$.$all(context)
     //设置模式
     if(value){
         for(var i =0;i<doms.length;i++){
             doms[i].setAttribute(key,value)
         }
     }else{
         //获取模式
       return doms[0].getAttribute(key)
     }
 }

2、封装 addClass

 function addClass(context,name){
     var doms = $$.$all(context)
     for(var i=0;i<doms.length;i++){
         addOneName(doms[i])
     }
     /*给一个元素添加class*/
     function addOneName(dom){
         dom.className = dom.className + " " +  name
     }
 }

3、封装removeClass

 function removeClass(context, name){
     var doms = $$.$all(context);
     for(var i= 0,len=doms.length;i<len;i++){
         removeName(doms[i],name);
     }
     function removeName(dom,name){
         /!*'add buy hide' --- 'add buy'*!/
         dom.className =  dom.className.replace(name,'')
        /!* dom.className = dom.className + ' ' + name;*!/
     }

4、封装hasClass

 function hasClass(context,name){
     var doms = $$.$all(context)
     var flag = true;
     for(var i= 0,len=doms.length;i<len;i++){
         flag = flag && check(doms[i],name)
     }

     return flag;
     //判定单个元素
     function check(element,name){
         return -1<(" "+element.className+" ").indexOf(" "+name+" ")
     }
 }

5、封装getClass

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

四、内容框架

1、封装Html

 function html(context,value){
     var doms = $$.$all(context)
     //设置模式
     if(value){
         for(var i = 0;i<doms.length;i++){
             doms[i].innerHTML = value
         }
     }else{
         /*获取模式*/
         return doms[0].innerHTML
     }
 }

2、封装Text

 function text(dom,text){
     dom.textContent = text
 }

3、封装val

Jquery

 //基本用法 设置
 $("p").val("Hello world!");
 //基本用法 获取
 console.log($("#test").val());

 //单选框
 console.log($("#fruit").val());
 $( "#fruit" ).val( "芒果" );

 //多选框
 console.log($("#vage").val())
 $( "#vage" ).val([ "土豆", "西葫芦" ]);

 //checkbox
 $( "input[name='checkboxname']").val([ "三国演义", "水浒传", "红楼梦" ]);