一、如何添加html元素的事件,有几种方法?
1.直接书写在HTML代码里。
<input id=”button1″ type=”button” οnclick=”do something here”>
“do something here”,可以包含很多语句,比如说”alert (‘botton is clicked‘);“,
或者”check(this.form);returnfalse;”。check 是已经定义的一个函数,this这里指的是这个button,this.form就是包含这个按钮的表单。(关于this这个东西,比较复杂,得好好看看犀牛书)
2.在JavaScipt中给元素的onclick,onselect,onfocus等属性赋值。
the_button = document.getElementById(‘button1″);
the_button.onclick = fucntionname;
这里我们不能用在HTML代码直接写的形式,我们给它赋的值是一个函数,不加引号,也不能加上括号。我们也可以使用匿名函数来执行多个语句。
the_button.onclick = function( ) { somefunciotn( ); do_somthing_else;another_fucntion(); };
3.使用事件监听。
obj.addEventListener(whichEvent, handler, direction)(MOZ/N6+,DOM2)
obj.attachEvent(whichHandler, **theFunction**) (IE5+)
由于IE不支持DOM2标准,所以为了浏览器兼容,我们一般采用下面的形式。( DOM2的函数中direction是一个bool值,表示冒泡(false)还是捕获(true))
try{ the_botton.addEventListener(‘click’,handler_function,fasle;}
catch(e) { the_botton.attachEvent(‘onclick’,hanler_fucntion);}
还有一点要注意DOM2中的函数第1参数是whichEvent,如’click’,而IE中是whichHandler,如”onclick”。有带不带”on”之分。
二、innerText 和 innerHTML的区别?
<div id="test">
<span style="color:red">test1</span> test2
</div>
test.innerHTML :
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。
test.innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
另外:
test.outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
特别说明:
innerHTML是符合W3C标准的属性,而 innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使 用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签。
下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
三、js的基础对象有那些, window和document的常用的方法和属性列出来
基础对象有三种:
1.ECMAScript原生对象: Array、String、RegExp、Global、Math、Date、Number、Boolean、Error(+六种)、Object;
2.BOM对象:window;
3.DOM对象:document.
其中window的常用方法有:
1、alert(msg):这就不用说了吧。
2、blur():把被引用的窗口放到所有其它打开窗口的后面。
3、clearInterval(intervalID):关掉以setInterval()方法开始的周期循环,参数为setInterval()返回的ID。
4、close():关闭浏览器窗口
5、confirm(msg): 显示一个带OK和Cancel按钮的确认对话框
6、focus():把被引用的窗口放到所有其它打开窗口的前面。
7、open("URL","Name"[,"Features"]):打开一个新窗口。第三个参数用于设定新打开窗口的一些窗口属性,是字符串方式表示,它由一系列由逗号间隔的赋值表达式列表组成。主要包括:toolbar(是否加工具按钮)、location(是否加URL地址栏)、memubar(是否加菜单栏)、status(是否加状态栏)、scrollbars(是否自动加滚动)、resizable(是否可改变大小)、width(设定宽度)、height(设定高度),这些参数除最后两个为数值外都为布尔值。
8、prompt(msg,defVal):打开用户交互对话框,返回用户输入值。
9、setInterval("fun",msecDelay[,arg1,...]):设定一个需在固定时间重复执行的任务。从第三个参数开始的参数为要执行任务的参数值。
10、setTimeout(("fun",msecDelay[,arg1,...]):设定一个需在指定时间间隔后要执行的任务。参数含意同setInterval。
window的常用属性有:
1、closed:用于判断一个指向window对象的引用是否已关闭。
2、defaultStatus:用于在状态栏中显示一个字符串,默认是空字符串。这个属性值的显示优先级较链接对象或图片对象要低。用法为在网页加载中加入 window.defaultStatus = "Welcome to www.52its.com"。
3、frames:框架集合,在多框架窗口中,顶层或父窗口包含多个独立的框架时,可以使用该属性,是通过数组实现的。(但此属性只能深入到第二层,而不能进再下的层次中。假设现有A、B、C三个框架,且A为父框架,B、C为子框架,现要由B得到C的文档标题可以这样写:parent.frames[2].document.title。如果你给每个框架定义了名称也可以直接使用,在此假设你定义C子框架名为CFrame,则刚才那句也可以这样写:parent.CFrame.document.title。)
4、opener:指向打开当前窗口的父窗口的引用。经常可用来做一些关联窗口互动操作。如在窗口A中通过window.open()打开了窗口B,则在B中可以使用此属性操作A窗口。如关闭A窗口:window.opener.close()。
5、parent及top:如果当前窗口为一个多框架中的一部分时,可以使用该两个属性。parent属性指向上一层框架,而top属性指向顶层框架。使用top防止被其它网页加载的方法: if (top != self) top.location = location
6、self:此属性代表和窗口一样的对象,默认的对象也就是窗口对象。例如想得到一个单框架窗口的文档标题可有这三种方法:
window.document.title == self.document.title == document.title
7、status:在浏览器的状态栏显示临时信息。
8、prompt(msg,defVal):打开用户交互对话框,返回用户输入值。
9、setInterval("fun",msecDelay[,arg1,...]):设定一个需在固定时间重复执行的任务。从第三个参数开始的参数为要执行任务的参数值。
10、setTimeout(("fun",msecDelay[,arg1,...]):设定一个需在指定时间间隔后要执行的任务。参数含意同setInterval。
document的属性有:
document.title //设置文档标题等价于HTML的<title>标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期,只读属性
document.fileModifiedDate //文件修改日期,只读属性
document.fileSize //文件大小,只读属性
document.cookie //设置和读出cookie
document.charset //设置字符集 简体中文:gb2312
常用方法有:
document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.body.appendChild(oTag)
四、前端开发的优化的问题
(1) 减少http请求次数:css spirit,data uri
(2) JS,CSS源码压缩
(3) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(4) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
(5) 用setTimeout来避免页面失去响应
(6) 用hash-table来优化查找
(7) 当需要设置的样式很多时设置className而不是直接操作style
(8) 少用全局变量
(9) 缓存DOM节点查找的结果
(10) 避免使用CSS Expression
(11) 图片预载
(12) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢
五、如何控制网页在网络传输过程中的数据量
1.启用GZIP压缩;
2.保持良好的编程习惯,避免重复的css,js代码,多余的HTML标签和属性。
六、JS的本地对象、内置对象、宿主对象分别写出几个
1.本地对象有:Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。
2.内置对象:Global和Math这两个对象又被称为“内置对象”,这两个对象在脚本程序初始化时被创建,不必实例化这两个对象。
3.宿主对象:可以理解为浏览器提供的对象,所有的BOM和DOM对象。
七、document.load和document.ready的区别
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
八、简述border:none以及border:0的区别,并给出使用建议
性能差异:
【border:0;】把border设为“0”像素效果等于border-width:0,浏览器依然对border-width、border-color进行了渲染,即已经占用了内存值。
【border:none;】把border设为“none”,实际效果等同于border-style:none,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。
兼容性差异:
IE6、IE7中,border为“none”时,标签button、input边框依然存在。
2.如何让CSS 中border:none;实现全兼容?
只需要在同一选择符上添加背景属性即可
对于border:0;与border:none;个人更向于使用,border:none;,因为border:none;毕竟在性能消耗没有争议,而且兼容性可用背景属性解决不足以成为障碍。
九、指出{}+[]与[]+{}的值,为什么
十、form中的input可以设置为readonly和disable,请问2者有什么区别?
十一、在JavaScript程序中,获得一个元素并将其隐藏,有哪两种设置其style属性的方法?并说出区别
用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。
当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。
十二、firefox嵌套div标签的居中问题的解决方法
如果要实现b在a中居中放置,要如何实现?
十三、简述一下Ajax的工作原理。
(不严格)客户端与服务器端进行交互,而无需刷新当前页面的技术.
作用:
可以实现同步交互所不能完成的功能,提高同步实现的效果。
十四、JavaScript中获取某个元素有哪几种方式?
十五、CSS+DIV开发Web页面的优势有哪些?
十六、在HTML页面布局中,position的值有哪几种?默认值又是什么?
Static:静态定位。如果你没有设置position属性,那么缺省默认值就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。
Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。
Absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。
Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
十七、JavaScript中的数据类型有几种?分别是什么?
JavaScript中的数据类型:
(1)值类型: number string boolean
(2)特殊类型: null undefined
(3)引用类型: object(....) function
十八、HTML里一些标签里面不能放区块元素
<div></div> <!--语义上的限制:p中不能添加区块元素-->
</p>
解决方法是什么?
十九、Number( )和parseInt( )的区别
Number( cString )从字符串cString转换得到的数字,包括Int和Float类型,如:“-123”返回-123,“123”和“00123”都返回 123,“234。56”返回234。56等。cString必须是合法的数字串,否则返回NaN;如“.123”、“1.23.45”、 “--123”、“123a"都返回NaN.
总之Number( )更象parseFloat( ),Number对参数更挑剔,稍有不是数字就返回NaN。parseFloat支持第一个非空字符为小数点,如parseFloat(".123" )返回0.123。而Number(".123" )返回NaN。空字符串或完全空格串健壮的parseFloat()返回NaN,而Number()返回0,这有点让人费解。除了不支持无前导0小数 (如.123、-.123)和支持多余的前导0(如-00123返回-123)多少不符合常规外,Number能用来验证数字串!
二十、XHTML1.0对HTML4.0的改进
1.所有的标记都都要闭合
所有的标记都要闭合,如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例如:
2.所有标签的元素和属性的名字都必须使用小写
1
2
3
|
<
h6
>close tag </
h6
>
<
img
src
=
"../avg.png"
alt=’avg’/>
<
br
/>
|
例如:
1
|
<
BODY
>必须写成<
body
> <
DIV
> 要写成 <
div>
|
1
|
<
p
><
b
> </
p
></
b
> 必须修改为: <
p
> <
b
> </
b
> </
p
>
就是说,一层一层的嵌套必须是严格对称。
|
4.所有的属性必须用引号(单或双)包括
在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。
1
|
<
height
=
80
> 必须修改为: <
height
="80″>
|
5.把所有<和&特殊符号用编码表示
任何小于号(<),不是标签的一部分,都必须被编码为& l t ; 任何大于号(>),不是标签的一部分,都必须被编码为& g t ; 任何与号(&),不是实体的一部分的,都必须被编码为& a m p;
注:以上字符之间无空格。
6.给所有属性赋一个值
XHTML规定所有属性都必须有一个值,没有值的就重复本身。
1
2
3
|
<
input
type
=
"checkbox"
name
=
"shirt"
value
=
"medium"
checked>
必须修改为:
<
input
type
=
"checkbox"
name
=
"shirt"
value
=
"medium"
checked
=
"checked"
>
|
7.不要在注释内容中使"- -"
"- -"只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。
1
2
3
|
<!- -这里是注释———–这里是注释- ->
需要用等号或者空格替换内部的虚线。
<!- -这里是注释============这里是注释- ->
|
8.图片必须有说明文字 每个图片标签都必须有ALT说明文字 。
1
|
<
img
src
=
"ball.jpg"
alt
=
"large red ball"
/>
|