1. 修改某一节点的class属性:
<div class=”div1”></div>
var div1=document.getElementById(“div1”);
div1.className=”banner”;
问:为什么不直接用div1.class?
2. 可以在样式表中先定义样式,然后再将其赋予到标签节点中。
<style>
.div1{
width:100px;
height:100px;
background:red;}
</style>
<div class=” ?”></div>
3. 什么样是样式表的内嵌样式?
如上一题
4. 内嵌样式与行内样式的不同之处?
比如字号,内嵌样式font-size(匈牙利写法)
行内样式fontSize(驼峰写法)
javascript修改:
内嵌样式:div1.font-size=”28px”;
行内样式:div1.style.fontSize=”28px”;
5. 对象.style.样式
默认操作的行内样式style,如果操作内嵌和外联的样式理论上可以,但是不推荐。
6. css3改变行内样式有需要的时候要做兼容
div1.style.transform=”rotate(90deg)”;
div1.style.webkitTransform=”rotate(90deg)”;
div1.style.mozTransform=”rotate(90deg)”;
7. 获取网页对象的4种方式
document.getElement.ById(“id”);
document.getElementsByName(“name”);返回一组元素对象
8. document.getElementByName(“name”)返回的是一个类数组(Nodelist属性),什么是类数组呢?
类数组即类似数组,它只有length属性,而不支持平常数组的其他API。
9. 具有name属性的几个常用标签?
<img> < a> < input> < form> < frame>
10. 通过标签名称获取对象,类数组对象。
var ps=document.getElementsByTagName(“p”);
ps[i].align=”center”;
11. 通过class获取元素对象在ie(ie8报错,对象不支持这个方法,所以不怎么采用他)上和其他浏览器有兼容性问题。
var ps=document.getElementsByClassName(“p1”);
12.混合方式获取对象:
var siv1=document.getElementById(‘div1’);
div1.getElementsByTagName(“p”);
13.html5之后要求自定义属性要以data-开头。操作自定义属性要求用dom方式操作
<p icss=”p1”></p>
p[i].getAttribute(“icss”)返回属性值 setAttribute(“data-id”,”pp” )设置属性值
14.当网页超过一屏,超链接使用#号会发生什么效果?为了使它没有这种效果可以用超级链接调用js程序。
javascript:void(0);
href=”javascript:changeSize(36);”可以代替点击事件
15.js前端编程是事件驱动。
16.事件=事件源+事件类型+事件处理(事件回调函数)
17.注册事件(给节点注册)的方式:
0级事件:
行内写法:在html标签里直接注册时间,例如<input onXXXX=”XXX”>,缺点是只能调用全局函数,和HTML耦合度太高。不符合高内聚低耦合原则,我们主张js html css互相分离。
代码写法:
获得对象,对象.事件名称=事件回调函数 耦合度低
2级事件:默认false是冒泡型事件,true是捕获流事件
w3c标准写法:(IE不支持)
注册事件:事件源对象.addEventListener(事件类型,回调函数,事件流);
移除事件: 事件源对象.addEventListener(事件类型,回调函数,事件流);
IE写法:
注册事件: 事件源对象.attachEvent(事件类型,回调函数);
注册事件: 事件源对象.detachEvent(事件类型,回调函数);
兼容写法:
if(btn1.addEventListener){
btn1.addEventListener(“click”,m1);
}
else
{ btn1.attach(“onclick”,m1);
}
18.function m1(){
alert(“hello world”);
}
btn1.onclick=m1;与btn1.onclick=m1();的区别
19.事件回调函数:事件回调函数是只有在事件被触发才会运行的事件。
20.cannot set property “onclick” of null在什么情景会遇到呢?
在script在排头时。 若要使js在前改进这一情景可以用window.onload=function(){
}
21.双击事件 单击事件
ondbclick onclick
22.鼠标悬停事件
<input type=”button” value=”鼠标悬停” onmouseover=”this.style.color=’red’;”/>
23. this在事件回调函数中表示当前事件源。
24. 鼠标移上事件 鼠标离开事件
onmouseover 鼠标穿过子元素会(先离开父元素再进入会有闪烁感觉)重复触发事件
onmouseout
onmouseenter 鼠标穿过子元素不会重复触发事件
onmouseleave
25. 鼠标按下触发事件 鼠标松开触发事件
onmousedown onmouseup
26. 鼠标移动事件观察标题栏
<input type=”button ” value=”鼠标移动观察标题栏”onmousemove=”document.title=event.x”>
27. 获得焦点,和失去焦点
<input type=”text” value=”请输入” onfocus=”this.value=’ ’;” onblur=”this.alert(‘this.value’)”>
28. 键盘按下与松开事件
<input type=”text” onkeydown=”console.log(this.value);”/>
键盘按下并抬起,value值才算上去,故有一个延迟。因此常用的是onkeyup
30. 内容被改变事件onchange常用在下拉列表和文本框里面。
<select onchange=”alert(this.value)”>
<option value=”dalian”> 大连</option>
<option value=”beijing”> 北京</option>
<option value=”shanghai”> 上海</option>
</select>
31. btn1.onmouseover=function(){
this.style.color=”red”;
}
32.翻滚图,鼠标移上图片变换。如同灯图片开关。
33. 事件对象本身Event,代表事件的状态和信息,不同的事件触发获得状态和信息也不一样。
IE下获得: window.event
w3c标准: 回调函数的第一个参数就是这个对象(包含了这个事件的所有信息))
获取事件对象:
btn1.onclick=function(e){
console.log(e); //google firefox
console.log(window.event); //ie google
}
做兼容:
btn1.onclick=function(e){
e=e||window.event;
alert(e.type);
}
e.target获得事件源 w3c
e.srcElement IE
var currentObj=e.target||e.srcElement
34. 事件对象获得鼠标当前坐标。
document.omousemove=function(e){
e=e||window.event;
document.title=e.clientX+’,’+e.clientY;
}
35. 检查事件状态:
document.onmousedown=function(e){
e=e||window.event;
alert(e.button);
}
检查鼠标按下的是左0中1右2 火狐谷歌
IE 左1 中4 右2.
0 1 2 4都判断一下。
36. 判断是哪个浏览器
navigator.userAgent
判断字符串是否包含Firefox chromn msie
if(navigator.userAgent.indexOf(‘IE’)!=-1)表示字符串中包含有IE
37. 获得键盘按下哪个键:
单键按
document.onkeydown=function(e){
e=e||window.event;
console.log(e.keyCode);
}
38. ctrlKey altKey shiftKey 是否按下返回true或false,常用来创建快捷键
同时摁住a和ctrl则:
if(e.keyCode==65&&e.crtlKey==true)是二者同时摁下的条件。
39. keyCode对照表。
40. 事件流:
冒泡型 :事件是从子元素传播到父元素
捕获型:事件是从父元素传播到子元素(IE不支持,而且只能用2级事件)
41. 阻止事件冒泡:
w3c: 事件对象.stopPropagation();
Ie: 事件对象.cancelBubble=true;
e.stopPropagation?e.stopPropagation():e.cancelBuble=true;阻止事件冒泡程序。
42. 阻止事件默认行为:
w3c:事件对象.preventDefault()
Ie: 事件对象.returnValue=false;
在事件回调函数中直接写 return false;
<a href=”http://”id=”a1”>链接</a>
var a1=document.getElementById(“a1”);
a1.onclick=function(e){
e=e||window.event;
e.preventDefault?e.preventDefault():e.returnValue=false; //如果没有这句话则会alert后跳转到另一个链接去。
alert(“连接被单击”);
}
43. 阻止页面右击行为:
document.oncontextmenu=function(e){
alert(“禁止右键”)
return false;
}
行内事件可以直接用return false来阻止事件默认行为
<a href=”http://www.baidu.com” onclick=”alert(“链接被点击”); return false;”>链接
44. 兼容性原理
var obj={
name:’tom’;
m1:function(){
alert(‘m1’);}}
alert(obj.name?obj.name:obj.pname);
object.m1?object.m1():object.m2();
45. position的属性
absolute相对于最近一级,定位不是static进行定位
fixed 相对于视口定位
relative 相对于其在普通文档流中定位
46. 折叠菜单的demo
for(var i=0;i<ps.length;i++){
ps[i].setAttribute(‘pid’,i);
ps[i].onclick=function(e){
var pid=this.getAttribute(‘pid’);
var currUL=uls[pid];
if(curryUL.style.display==”block”)
curryUL.style.display=”none”
else
curryUL.style.display=”block”;
}
}
47. typeof String返回function
typeof Array 返回function
typeof Date 返回function
typeof Math返回object
48. Math对象常用API
Math.abs() 如Math.abs(-12) Math.abs(“-12”)
Math.floor(-5.3) 获取-6 Math.floor(6.9)得到6
Math.ceil()与Math.floor()正好相反
Math.round()取得是四舍五入的值。
Math.pow(x,y)取得是x的y次方
Math.sqrt(25)开方得到5
Math.PI Math.E 是常量
49. javascript的数据类型
基本数据类型:number string boolean undefined null
引用类型:object function
50. 产生任意两个整数之间的随机整数的公式:
Math.floor( Math.random()*(max-min+1))+min
51. demo:产生20行4位数字随机验证码(大写字母随机码呢?)
65—90分别对应26个大写字母,String.fromCharCode(数字)可以将数字转换为字母。
52. demo:押大小
比较选择值与随机值,并可以通过人工修改其几率。
53. Date是一个类,而不是一个对象,可以将其用来创建对象,并使用对象的API
54. new Date()默认获取当前系统时间
55. Date创建对象的常用API
getYear()有兼容性问题,我们更喜欢用getFullYear();
getMonth() 返回0—11的值
getDay() 返回0—6的值
getDate() 返回日期值
getHours() getMinutes() getSeconds()
getTime()返回当前日期的毫秒表示法。
56. dom的定时器有两个:
setTimeout(functionName,time);隔多少秒执行一次
setInterval(functionName,time);每隔多少秒执行一次
57. innerHTML与innerText有何不同?
58. parseInt(“100px”)返回100
parseInt(“px100”)返回NaN
59. isNaN(“100”) isNaN(100)返回false
IsNaN(“100px”)返回true
60. eval()函数:
var r=”3+5”;
eval(r)返回8,是因为它可以进行字符串运算。
61. 创建一个文本框10行40列。
<textarea id=”t1” rows=”10” cols=”40”> </textarea>
62. 当为一系列相同或相近的节点注册事件时,用循环,再用setAttribute()增加新的属性做下标,进而对单个节点进行事件注册。
63. 标签页要实现某一样式单独改变,通常去掉全部样式,再令某一添加样式
64. css3 圆角属性
border-radius:50%px; border-top-right-radius:10px;
border-radius:10px 20px;
border-radius:10px 20px 10px;
border-radius:10px 20px 30px 40px;
65. css3 border-image属性
-moz-border-image:url( XXX.png) 30 30 round;round表示多个图片填充,stretch表示单个图片被拉伸,边框图片需要做兼容。
-webkit-
-o-
67. css3通过box-shadow来设置块状元素的边框阴影
box-shadow:10px 10px 5px #888888;
box-shadow:h v blur spread color inset(outset);
68. css3通过background-size来规定背景图片的尺寸
background-size:length|percentage|cover|contain;
69. <input type=”text” id=”t1”value=””>
var t1=document.getElementById(“t1”);
t1.focus();可以事先获取焦点
70. click(); focus(); select();事件对应表示进行事件触发。
71. dom和dhtml的区别
72. 添加子节点,dom和dhtml混写也可以,下面是分开的:
dhtml:var p=document.createElement(‘p’);
p.align=”center”;
p.innerHTML=”asdasd”;
dom:p.setAttribute(‘align’,”center”);
var txt=document.createTextNode(“sdasd”);
p.appendChild(txt);
div1.append(p);
73. div1.insertBefore(h1,p1);
在div中把h1插在p1之前。
74. removeChild()删除子节点,必须是直接父元素删除。
75. bom对象指的是整个浏览器,window对象常用api:
alert(); prompt();
confirm();返回布尔值
close();
open();
printl();打印当前网页
76. DOM对象包括:window >navigator history location screen document
77. document对象:
write();
title属性设置标题栏文字
...
78. Navigator对象代表当前浏览器的信息。
navigator.userAgent最重要,通常用来确定浏览器版本和类型
79. dpi:dip是每平方英寸的像素值,越大越清晰
screen.deviceXDPI指的是屏幕横向dpi
80. scrren.width返回当前机器的分辨率
81. history对象用来代表历史信息
history.back()返回上一个网址
history.forward() 进入下一个网址
history.go(-2)返回上两个网页,history.go()里参数为正数则是前进,负数则是后退。
82. location对象代表浏览器地址信息。
跳转到新网页:location.href=”新网页”,也可以做字符串返回,动态代表浏览器的跳转操作。
重新加载,动态代替浏览器的刷新操作
83. 获取textarea的值并不是用innerHTML或是innerText而是value值
84. 标签页常常自定义属性,作为下标。
85. 获得事件源对象
var currObj=e.target||e.srcElement;
this是注册事件的对象 而事件源是真正发生事件的对象。
86. 获取鼠标坐标
function(e){
document.write(e.clientX+”,”+e.clientY)}
87. 获取鼠标按键,左中右:
e.button
88. div1包含div2,div1.onclick=function(){
this.style.width=”100px”;
}
点击外围div2,会触发div1注册的事件,此时this表示div1(注册事件的对象),而事件源指的是div2。e.target||e.srcElement.
89. dom写法创建文本节点。
document.createTextNode(t1.value);