一周一话题之四，JavaScript、Dom、jQuery全面复习总结
JavaScript—>Dom,C#—> .Net Framework；JavaScript和C#都是一些基本语法，没有Dom和.Net类库，JavaScript和C#也就发挥不出来它的威力来。本文就带你来回顾一下Dom操作。
Dom（文档标签当作对象来处理）
(1)DOM就是html页面模型，将每个标签都作为一个对象，javascript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。
(2)DOM就是一些让JavaScript能操作Html页面控件的类、函数
(3)DHtml= CSS+JavaScript+Dom
动态设置事件
<script type="text/javascript">
function F1() { alert('In F1'); }
</script>
<input type="button" value="关联F1" onclick="document.onclick=F1;" /><input type="button" value="关联F1" onclick="F1()"
带()表示调用函数，直接写函数名表示将其设置为事件的处理函数。
(1) window方法
①调用window的方法时，可以省略window
②方法
alert:弹出警告对话框
confirm:确定、取消对话框
setInterval(code,delay):启动计时器,每隔一段时间执行指定的代码
code推荐使用匿名函数
clearInterval(intervalId):停止计时器
setTimeOut():定时执行，只执行一次
clearTimeOut():清除定时
(2) window的属性
① window.location
属性：
location.protocol：该属性保存了URL的协议部分。
location.hostname：该属性保存了URL的主机名部分。
location.port：该属性保存了URL中的端口号部分。
location.pathname：该属性保存了URL中的文件名部分。
location.search：保存了URL的查询部分（如果有的话）。
location.hash：保存了URL中的anchor名称（如果有的话）。
方法：
window.location.href：获取当前地址
window.location.reload()：刷新当前页
② window.event
->按下键,复合键
altKey、shiftKey、ctrlKey
if (window.event.altKey) {
alert("按下了Alt键");
}具体按下的什么按键（与ASCII值不同）keyCode
->鼠标坐标
clientX、clientY 获取鼠标坐标，相对于页面来说的坐标
offsetX、offsetY 相对于当前元素自己左上角的偏移坐标
screenX、screenY 相对于整个屏幕的偏移坐标
->停止事件继续执行
window.event.return = false;(标准)不兼容火狐
也可以使用return false;来设置当前事件处理程序返回值为false
③ window.screen
window.screen.width 获取用户屏幕分辨率宽
window.screen.height 获取用户屏幕分辨率高
④ clipboardData
setData() 设置剪切板的值
getData() 读取粘贴板的值
clearData() 清空粘贴板的值
function Setclipboard() {
window.clipboardData.setData('Text', window.clipboardData.getData('Text') + '霹雳烈火版权所有');
}⑤ history（操作历史记录）
window.history.back() 后退
window.history.go(-1) 后退
window.history.forward() 前进
window.history.go(1) 前进
⑥ document
-->write与writeln
document.write就是动态创建内容、元素的
document.writeln 也是动态创建内容，源代码中会换行
补充：以上两个只有在与页面加载的时候同时使用才会保证页面上的内容
应用：广告链接，服务器端js代码一改，其它引用它的地方全改
-->获得dom对象
getElementById() 根据元素Id获得对象
getElementsByName() 根据元素name获得对象
getElementsByTagName 根据指定标签获得对象
function GetDomObject() {
alert('getElementById:' + document.getElementById('txtElementById').value);
var arrobjs = document.getElementsByName('abc');
for (var i = 0; i < arrobjs.length; i++) {
alert('getElementsByName元素值：' + arrobjs[i].value);
}
var tagNameObjs = document.getElementsByTagName('p');
for (var j = 0; j < tagNameObjs.length; j++) {
alert('getElementsByTagName元素值：' + tagNameObjs[j].innerHTML);
}
}注： 不能用for in（键值对）循环
⑦ 其它属性
close 返回true或者false，表示window对象对对应的窗口是否关闭。
opener 表示打开当前窗口的那个window对象。
Defaultstatus 设置和返回窗口状态栏中默认显示的文本内容。
Status 设置和返回窗口状态栏中当前正显示的内容。
screenTop 返回窗口左上角顶点在屏幕上的垂直距离。
srceenLeft 返回窗口左上角顶点在屏幕上的水平距离。
onload 页面加载后触发：页面加载后就可以document.getElementById(“控件Id”)来获取dom元素ID了
onunload 页面卸载后触发
onbeforeunload 页面卸载前触发
注：要为整个页面注册事件就用document,不要用body
onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）、oncontextmenu（在浏览器中单击鼠标右键显示”右键菜单”时触发）
事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 。
<table onclick="alert('table onclick');">
<tr onclick="alert('tr onclick');">
<td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td>
<td>bbb</td>
</tr>
</table>取消事件冒泡： window.event.cancelBubble = true; //IE下
this：表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用
window.event.srcElement：指最初引发事件的事件源对象
fuction method(){
alert(this.value);
}
<input type="text" onblur="method()"/>这样是不正确的，可以采用
fuction method(btn){
alert(btn.value);
}
<input type="text" onblur="method(this)"/>补充：this表示当前触发事件的对象，表示当前谁在执行事件，发生事件的控件；
event.srcElement是引发事件的对象：事件冒泡。
如果要直接使用this.属性，此时的函数不能是被调用的而必须是响应函数，而window.event.srcElement则无此限制。
createElement(‘element’) 创建指定标签dom对象
appendChild(node) 将创建元素添加到相应的元素下
removeChild(node) 删除元素
replaceChild(new,old) 替换元素
insertBefore(new,参照) 插入元素
(1) 几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
(2) FF不支持innerText，使用textContent
(3) innerHTML可以代替createElement，属于简单、粗放型、后果自负的创建
① 大量进行节点操作时，使用innerHTML的性能要好于频繁的Dom操作
② 使用innerTHML=‘’来删除节点可能会造成内存问题
innerText ：只能设置纯文本，即便写了html代码，也会对html代码进行编码，
innerHTML：可以设置html代码和纯文本。
3. 操作样式
(1)通过操作style属性来修改元素的样式
css中属性名在JavaScript中操作的时候属性名可能不一样，比如：font-size→style.fontSize；margin-top→style.marginTop //驼峰命名法
改边框：dvoObj.style.width
改背景：dvoObj.style.backgroundColor
改宽高：dvoObj.style.width|height--需要加px
注：不要写成div1.style.width=80px，而是div1.style.width=‘80px’
(2)设置元素样式
修改元素的样式不是设置class属性，而是className属性
<style type="text/css">
.emptyfield
{
background-color:Red;
}
.normal
{
background-color:inherit;
}
</style>
<script type="text/javascript">
function check(txt) {
var s = txt.value;
if (s.length <= 0) {
txt.className = "emptyfield";
alert('这个字段必填！');
}
else {
txt.className = "normal";
}
}
</script>
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />visibility设置隐藏后，隐藏部分仍然占位
click(),focus(),blur();//相当于通过程序来触发元素的单击、获得焦点以及失去焦点的事件。
(1) 创建正则表达式类的方法
var regex = new RegExp(“\\d{5}”);
var regex = /\d{5}/; -->推荐写法
/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法，写在//中的正则表达式就不用管转义符了。
(2) RegExp对象的方法
① 匹配
test(str)判断字符串str是否匹配正则表达式，相当于C#中的IsMatch
② 提取
exec(str)进行搜索匹配，返回值为匹配结果(*)，是一个对象，该对象包含所提取到的第一个字符串的“完成匹配结果”，以及所有的“提取组”;相当于c#中match()和matches()
③ 替换
replace()
能力检测：
if (typeof td1.innerText == 'string') {
td1.innerText = txt;
}
else {
td1.textContent = txt;
}(1)取消事件：window.event.returnValue不兼容FF
解决：用火狐特有 e. preventDefault()或者return false
(2)window.event.altKey：if(event.altKey)不兼容FF
解决：
function BodyClickHandlerOnFF(e) {
if (e.altKey) {
alert('按下alt键');
} else {
alert('普通点击！');
}
}
<body onclick="BodyClickHandlerOnFF(event);">(3) 获取位置：window.event.ClientX、ScreenX、OffsetX不兼容FF
解决：arguments[0].clientX…
(4) 获得事件源对象：window.event.srcElement 不兼容FF
function MyClickHandlerOnFF(e) {
var obj = e.target;
alert(obj.value);
}
<input type="button" value="FF下事件源对象" onclick="MyClickHandlerOnFF(event);"/>(5) innerText：不兼容FF
解决：textContent
(6) 扩展《FF与IE对JavaScript和CSS的区别》
(1) 声明变量赋初值
(2) 尽量避免直接声明全局变量，比如要声明全局变量name,但是它有可能与window.name冲突，所以全局变量一般都会声明在一个全局对象中：var itcast={name:’zxh’,num:10};使用这些全局变量的时候通过itcast.name或者itcast.num，就可以减少与系统的重名了。
(3) 当编写大量Js代码的时候难免会遇到命名冲突的问题，这时可以通过模拟命名空间的方式来避免命名冲突。例如：
var itcast={};
var itcast.net={};
var itcast.net.net0405={name:’zxh’,sayHi=function(){}};(4) 尽量避免使用全局变量。（搜索全局变量时，会一层一层的搜索每个作用域范围，耗时，低效，命名冲突）
(5) 使用减值循环或者优化循环条件，不要在循环条件中写i<xxx.length而要用一个变量来代替，i<len。因为循环条件每次都会执行，这样的话每次都会计算xxx.length。
(6) 避免使用eval(“alert(10);”);或setInterval(“myFunc();”,1000);这种双重解析的代码。低效！
(7) 使用原生的方法，比如内置的join()、reverse()，使用这些本来浏览器就有的方法不要自己写myJoin()之类的，性能低。原生方法都是用c或者c++写的，性能高。
(8) 尽可能使用switch来代替多个if-else
(9) 尽量减少语句数量
var arr=[1,2,’a’,true];
var p1={name:’zxh’,age:18};//创建对象(10) 当大量操作dom元素时使用文档碎片，避免多次更新页面。
var fragment=document.createDocumentFragment();
以下是一些练习题（试题来源--传智播客），看你能做出来几个呢
(1) 标题栏走马灯效果-->浏览器标题文字向左右滚动
(2) 点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”
(3) 十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。
(4) 加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中
(5) 点击按钮动态增加网站列表，分两列，第一列为网站的名字，第二列为带网站超链接的网站名。增加三行常见网站。
(6) 实现无刷新评论
(7) 创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色
(8) 评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色
(9) 超链接的单选效果-->页面上若干个超链接，点击一个超链接s的时候被点击的超链接变为红色背景，其他超链接背景没有变
(10) 点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色
(11) 放若干文本框，获得焦点的文本框黄色背景，其他控件背景颜色是白色
(12) 点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景
(13) 跟着鼠标飞的图片效果
(14) 点击【登录】按钮，弹出一个显示用户名、密码等的层
(15) 一幅图片。点击小图，弹出一个层在点击的位置显示小图对应的大图，并且显示姓名、身高等信息，点击层中的关闭按钮关闭层
(16) 界面上有几个球队名字的列表，将鼠标放到球队名字上就变为红色背景，其他球队背景颜色为白色，点击一个球队的时候就将点击的球队变为fontSize=30字体
(17) 显示数字时钟，时间显示到一个div
(18) 有一个搜索文本框，焦点不在文本框中的时候，如果文本框没有值，则文本框中显示灰色文本（Gray）的“输入搜索关键词”，否则显示用户输入的值；焦点在文本框中时如果之前显示“输入搜索关键词”则清空文本框的值，并且将文本修改为黑色
(19) 密码的安全级别,密码强度显示
(20) 歌曲列表 （CheckBox+Label）全选、全不选、反选
(21) 实现省市选择界面。请选择省的处理，从后向前删
(22) 权限选择页面，选择、撤回、全部选择、全部撤回
(23) 百度搜索时的自动完成功能
试题答案择日公布
注： 各位园友，如果本文对你还算有些帮助的话，就帮忙右下角推荐一下！
- 上一篇 »Java基础知识总结（超级经典）
- 下一篇 »经典完整java面试题大全
