加强学习知识点

今天，技术经理讲解了关于css样式与js相关的知识点：

以后会在工作中涉及到的要点：

1、H5+css3

优点：做出来的效果比较赞，但是首先应该考虑功能能正常实现，才考虑效果好不好看

缺点：这个新的技术用的相对比较少，涉及到的兼容性比较考虑的多，用于解决的方法是使用js+css2。

（补充：

H5优缺点：

    1、提高可用性和改进用户的友好体验;

　　2、有几个新的标签，这将有助于开发人员定义重要的内容;（更多的描述性标签，头部（header）、尾部（footer）、导航区域（nav）、侧边栏（aside）等标签）

　　3、可以给站点带来更多的多媒体元素(视频和音频);

　　4、可以很好的替代FLASH和Silverlight;（现在的移动 Web，有些是不支持 Flash 的，例如iphone）

　　5、当涉及到网站的抓取和索引的时候，对于SEO很友好;

　　6、将被大量应用于移动应用程序和游戏;（游戏可即时更新，自适应设备）

　　7、可移植性好。（跨平台，比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera 的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，）

　　缺点：

　　该标准并未能很好的被浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。

css3优缺点：

    1．减少开发与维护成本（css之前，有些效果是需要图片与html标签协作完成的，例如圆角，border-radius）

2．提高页面性能（让代码更简洁、页面结构更合理在进行Web开发时，减少多余的标签嵌套，以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。使用CSS3制作图形化网站无需任何图片，极大地减少HTTP的请求数量，并且提升页面的加载速度）

缺点：

并未很好的被浏览器所支持

在实际工作开发中可以先运用相对稳定的CSS3特性，并确保不会对尚不支持这些特性的浏览器造成影响。做到明智的使用，而不是盲目地滥用CSS3新特性。

）

     2、css2

优点：兼容性比较好，实现起来比较容易

缺点：效果不是很佳，可通过js控制修改

（补充：css2相对来说比较稳定，兼容性也较好。但是就是效果不佳）

     3、img

优点：不用考虑兼容性问题

缺点：大量的图片会占很大的内存，加载很慢，解决的办法：相对比较小的图片，可以集合到一张大的图片，进行定位显示，大的图片可以延迟加载，滚动条滑动到一定位置再进行加载图片。

（一：预加载；二：延迟加载

首先可以在页面载入时候预加载图片，用css的background将图片加载到屏幕外面的背景，只有保持图片路径不变，等到页面加载到显示图片的位置，缓存图片很快被显示出来，但是缓存图片与页面内容一起加载，则加载时间长，所以为解决这个问题，出现了延迟加载

预加载的方式有三种：

1、css+javascript：利用background与addLoadEvent()

2、javascript：可在用户登录时候预加载，创建img1 = new Image();，声明图片源地址img3.src = "../path/to/image-003.gif，则可加载任意多的图片，也可在后面封装一个函数用于延迟加载addLoadEvent()

3、ajax预加载：此方式不仅用于加载图片，还可加载css，javascript，最高效

window.onload = function () {

     setTimeout( function () {

         // XHR to request a JS and a CSS

         var  xhr = new  XMLHttpRequest();

         xhr.open( 'GET' , 'http://domain.tld/preload.js' );

         xhr.send( '' );

         xhr = new  XMLHttpRequest();

         xhr.open( 'GET' , 'http://domain.tld/preload.css' );

         xhr.send( '' );

         // preload image

         new  Image().src = "http://domain.tld/preload.png" ;

     }, 1000);

};

）

      还有一点就是ajax缓存，一个页面打开第一次相对很慢，但是第二次之后就会很快，这个是缓存（缓存可以分为两种：一是浏览器缓存，二是服务器缓存）

（补充：）

      事件绑定：例如click()

javascript绑定：1、DOM绑定，原生，<input  οnclick="alert('谢谢支持')"  type="button"  value="点击我，弹出警告框" />

   自定义函数绑定，<input  οnclick="myAlert()"  type="button"  value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
    alert("谢谢支持");
}
</script>

   2、js代码绑定

<input  id="demo"  type="button"  value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").οnclick=function(){
    alert(this.getAttribute("type"));  //  this 指当前发生事件的HTML元素，这里是<div>标签
}
</script>

   3、绑定事件监听函数（要注意IE9以下的浏览器以及其他浏览器的不同用法）

   function addEvent(obj,type,handle){
       try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
           obj.addEventListener(type,handle,false);
       }catch(e){
           try{  // IE8.0及其以下版本
               obj.attachEvent('on' + type,handle);
           }catch(e){  // 早期浏览器
               obj['on' + type] = handle;
           }
       }
   }

jquery事件绑定：1、bind(),$(selector).bind(event,data,function)

单事件处理：例如 $(selector).bind("click",data,function);

　　　　　　　　　　  多事件处理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);

　　　　　　　　　　　　　　　　  2.利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, ...})　

　　　　　　　　　　　　　　　　  3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　

适用所有版本，但是根据官网解释，自从jquery1.7版本以后bind()函数推荐用on()来代替。

2、  live(),$(selector).live(event,data,function)

单事件处理：例如 $(selector).live("click",data,function);

　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).live("click dbclick mouseout",data,function);

　　　　　　　　　　　　  2.利用大括号灵活定义多事件，例如 $(selector).live({event1:function, event2:function, ...})　

　　　　　　　　　　　　  3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　        大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　

jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法，jquery1.9以上版本用on()方法来代替。

  3、delegate(): delegate()  为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。$(selector).delegate(childSelector,event,data,function)

单事件处理：例如 $(selector).delegate(childselector,"click",data,function);

　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);

　　　　　　　　　　　　  2.利用大括号灵活定义多事件，例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})　

　　　　　　　　　　　　   3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　         大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；

　jque ry1.4.2及其以上版本；
  4、on(), $(selector).on(event,childselector,data,function)

单事件处理：例如 $(selector).on("click",childselector,data,function);

　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).on("click dbclick mouseout",childseletor,data,function);

　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector);　

　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　    大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　

　　childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；　

jquery1.7及其以上版本；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式；

相同点：

　　1.都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式;

　　2.均是通过事件冒泡方式，将事件传递到document进行事件的响应；

      在处理事件时候应该注意会涉及到 “冒泡排序” ，这一点需谨慎

      还有就是要考虑方法的复用性，这是重点，大大减少代码量，提高效果

      接下来需了解 BOM 、XML

XML是为基础，协议、文本都是基于XML

例如：XHTML、html 4、html 5、xlt、http、soap、tcp、json、SQttile

其实有这么多的新技术出现，只是因为前者不够用，才不断的出现新的技术

补充： BOM可见博客中的下一篇文章《javascript BOM与DOM》

XML可见博客的下一篇文章《XML》

以上是要点，需查看更多的文章，补充完整