如鹏网 静态Web开发 第四章:JSDom

本章主干知识点:

1、<a onclick="f1()"/> document.getElementById("btn1").onclick=function(){}

2、setInterval、setTimeout

3、事件冒泡以及如何阻止事件冒泡;

4、如何动态创建元素和动态添加元素;

5、innerText和innerHTML区别

6、案例:动态加载数据到table中;

-------------------------------------------------------------------------------

操作DOM的意义

DOM(文档对象模型)Document-Object-Model。

所谓文档对象模型,就是操作页面的元素。

JavaScript最终是要操作Html页面,而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象,如果JavaScript只是执行一些计算、循环等操作,而不能操作Html也就失去了它存在的意义。

-------------------------------------------------------------------------------

获取页面元素

整个页面或者说窗口就是一个window对象---------------window是顶级对象

页面中定义的变量和方法都是window的

使用window对象的属性、方法的时候可以省略window。

比如:

window.alert(‘hello‘);

window.f1();

window.document...

能不写window就不要写,这样可以减少js文件的字节数。

-------------------------------------------------------------------------------

注册事件的方式

直接在html中写js代码

<input type=“button”onclick=“alert(‘aaa’);” />

定义一个函数赋值给html中元素的on_xxx__属性

<input type=“button”onclick="f1();"/>

Document.getElementById(‘btn’).onclick=f1;注册

Document.getElementById(‘btn’).onclick=f1();直接调用。

function(){alert(‘bb‘);

return function(){alert(‘a‘);}}

-------------------------------------------------------------------------------

注意this的问题

使用element.on__xxx_的方式(匿名函数)

docement.getElementById(‘btn’).onclick=function(){};

//this就是 触发事件的对象,这个方法 是事件调用的

通过onclick=f1;与onclick=“f1();”

只有在事件响应函数才能使用this获得发生事件的控件,在事件响应函数调用的函数中不能使用(这里的this表示window对象),

f1.apply(document.getElementById(‘btn2‘))

-------------------------------------------------------------------------------

精彩的案例

案例:坑爹游戏(心算)

点击就送(屠龙宝刀)

-------------------------------------------------------------------------------

window对象的方法

window.confirm(‘无缘无故的恨’);

确定、取消对话框,返回true或false;

案例:开盖有惊喜

window.setInterval(code,delay)//每隔一段时间执行指定的代码

第一个参数:指定的代码字符串第二个参数:时间间隔(毫秒数)

window.clearInterval(intervalId);//停止计时器

clearInterval()取消setInterval的定时执行。

案例:实现标题栏走马灯的效果

案例:摇起来(一起嗨)

setTimeout也是定时执行,但是不像setInterval那样是重复的定时执行只执行一次,clearTimeout也是清除定时。

document.getElementById("btnShake").onclick = function () {
var divBody = document.getElementById("divBody");
divBody.style.position = "absolute";
setInterval(function () {
divBody.style.left = (Math.random() * 100) + "px";
divBody.style.top = (Math.random() * 200) + "px";}, 20);};

-------------------------------------------------------------------------------

window对象的属性

建议使用window.location.href=‘url’;//支持大多数浏览器

重新导航到新页面,可以取值,也可以赋值。

window.location.reload();//刷新当前页

window.event是非常重要的属性,用来获得发生事件时的信息,

事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息兼容不兼容FF。

clientX、clientY 发生事件时鼠标在客户区的坐标;邪恶案例:点我啊

var btnClickMe = document.getElementById("btnClickMe");btnClickMe.onclick = function () {alert("老公,你好厉害!");};btnClickMe.onmouseenter = function () {
var left = window.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
var top = window.event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
this.style.left = (left + 30)+"px";this.style.top = (top - 30) + "px";};
screen对象,获取屏幕的信息:
alert("分辨率:" + screen.width + "*" + screen.height);
        if (screen.width < 1024 || screen.height < 768) {
            alert("分辨率太低!");
        }

-------------------------------------------------------------------------------

window对象的属性---document

自己写一个Js文件里面写write代码(超链接)

write();//向文档中写入内容。writeln(),和write差不多,只不过后添加一个回车。在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起。writeln()是在源代码里面换行。与<br/>不一样。

http://news.baidu.com/newscode.html

-------------------------------------------------------------------------------

常用获取元素的三种方式

getElementById(), (非常常用),根据元素的Id获得对象,网页中id不能重复。也可以直接通过元素的id来引用元素,但是有有效范围、

getElementsByName(),根据元素的name获得对象,由于页面中元素的name可以重复,比如多个RadioButton的name一样,因此getElementsByName返回值是对象数组。

getElementsByTagName(),获得指定标签名称的元素数组,比如getElementsByTagName(“input”)可以获得所有的<input>标签。*表示所有标签

-------------------------------------------------------------------------------

案例练习

案例:你是我的小苹果.(被点的按钮显示小苹果,其他显示大苹果)

案例:网站中的注册按钮倒计时后才能使用

练习:养眼的时钟

超链接显示时间:

结论:取消事件的默认动作:直接写return false;浏览器都支持

-------------------------------------------------------------------------------

事件冒泡

事件冒泡:如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发。触发的顺序是“由内而外” 。

取消事件冒泡:

window.event.cancelBubble = true谷歌,IE

e.stopPropagation();火狐

再次强调this表示的是当前监听的事件

event.srcElement是引发事件的对象(冒泡)。

-------------------------------------------------------------------------------

动态创建DOM

调用document的createElement方法来创建具有指定标签的DOM对象

然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。

createElement(‘element’);创建一个节点

appendChild(node); 追加一个节点

removeChild(node);移除一个节点

replaceChild(new,old);替换一个节点

insertBefore(new,参照);把节点加到前面(插到某个节点前面)

firstChild

lastChild

document.createElement("<input type="button"value="hello"/>")

快速创建元素,并且赋值,但是注意设置的inner部分不会被设置

document.createElement(<a href="www.baidu.com">百度</a>)("百度"二字写不进去)

-------------------------------------------------------------------------------

innerText和innerHTML

几乎所有DOM元素都有innerText、innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码。

//FF不支持innerText,在FF下用textContent属性。也可以用innerHTML设置普通文本。

用innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建。

使用innerText与textContent的代码。

innertHTML所有浏览器都支持

-------------------------------------------------------------------------------

练习

练习:点击按钮动态增加网站列表。

var dic = { "百度": "http://www.baidu.com", "如鹏": "http://www.rupeng.cn", "谷歌": "http://www.google.com" };

动态产生的元素,查看源代码是看不到的。通过浏览器F12的功能可以看到。

<table border="1" id="tb">
        <tr><td>  乐乐:</td><td>我又胖了!</td></tr>
    </table>
    昵称:<input type="text" id="txt" /><br />
    <textarea id="textContent" rows="10" cols="15"></textarea><br />
    <input type="button" value="评论" id="btn1" />
</table>

  ------------------------------------------------------------------------------

Js操作样式

案例:老公开灯,老婆关灯;网页开关灯.

修改元素的样式是className属性。

(class是JavaScript的一个保留字,属性不能用关键字、保留字所以就变成className了)

修改元素的样式:this.style.backgroundColor="Red"。

注意在css中属性名在JavaScript中操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为JavaScript中-是不能做属性、类名的。

案例:把层飘起来

obj.style.cssFloat=‘right’;

紧急通告:

不要写成div1.style.width=80px

而是div1.style.width=‘80px‘

案例:鼠标移动到表格行,被点击的行高亮显示(背景红色)

案例:网站新闻消息中显示图片

  ------------------------------------------------------------------------------

设置特殊属性

setAttribute("score",10); //设定一些Dom元素属性名特殊的属性,

getAttribute("score");获取设置属性的值

1.鼠标移动到表格的单元格上显示对应单元格的分数.

练习:

------------------------------------------------------------------------------

案例练习

点击【登录】按钮,弹出一个显示用户名、密码等的层。将用户名、密码等写到一个层中,层默认是隐藏的,点击【登录】超链接以后将层显示出来。

一幅图片。点击小图,弹出一个层在点击的位置显示小图对应的大图,并且显示姓名、身高等信息,点击层中的关闭按钮关闭层。

点击“高级”CheckBox,则显示高级选项,否则隐藏

界面上有几个球队名字的列表,将鼠标放到球队名字上就变为红色背景,其他球队背景颜色为白色,点击一个球队的时候就将点击的球队变为fontSize=30字体

有一个搜索文本框,焦点不在文本框中的时候,如果文本框没有值,则文本框中显示灰色文本(Gray)的“输入搜索关键词”,否则显示用户输入的值;焦点在文本框中时如果之前显示“输入搜索关键词”则清空文本框的值,并且将文本修改为黑色。

  ------------------------------------------------------------------------------

form对象

document.getElementById(‘btn1’).click()。搜索引擎的,智能提示,点击后相当于点击了“搜索”按钮。

form对象是表单的Dom对象。

方法:submit()提交表单,但是不会触发onsubmit事件。

在点击submit后form的onsubmit事件被触发,在onsubmit中可以进行数据校验,如果数据有问题,返回false即可取消提交

  ------------------------------------------------------------------------------

JS中正则表达式案例

var regex = new RegExp(“\\d{5}”)

var regex = / \d{5} /(推荐)

/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法

RegExp对象的方法:

test(str)判断字符串str是否匹配正则表达式

exec(str)进行搜索匹配,返回值为匹配结果(*)

如果 exec() 找到了匹配的文本,则返回一个结果数组。否则,返回 null。

要提取多个需要反复调用exec()

//注意全局模式/…../g

var msg = ‘中国移动:10086,中国联通:10010,中国电信:10000‘;

  ------------------------------------------------------------------------------

string的正则表达式方法

案例:光标离开Email地址框的时候用正则表达式校验是否是合法的Email地址,如果不是的话Email地址框变红,并且注册按钮禁用,否则Email地址框颜色为白色,启用注册按钮。

Js中的Trim方法

^[0-9a-zA-Z_.\-][email protected][a-zA-Z\-0-9]+(\.[a-zA-Z]+){1,2}$

  ------------------------------------------------------------------------------

案例:评估密码强度

密码的安全级别:

弱密码:只由数字、字母或其他符号中的一种组成。

中度密码:由数字、字母或其他字符中的两种组成。

强密码:由数字、字母或其他字符3种以上组成。

密码少于6位安全级别降1级

案例--------------百度搜索时的自动完成功能。

  ------------------------------------------------------------------------------

代码一定在onload中吗

如果js代码需要操作页面上的元素,则将该代码放到onload里面。

因为当页面加载完毕之后页面上才会有相关的元素

如果js代码中没有操作页面元素的语句,则可以将该代码直接写在<script>标签中,

例如:声明变量,相加求和等操作。

<body>

<!-- html标签-->

<script type="text/javascript">

写在这里的代码,由于已经是页面的底部,在执行该代码时,页面的元素已经都加载完毕,所以可以不放到onload里面也可以操作页面上的元素。

建议将操作页面元素的代码都放到onload里面。

</script>

</body>

   ------------------------------------------------------------------------------  

不同浏览器的差异

企业问:说说开发项目的时候不同浏览器的不同点,你是怎么解决的?

不同浏览器中对DOM支持的方法不一样

获取网页中那个元素触发了事件:在IE里使用srcElement ;在FireFox里使用target

使用Dom获取和更改网页标签元素内文本:在IE里使用innerText ;在FireFox里使用textContent

    window.event  在火狐中不支持  用参数 e

    innerText  在火狐中不支持 用 textContent

   ------------------------------------------------------------------------------

课后练习

图片高亮显示

文本框边框高亮显示

点击按钮 表格隔行变色

点击表格中的行高亮显示

被点击的按钮背景颜色改变

文本框失去焦点后没有内容背景色为红色.不为空则恢复默认颜色

点击登录按钮显示 登录界面

制作一个新闻列表

如鹏网:http://www.rupeng.com

时间: 03-05

如鹏网 静态Web开发 第四章:JSDom的相关文章

如鹏网 静态Web开发 第五章:JQuery

课前说明 参考书:<锋利的jQuery> jQuery官网:http://jquery.com jQuery在线API:http://api.jquery.com http://api.jquery.com/api/ (xml文件.) jQuery UI:http://jqueryui.com/ ------------------------------------------- 常见的JavaScript框架库 什么是JavaScript框架库? 普通JavaScript的缺点:每种控件的

如鹏网 静态Web开发 第一章:html

第一章:html 本章主干知识点: 1.最基本的html文件的格式是什么? 2.常用标签:font.列表(ul.ol.li).img 3.表格标签:table.tr.td:表格的合并. 4.超链接.新窗口中打开的超链接.超链接锚点. 5.框架:frameset 6.表单:input(文本.radio.checkbox.隐藏字段.submit):select下拉列表:textarea:label: 7.div和span的区别. -----------------------------------

如鹏网.Net三层架构 第四章代码生成器

介绍商业及代码生成器,如何自己手写代码生成器 SELECT * from information_schema.`TABLES` WHERE TABLE_TYPE='base Table' and `ENGINE`='InnoDb' and TABLE_SCHEMA='rpcaterdb' SELECT * from information_schema.`COLUMNS` where TABLE_NAME='t_orders' 1. 完全手写采用三层架构(不借助于代码生成器)编写一个学生的增删

静态Web开发 HTML

静态Web开发 一章 HTML(Hyper Text Markup Language) 1节html入门 HTML超文本标记语言由浏览器解释执行开发人员编写的超文本文档就是网页 XHTMLHTML升级到XML得过度产品完全兼容HTML4.01并且具有XML的语法 不区分大小写头部分是给HTML页面增加一些辅助或属性信息,它里面的内容会最先加载,体部分是真正存放数据的地方 <head><meta http-equiv="Content-type" content=&qu

Android深度探索HAL与驱动开发 第四章

Android深度探索HAL与驱动开发 第四章 源代码的下载和编译 读书笔记 一.下载编译和测试Android源代码 1.配置Android源代码下载环境 创建一个用于存放下载脚本文件的目录(可将该文件放到任何一个目录在这里使用-/bin) # mkdir ~/bin # PATH=~/bin:$PATH 2.下载repo脚本文件(用于下载Android源代码) # curl htttps://dl-ssl.google.com/dl/googlesource/git-repo/repo> ~/

Android深度探索(卷1)HAL与驱动开发 第四章 源代码的下载和编译 读书笔记

Android深度探索(卷1)HAL与驱动开发 第四章 源代码的下载和编译 读书笔记     本章学习了使用git下载两套源代码并搭建两个开发环境.分别为Android源代码和Linux内核源代码.Android源代码中包含了HAL(即硬件抽象层) 的代码,并学习了如何搭建这两种开发环境. Android 的移植的本质就是Linux内核的移植,Linux内核的移植主要是Linux驱动的移植.而开发和测试Linux驱动就需要安装以上两个开发环境. 搭建两套环境的具体步骤如下: 一.下载编译和测试A

静态Web开发 DOM

四章 Dom 1节dom中的顶级对象 dom(文档对象模型)js最终是要操作html页面,让html变成DHtml,而操作Html页面就要用到DOMDOM可以吧Html页面模拟成一个对象,如果js只是执行一些计算.循环等操作,而不能操作Html也就失去了它存在的意义 window.onload=function(){ //1 window.fm.btn.onclick=function(){ //window.id 的方式获得元素(如果嵌套很多次,会非常麻烦) alert('大家好!'); }

如鹏网.Net三层架构 第三章MD5和NPOI使用

该章内容: 该章节中主要讲解MD5和NPOI使用, 在项目中如何使用两种技术. ---------------------------------------------------------------------------------------- MD5算法:是一种散列(hash)算法(摘要算法,指纹算法),不是一种纯压缩算法,不是一种 加密算法(易错).任意长度的任意内容都可以用MD5计算出散列值. MD5长度一般是32位16进制数字字符串,Md5值的个数是有限的,但是源数据是无限的

安卓移植和驱动开发第四章心得体会

第四章我们学习了安卓移植环境的搭建,首先构建开发是任何开发工作的基础,对于软,硬件非常丰富的嵌入式系统来说,构建高效,稳定的环境是否开展工作的重要因素之一,在构建开发环境之前,我们必须了解相关的开发流程,主要流程包括,下载安卓内核,熟悉开发环境和工具,交叉开发环境.是安卓系统移植开发的基本模型,Linux内核环境配置,GUN工具链,测试工具甚至集成开发的环境都是安卓系统移植的利器:熟悉Linux内核,因为安卓系统移植和开发需要重新制定Linux内核,所以熟悉内核配置,编译和移植很重要:熟悉目标板