Web前端应该掌握的十大内容.docx
- 文档编号：18555351
- 上传时间：2023-08-19
- 格式：DOCX
- 页数：41
- 大小：345.19KB
Web前端应该掌握的十大内容.docx
《Web前端应该掌握的十大内容.docx》由会员分享，可在线阅读，更多相关《Web前端应该掌握的十大内容.docx（41页珍藏版）》请在冰点文库上搜索。
Web前端应该掌握的十大内容
Web前端工程师应该掌握的十大内容
css的优先级
在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。
简单说来，CSS是层叠样式表（CascadingStyleSheets）的简称。
它的规范代表了互联网历史上一个独特的发展阶段。
现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在制作网页过程中我们经常需要用到。
我们能通过CSS为文档设置丰富且易于修改的外观，以减轻网页制作者的工作负担，从而减轻制作及后期维护的代价。
其实现在还来讲CSS是什么，CSS有什么作用完全是多余的，相信从事网页制作的朋友都已经或多或少的接触过了。
言归正传，开始进入今天的话题。
一、什么是CSS优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
二、CSS优先级规则
既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1、统计选择符中的ID属性个数。
2、统计选择符中的CLASS属性个数。
3、统计选择符中的HTML标记名个数。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数（css2.1是用4位数表示）。
（注意，你需要把数字转换成一个以三个数字结尾的更大的数）。
相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
例如：
1、每个ID选择符（#someid），加0,1,0,0。
2、每个class选择符（.someclass）、每个属性选择符（形如[attr=value]等）、每个伪类（形如:
hover等）加0,0,1,0。
3、每个元素或伪元素（:
firstchild）等，加0,0,0,1。
4、其它选择符包括全局选择符*，加0,0,0,0。
相当于没加，不过这也是一种specificity，后面会解释。
三、特性分类的选择符列表
通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0（后面会讲到）。
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
优先级问题其实就是一个冲突解决的问题，当同一个元素（内容）被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。
说到这里，我们不得不说一下CSS的继承性。
四、CSS的继承性
4.1继承的表现
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。
继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
例如一个BODY定义了的颜色值也会应用到段落的文本中。
这段代码的应用结果是：
“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了标签，所以是粗体。
很显然，这段文字都继承了由body{color:
#f00;}样式定义的颜色。
这也就是为什么说继承性是CSS的一部分。
然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
4.2继承的局限性
继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。
有一些属性不能被继承，如：
border,margin,padding,background等。
五、附加说明
1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。
这里文内样式指形如 red>blah
2、有!
important声明的规则高于一切。
3、如果!
important声明冲突，则比较优先权。
4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5、由继承而得到的样式没有specificity的计算，它低于一切其它规则（比如全局选择符*定义的规则）。
6、关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前（如不是，则浏览器应该忽略之），所以按照后来居上原则，一般优先权冲突时是占下风的。
还需要说一下，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其它规则定义之前的，这可能会引发一些误会。
优先权问题看起来简单，但背后还是有非常复杂的机制，在实际应用中需要多多留意。
二、js中apply和call方法有什么不同。
如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的”偏见”,因为这对您来说绝对是一片新大陆。
好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply,call两个方法的运用上.
区分apply,call就一句话,
foo.call（this,arg1,arg2,arg3）==foo.apply（this,arguments）==this.foo（arg1,arg2,arg3）
call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.
相同点:
两个方法产生的作用是完全一样的
不同点:
方法传递的参数不同
那什么是方法产生的作用,方法传递的参数是什么呢?
我们就上面的foo.call（this,arg1,arg2,arg3）展开分析.
foo是一个方法,this是方法执行时上下文相关对象,arg1,arg2,arg3是传给foo方法的参数.这里所谓的方法执行时上下文相关对象,如果有面向对象的编程基础,那很好理解,就是在类实例化后对象中的this.
在JavaScript中,代码总是有一个上下文对象,代码处理该对象之内.上下文对象是通过this变量来体现的,这个this变量永远指向当前代码所处的对象中.
可见,A,B类都有一个message属性（面向对象中所说的成员）,A有获取消息的getMessage方法,B有设置消息的setMessage方法,下面来显示call的威力.
//创建一个B类实例对象
varb=newB（）;
//给对象a动态指派b的setMessage方法,注意,a本身是没有这方法的!
b.setMessage.call（a,"a的消息"）;
//下面将显示"a的消息"
alert（a.getMessage（））;
//给对象b动态指派a的getMessage方法,注意,b本身也是没有这方法的!
这就是动态语言JavaScriptcall的威力所在!
简直是”无中生有”,对象的方法可以任意指派,而对象本身一直都是没有这方法的,注意是指派,通俗点就是,方法是借给另一个对象的调用去完成任务,原理上是方法执行时上下文对象改变了.
所以b.setMessage.call（a,“a的消息”）;就等于用a作执行时上下文对象调用b对象的setMessage方法,而这过程中与b一点关系都没有,作用等效于a.setMessage（“a的消息”）;
因为apply与call产生的作用是一样的,可以说
call,apply作用就是借用别人的方法来调用,就像调用自己的一样.
好,理解了call,apply相同处—–作用后,再来看看它们的区别,看过上面例子,相信您大概知道了.
从b.setMessage.call（a,“a的消息”）等效于a.setMessage（“a的消息”）可以看出,“a的消息”在call中作为一个参数传递,
那么在apply中是怎么表示的呢,直接解释说不清楚,apply要结合应用场景才一目了然.我们来设计一个应用场景:
viewsourceprint?
01functionprint（a,b,c,d）{
02alert（a+b+c+d）;
03}
04functionexample（a,b,c,d）{
05//用call方式借用print,参数显式打散传递
06print.call（this,a,b,c,d）;
07//用apply方式借用print,参数作为一个数组传递,
08//这里直接用JavaScript方法内本身有的arguments数组
09print.apply（this,arguments）;
10//或者封装成数组
11print.apply（this,[a,b,c,d]）;
12}
13//下面将显示”背光脚本”
14example（”背”,“光”,“脚”,“本”）;
在这场景中,example方法内,a,b,c,d作为方法传递的参数,方法分别运用了apply,call去借print方法来调用,
最后一句由于直接调用example方法,所以在该方法中的上下文对象this就是window对象.
所以,call,apply方法它们除了第一个参数,即执行时上下文对象相同外,call方法的其它参数将依次传递给借用的方法作参数,而apply就两个参数,第二个参数为一个数组传递.所以可以说成
call,apply方法区别是,从第二个参数起,call方法参数将依次传递给借用的方法作参数,而apply直接将这些参数放到一个数组中再传递,最后借用方法的参数列表是一样的.
应用场景:
当参数明确时可用call,当参数不明确时可用apply给合arguments
1//例
2print.call（window,“背”,“光”,“脚”,“本”）;
3//foo参数可能为多个
4functionfoo（）{
5print.apply（window,arguments）;
6}
三、如何用js获取网页文件中的div。
本文介绍一下使用js获取div内容，兼容各浏览器。
document.getelementbyid（"ddhdh"）.innerHTML可以获取到div中的全部数据，包括标签。
。
。
但是只是在IE和OPERA中使用
document.getelementbyid（"ddhdh"）.innerTEXT可以获取到div中的文本数据，不会获取到标签。
。
。
但是只是在IE和OPERA中使用
document.getElementById（“text”）.textContent用于在火狐中获取数据
上面的标签在这几钟基于两种浏览器的内核的浏览器，这几种方法是不兼容的。
下面是解决方案
兼容火狐ie的js获取div的内容
if（navigator.appName.indexOf（“Explorer”）>-1）
vartext=document.getElementById（“text”）.innerText;
else
vartext=document.getElementById（“text”）.textContent;
用来获取浏览器的名称，第一句话的意思就是当获取到的浏览器的名称中带有Explorer。
涉及到indexof用法
strObj.indexOf（subString[,startIndex]）
参数
strObj
必选项。
String对象或文字。
subString
必选项。
要在String对象中查找的子字符串。
starIndex
可选项。
该整数值指出在String对象内开始查找的索引。
如果省略，则从字符串的开始处查找。
indexOf方法返回一个整数值，指出String对象内子字符串的开始位置。
如果没有找到子字符串，则返回-1。
四、常见的浏览器有几种？
如何来解决浏览器不兼容的问题。
（列举10例）。
常见的浏览器：
IE火狐麦拓傲游腾讯TTMozilla。
一、 Comments区别IE和w3c的方法
.hack{
width:
600px; /*FF*/
*width:
700px; /*IE*/
}
——————————————————————————–
二、 区别IE5.5、IE6、IE7、w3c的方法
.qq{
background:
#f00; /*w3c*/
*background:
#00f!
important; /*IE7*/
_background:
#0f0; /*IE6*/
_background/**/:
#ccc /*IE5.5*/
}
——————————————————————————–
三、 针对Opera、Safari、Chrome
.qq{
background:
#000; /*IEFF*/
}
@mediaalland（min-width:
0px）{
.qq{background:
#000; } /*Opera、Safari、Chrome*/
}
四、 实现文本自动换行
1. IE中解决方法
word-wrap:
break-word;
word-break:
break-all;
注：
在要换行的内容相应的单元格或者DIV里加入，如：
break-word;>
或
break-word;> 2. FireFox中解决方法（脚本）： functiontoBreakWord（intLen,id）{ varobj=document.getElementById（id）; varstrContent=obj.innerHTML; varstrTemp=”"; while（strContent.length>intLen）{ strTemp+=strContent.substr（0,intLen）+” strContent=strContent.substr（intLen,strContent.length）; } strTemp+=strContent; obj.innerHTML=strTemp; } 注： 以上脚本放在前面。 调用时如下写法： ? 同个页面单处调用：
”;
?
同个页面多处调用：
《财政学》期末习题.docx
