一、事件框架
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*/
/*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的解决办法
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 }
三、属性框架
三个主要的：att、raddClass、removeClass
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([ "三国演义", "水浒传", "红楼梦" ]);
