标签 区别 下的文章

document.body 和 document.documentElement的区别

<p>文章的起因:之前对这两者的区别一直很模糊,因为也比较少用到,直到最近在写一个返回顶部的按钮的时候。 以前的话,用jQuery,很简单,大家也很熟悉的:</p>

$('html,body').scrollTop(0);

<p>不过现在的公司不使用jQuery作为主力,所以我就想用原生的JS来实现,然后受上一条习惯的影响,写出了如下的语句:</p>

document.getElementsByTagName('html')[0].scrollTop = 0;
document.getElementsByTagName('body')[0].scrollTop = 0;

<p>效果是达到了。不过看起来怪怪的,好像也没见过别的地方有人这么写过。 然后参考其他网站,同时也谷歌了一下,发现常用的是下面的写法:</p>

document.documentElement.scrollTop = document.body.scrollTop = 0;

<p>看起来简洁多了,是吧。不过我发现上面两个document的属性都好陌生啊,document.documentElement是什么,document.body又是什么?</p>

<p>好了,然后,下面的语句让我明白了:</p>

document.getElementsByTagName('html')[0] === document.documentElement;
//true
document.getElementsByTagName('body')[0] === document.body;
//依然true

<p>恍然大悟的感觉有没有!原来document.documentElement就是html,document.body就是body,就这么简单。</p>

- 阅读剩余部分 -

mouseenter、mouseover;mouseleave、mouseout的区别

在jQuery里面,鼠标事件有两对比较容易混淆的。

  • mouseenter和mouseover
  • mouseleave和mouseout

既然容易混淆,把这4个重新组合一下,变成
mouseover/mouseout VS mouseenter/mouseleave

这样是不是清晰多了?至少样子上是。

mouseover/mouseout在原生JS中一直都是有的,也就是onmouseover和onmouseout事件,而且,特大好消息的是,曾经只有IE支持的onmouseenter和onmouseleave事件现在已经来到了Chrome和Firefox中:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 30 10.0 (10) All 11.10 Not supported

要说区别,非常简单:mouseover/mouseout的事件会冒泡(event bubbling),也就是说,假设把mouseover/mouseout事件绑定到了父元素,那么它其中的任何子元素只要发生了mouseover/mouseout事件,同时也会触发父元素的mouseover/mouseout事件,父元素的父元素也会触发……然后一直向上,就像池塘的气泡一样一直往上冒。

而mouseenter/mouseleave不会发生事件冒泡,属于传统思维上的鼠标进出。

- 阅读剩余部分 -

word-break、word-wrap、word-space、white-space对比图

这几个属性不常用,而且名字看起来很相近,所以列出来,对比起来看看。然后不看不知道,一看吓一跳,真的是有点复杂,还涉及到非中文和非英文的情况,而且其中前两者还是CSS 3的属性,怪不得这么细化。下面的表格翻译自W3,假如翻译有不恰当的地方还请指出。

名称 word-break word-wrap
/overflow-wrap
word-spacing white-space
C
S
S
版本
CSS3 CSS3 CSS1 CSS1

定义

This property specifies soft wrap opportunities between letters

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

The word-spacing property increases or decreases the white space between words.

 

The white-space property specifies how white-space inside an element is handled.

定义断词的方式。 对长单词,转行到下一行的方式,只在white-space允许折行的时候起效。 增加或减少
单词间的间距。
元素内的空白符的处理方式。
可取的值

normal:默认值

break-all:允许折行任意单词,Chrome和FF下,中文里面会允许标点符号折行到下一行的开头。

keep-all:不断词。

normal:默认值。约等于word-break: keep-all;

break-word:使单词可以被折行。

normal:默认值,相当于值是0;

length:使用px, pt, cm, em等单位具体定义,值可为负;

inherit:继承

normal:默认值,多个空白符显示为一个,自动折行。
nowrap:多个空白字符显示为一个,文字不自动折行,除非遇到<br />标签。
pre:空白字符被保留,就像<pre>标签一样,文本不自动折行。
pre-line:多个空白字符显示为一个,文本正常折行,换行符被保留。
pre-wrap:空白字符被保留,文本正常换行,换行符被保留。
inherit:继承

额外说明

这个有点复杂,涉及到多种语言的知识。貌似韩文是两个字一个词?

word-wrap和overflow-wrap是同一个意思,不过前者是后者的遗留名字,后者是更新的叫法。

当遇到很长的单词,比如肌联蛋白的IUPAC名的时候,overflow-wrap设置为break-word就能够自动折行了;不然屏幕就只有一行啦,慢慢拉水平滚动条吧。

当为负值的时候,只在IE7以下和FF有效,表现为单词挤在一块儿了。

这个属性说的是
单词,其实就是指定空白符的宽度。因为单词也是通过空格来隔开嘛,不然CSS怎么知道是单词还是字母。

对应
字符间距调整的属性是letter-spacing。

这个估计是最复杂的一个了,各个属性值绕来绕去的。

用的最多的时候可能就是用它的nowrap了吧。

上面的word-break有点抽象,因为涉及到其它的语言,下面补充一下断词的方法,下面的例子使用‘·’来定义断词点。

word-break: normal
这·是·一·些·汉·字,·and·some·Latin,·و·کمی·نوشتنن·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย.

word-break: break-all
这·是·一·些·汉·字,·a·n·d·s·o·m·e·L·a·t·i·n,·و·ﮐ·ﻤ·ﻰ·ﻧ·ﻮ·ﺷ·ﺘ·ﻦ·ﻋ·ﺮ·ﺑ·ﻰ,·แ·ล·ะ·ตั·ว·อ·ย่·า·ง·ก·า·ร·เ·ขี·ย·น·ภ·า·ษ·า·ไ·ท·ย.

word-break: keep-all
这是一些汉字,·and·some·Latin,·و·کمی·نوشتنن·عربی,·และตัวอย่างการเขียนภาษาไทย.



终于大体上翻译结束,不过肯定还有需要补充的,后面再加上。自己也在这次翻译当中明白了不少,但是对于CSS 3的其余相关属性,我还不是很清楚,比如line-break,以后遇到了再补充吧。

JS中定义函数的两种方式的区别

在JS中有两种定义函数的方式,

  1. function test(){...}
  2. var test=function(){...}

这两种方式定义的函数是有区别的。

区别一:调用和声明的顺序

  • function方式定义函数可以先调用,后声明。
  • var 方式定义的函数,不能先调用函数,后声明,只能先声明函数,然后调用。

请看代码:

//aaa();这样调用就会出错
var aaa = function(){
  alert("A");
}
aaa();//这样就不会出错
//先调用后声明,可使用function方式定义
bbb();
function bbb(){
  alert("B");
}

区别二:作用域的区别

说到函数,自然少不了作用域的问题。经过我自己的测试,发现两者的作用域是有很大的区别的,我想通过下面 四个例子进行分析

例子1,使用的是function的方式定义

a=1;
if (a==1){
  function tx(){alert('1')}
}else if(a==2){
  function tx(){alert('2')}
};
tx(); //'2'

想好了继续下面的第二个例子,使用var的方式定义

a=1;
if (a==1){
  var tx=function (){alert('1')}
}else if(a==2){
  var tx=function (){alert('2')}
};
tx(); //'1'

继续第三个例子

function outer(){
  alert('outer');
  function inner(){alert('inner'); };
};
outer(); //'outer'
inner(); //'inner未定义'

最后一个是结合了对象的例子:

var ob={
  xx1:function (){
    function gd(){ alert('gd'); }
  },
  xx2:function (){ gd(); }
  };

var ob2={
  xx1:function (){
    gd =function (){ alert('gd'); }
  },
  xx2:function (){ gd(); }
  };

//ob.xx2();  //'gd'未定义
//ob2.xx2(); //'gd'未定义
ob2.xx1(); //生成一个全局函数gd
ob2.xx2(); //alert('gd')

原理分析:

因为网上没有找到相关的资料,所以下面是个人的测试分析,如有错误请指出。

function方式定义的函数的作用域是当前的环境,这在第3个例子中最明显,所以内部如果用function方式定义,外面是访问不到的。

而使用var方式定义的函数,其实是先生成一个匿名函数,然后定义一个变量指向这个匿名函数,函数作用域决定于这个变量的作用域,比如不加var就是全局了,如果加上var那么就和function方式定义的函数作用域一样了。

这里要说一下例1和例2,例1中后面的函数把前面的函数定义冲掉了,同名函数定义了两次的感觉,js的语法就是这么规定的,后面定义的同名函数取代前面的;而例2中实际上生成了两个匿名函数,然后根据条件让tx指向其中某个函数。

顺便抱怨一个Wordpress自带的编辑器,太难用了,会“聪明”地把段前空格吃掉,导致代码缩进很难看。目前我是切换到源码状态进行编辑的,有更好的办法吗?