同一个页面中多个script标签中代码运行情况

情况①,函数声明提前,后面定义的f1覆盖了前面的f1,故执行到alert时输出6

 <script type="text/javascript">
          var a, b, c;
          function f1(b,c){
               a = b + c;
               return a;
          }
          alert(f1(2,3));
          function f1(b,c){
               a = b * c;
               return a;
          }
 </script>
//输出6

情况②,JS是按块加载的。每个<script/>标签作为一块。按顺序执行,在第一个代码块中,f1还没被覆盖,故执行时输出5,执行到第二个代码块,f1被重新定义,此时会alert时输出6

 <script type="text/javascript">
      var a, b, c;
      function f1(b,c){
           a = b + c;
           return a;
      }
      alert(f1(2,3));
 </script>
 <script type="text/javascript">    
      function f1(b,c){
           a = b * c;
           return a;
      }
 </script>
//输出5

本文链接:同一个页面中多个script标签中代码运行情况

| Comments

IE条件注释

条件注释认识:
1.IE条件注释是IE专有的,能够根据条件显示代码块。
2.在其他浏览器看来条件注释是常规注释,因此本质上是无害的。
3.条件注释在IE5中首次出现,故只对IE5及以上的版本有效。

主要缺点:
条件注释放在html文件中而不是css中。若IE版本变动,不得不到每个页面中去更新维护。

条件:
gt : greater than,选择条件版本以上版本,不包含条件版本
lt : less than,选择条件版本以下版本,不包含条件版本
gte : greater than or equal,选择条件版本以上版本,包含条件版本
lte : less than or equal,选择条件版本以下版本,包含条件版本
! : 选择条件版本以外所有版本,无论高低

<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="zh-cn"><!--<![endif]-->

本文链接:IE条件注释

| Comments

Javascript函数认识

①函数实际上是对象,每个函数都是Function类型的实例,具有属性和方法。
②函数是对象,故函数名实际是一个指向函数对象的指针,不会与某个函数绑定。

③函数定义三种方式:

a、函数声明:function a(){ … }
b、函数表达式定义 :var a = function(){ … }
c、Function构造函数:var a = new Function(a, b, c) //最后一个参数始终是函数体,不推荐,两次解析代码,影响性能

④函数名仅是指向函数的指针,与包含对象指针的其他变量无不同。【不带括号的函数名访问的是函数指针】
⑤函数名是函数的指针,故定义同名函数,后者会覆盖前者,所以js中没有函数重载的概念。

函数重载:多个函数用同一个名字,但参数表即参数的个数或数据类型可以不同,调用的时候,虽然方法名字相同,但根据参数表可以自动调用对应的函数。

⑥函数声明与函数表达式的区别:

a、他俩唯一的区别在于解析器在向执行环境中加载数据时,顺序不一样。
b、解析器先读取函数声明,并使其在执行任何代码之前可调用【声明提前】
c、函数表达式要等到解析器执行到它所在的代码行时,才会真正被解析执行。
d、函数声明提升过程,读取并将函数声明添加到执行环境中。

⑦js中函数名本身就是一个变量,故函数可做为值来使用:

a、将函数像传递参数一样传递给另一个函数
b、将一个函数作为另一个函数的结果返回
c、可以从一个函数中返回另一个函数

⑧在函数内部有两个特殊的对象:

a、arguments是一个类数组对象,包含传入函数中的所有参数,主要用途是保存函数参数。
【该对象有一属性callee,该属性是一个指针,指向拥有这个arguments对象的函数】
b、this引用的是函数据以执行的环境对象
【哪个对象调用函数,this就指向谁;函数名就一变量,故不管那个对象调用函数,func1()和o.func1()指向的都是同一个函数】
c、另一对象属性caller,保存着调用当前函数的函数引用
【B函数中调用了A,此时A.caller将指向B函数】

⑨函数的属性和方法:

a、每个函数包含两个属性:length和prototype
* Ⅰ. length:函数希望接收的命名参数的个数
* Ⅱ. prototype:保存所有实例方法的真正所在
b、每个函数都包含两个非继承而来的方法:apply()和call()作用都是在特定的作用域中调用函数,相当于设置函数体内this的值【扩充作用域】。区别仅在于接收参数的方式不同。
c、bind():创建一个函数的实例,this绑定到传给bind的函数的值
d、toLocaleString()和toString():返回函数的代码
e、valueOf():返回函数的代码

本文链接:javascript函数认识

| Comments

万能的浮动元素清除

刚开始学前端知识时,在书上看到清除浮动用的是增加一个空标签 <div class="clear"></div> 这种方法是在浮动元素的后面增加一个非浮动元素,这样便改变了html结构,增加了无语义冗余标签。后来在真正工作中,才知道原来有更好的清除方法。

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

原理:
①利用css伪类选择符,在父容器的尾部创建一个非浮动块级子元素,元素内容是空。
②IE 6不支持:after选择符,需用zoom激活ie/7的hasLayout

浏览器支持: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

参考链接:A new micro clearfix hack
本文链接:万能的浮动元素清除

css
| Comments

浏览器兼容问题集

浏览器兼容这是前端必须面对的问题,我在项目中也会经常遇到,网上也有很多关于兼容问题的帖子,在这里只是简单的整理下经典的我遇到的。

①不同浏览器的标签默认的margin和padding不同。
解决:样式重置 *{margin:0;padding:0;}
②双外边距浮动bug。块级元素设置浮动后,在有横向margin的情况下,ie6中显示的margin比实际设置的大双倍。
解决:将块级元素的display设置为inline

③img标签引入两图片,出现莫名的间距问题。
解决:float或者在html代码中去掉img标签间的空格或回车
④ie6不支持min-height(可以说height的值在它看来就是最小高度)
解决:法一height:auto !important; min-height:20px; height:20px;
//原理ie6不认识!important,故这里height是20px,但超出这个值时,ie会自动撑开,ie7以上及其他高级浏览器认识!important,所以此句相当于height:auto !important; min-height:20px;
法二min-height:20px; height:20px;
//有确定值的
height只有ie6认识

⑤CSS透明
解决IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
FF:opacity:0.6
⑥div居中问题,vertical-align:middle对于IE浏览器来说没有效果。
解决:将文字的行高设置与DIV一样

BTW, 浏览器hacker规则:
ie6能识别 _ 和 *
ie7能识别 * 和 !important
FF 能识别!important

本文链接:浏览器兼容问题集

| Comments

jquery1.9 下检测浏览器类型和版本

浏览器检测,$.browser方法在jquery1.9版本已经被剔除,项目中刚好遇到这个问题,各种百度,试过好多方法都没用,只有下面这个是可行的,贴出来共同学习~

判断浏览器类型:
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
等号后面的表达式返回的就是 true/false, 可以直接用来替换原来的 $.browser.msie 等。

本文链接:jquery1.9 下检测浏览器类型和版本

| Comments

IE 8 Error With EOT: CSS3111

在项目中用到了@font-face引入网页字体,在ie8中却总是报css3111这样的错误。解决办法:

1 在以下网站中尝试,重新生成.eot文件
http://www.font2web.com/
http://www.fontsquirrel.com/fontface/generator
2 如果还不行的话,那应该是字体本身的问题,如果字体的Fontname 和 Family Name 名字不一致的话 在ie6-8浏览器中就会有那样的错误,解决这问题的办法:
① 先下载FontForge软件并安装
② 打开字体文件
③ 然后在菜单中选择Element > Font Info
④ 确保Fontname, Family Name and Name for Humans三个名称一致
⑤ 将修改后的font文件保存为TTF或OTF格式,用在线字体转换器(上面网址中的一个)转换成你要的格式,就ok了~

本文链接:IE 8 error with EOT: CSS3111

| Comments

IE Layout 布局的认识

ie与大多数浏览器的表现不一致有一个重要原因是,ie显示引擎中使用了layout布局,是很多显示bug的根源。

windows上的ie使用布局概念来控制元素的尺寸和定位。拥有布局的元素负责本身及其子元素的尺寸设置和定位。没拥有布局的元素,其尺寸和位置由最近的拥有布局的祖先元素控制。

ie为毛要这么做呢?主要是为了减少性能开销。

默认情况下拥有布局的元素:
body, html, table, tr, td,
img, hr, input, select, textarea, button
iframe, embed, object, applet, ,marquee

如何查看元素是否拥有布局?javascript的hasLayout,返回true 或 false,hasLayout是只读属性,无法设置。

如何使元素拥有布局? 通过设置一些css属性会自动触发ie的layout:
float: left/ right
display: inline-block
width/height/zoom: 任何值
writing-mode: tb-rl
ie7中,触发布局的还有:
overflow: hidden/scroll/auto
min-width:任何值
max-width:除none之外的任何值

ie7虽说已修复了大多数与布局相关的问题,但其解决方法是找到常见的显示bug,然后通过在代码中创建例外来处理它们,而不是解决底层问题。
ie8使用全新的显示引擎,据称不用hasLayout属性,故解决了这些问题的根源。

本文链接:IE layout布局的认识

ie
| Comments