javascript基础二JavaScript DOM编程

今天讲解的内容更多的是要求大家要细心。

好，我们接着来看下JS中的字符串

substr(startIndex,len)//从startIndex开始，截取len个字符。

                       

一、substr

substring(startIndex,stopIndex)//从startIndex开始，截取到stopIndex位置（不包括stopIndex所在的字符）。

 

二、substring

toUpperCase()//转换大写、toLowerCase();//转换小写 这个就不用讲了

match()、replace()、search()方法，正则表达式相关（在JS Dom课程里讲）。

接下来我们看下JS当中数组的使用：

 

三、数组的基本写法

需要注意的是，JS中的大小写一定要写对。否则，浏览器报错。

本次出错是在arrVal，V没有大写。

 

四、数组推荐写法

当然JS中数组还有几种变态的写法，在这里列举一下，就不一一演示了。

new Array();

new Array(size);

new Array(element0, element0, ..., elementn);

var arr[‘China’,2008,true,’Hello’];(推荐。)

 

在js中也有类似于C#中foreach的循环

 

五、forin循环遍历的是数组的索引

forin主要是用来遍历键值对数组的，forin循环其实遍历的就是键值对中的键，普通数组也可以把索引看做是键，把元素内容看做是值。

现在我就想用forin循环遍历里面的内容，肿么办？

 

六、通过forin循环遍历值

 

七、forin循环可以遍历对象

 

八、打开浏览器的错误提示功能

 

九、快速纠错

下面我们一起做几个数组的案例题：

求一个整数组中的最大值。定义成函数。

想下，这个数组有没有参数？有参数。有没有返回值呢？返回值就是我们求的结果。

 

十、求数组中的最大值

 

十一、竖线划分问题

 

十二、竖线划分

 

十三、交换字符串中的元素

接下来我们看下js中的键值对集合

 

十四、js中的键值对输出

 

十五、取不到值的原因

for循环只记普通数组的个数。

 

十六、键值对数组通过forin来遍历输出

 

十七、键值对集合的简写方式

 

十八、在js里写键值对的注意事项

 

十九、Array的简化声明

 

二十、键值对的嵌套写法

 

二十一、键值对的嵌套写法二

接下来我们看下扩展方法

大家想想C#的扩展方法都是什么？

静态类，静态类中写几个静态方法，这些方法中必须有一个this数据类型。this后面跟什么数据类型，表示给哪个方法扩展的。

这里所有的扩展方法就是原型 → prototype

js本身并不是面向对象的,但是js也能实现继承,就是通过原型来实现的.

原型又是跟作用域链相关,就实现类似于继承的东西.我们这里只给大家说下原型是什么东西就可以了.

 

二十二、验证e-mail的方法

但是我现在有个问题，每次验证e-mail的时候，我自己都要写个方法，非常的不爽。我们希望这样，字符串天生就带一个方法验证是不是e-mail，如果是返回true，不是的话返回false。但是现在字符串没有这个方法，需要我添加这么一个方法。

字符串都属于string这个类型，给string添加一个方法：

 

二十三、给原型中添加方法

接下来我们就来看下JavaScript DOM编程

对于之前我们介绍的JS当中的高效的好用的语法，我们以后可以经常去用。对于其中不高效也不好用的部分，我们不用花太多的精力进行研究，甚至可以不知道。

  接下来我们就学习怎么应用JavaScript DOM来操作网页上的元素，什么是dom呢？一篇网页我们就可以把它看成是一个dom。把这个网页我们模拟成根节点，子节点，属性我们就叫做一个dom。就是模拟成一个对象来进行操作。

 

二十四、DOM模型

在介绍之前我们先说获取页面元素的问题：

 

二十五、整个页面就是一个window对象

 

二十六、实现点击按钮的时候，让文本框显示一个值

 

二十七、用document.getElementById实现对页面元素的控制

推荐：document.getElementById(‘元素的Id’);

为什么不让使用window.呢？接下来我们就看一下。

 

二十八、用window的时候这样是可以的

 

二十九、当加入一个表单的时候就报错了

 

三十、最终推荐的写法

接下来我们在看下dom中的绑定方法：

 

三十一、以后推荐使用动态注册事件

 

三十二、两种写法完全的不一样

 

三十三、两种写法的作用域不一样

下面我们介绍下window里面其它的常用方法：

 

三十四、window.confirm

写的时候window是可以省略的。

 

window.confirm演示

 

三十五、window.location.href

 

 

setInterval演示

 

三十六、setInterval代码

实现每隔1秒钟text里面自动加1.

累加之后点停就停止了。

 

三十七、自动增加秒数和停止的代码

 

自动增加秒数和停止的演示

下面我们做个标题栏走马灯：

三十八、标题栏走马灯效果

 

标题栏走马灯效果演示

下面我们插入一个大家在用dom编程过程中经常遇到的问题

请看下面代码：

 

四十、设置对应的两个值

 

四十一、运行结果报错

代码是从上到下依次运行的，当程序运行到script后面的内容还没有，所以页面上没有叫btn1的。所以不能设置值。

解决办法1：

 

四十二、解决办法1

 

四十三、解决办法2

好，现在我们继续说下上面的跑马灯那个练习。

 

四十四、向左滚，向右滚代码

 

向左滚，向右滚演示

 

四十五、setTimeout的用法

 

四十六、动态注册事件

onunload（页面卸载后触发）

onbeforeunload（页面卸载前触发）如：在我们写日志的时候，关闭页面，就会有提示，您确定要关闭页面吗？

 

四十七、onbeforeunload代码

我们接下来说下window的属性

 

四十八、window.location属性

 

四十九、window.event

                    

鼠标移动的时候显示当前的坐标演示

我们在窗体上按下一个按钮的时候,点击层的时候直接点是一种效果,按下ctrl键又是一种效果.按下alt键又是一种效果.这样可以提高用户的体验效果.

 

五十、按下不同键执行不同效果的代码

 

按下不同键执行不同效果的演示

用到window.event在IE浏览器下支持，但这个不是标准。上面的代码在火狐下就不支持。因为火狐最标准。待会我们再去介绍不同浏览器怎么去写event对象。

 

// document.title = window.event.screenX + ',' + window.event.screenY + '' + this.id;

这是相对于屏幕的坐标。

 

还有个offsetX,offsetY,offset是偏移量的意思。下面我写一段代码，大家猜一下offsetX，offsetY是什么意思？

插一句，在我们用js编程的过程中，有的地方它不给你报错。所以，我们在纠错的时候，需要耐心。

 

五十一、相对于当前元素的坐标

 

相对于当前元素的坐标演示

下面我再说下returnValue

 

五十二、returnValue

在火狐下FireFox preventDefault();取消事件的默认动作。

直接写return false也可以。

 

最初触发事件源的对象srcElement：

 

五十三、srcElement.value

button，发生事件时鼠标按键，1为左键，2为右键，4为中滑轮。

 

五十四、button

 

button演示

接下来我们介绍下screen对象;获取屏幕的信息：

当用户的电脑分辨率太低的时候，我们要用js检测一下用户的电脑的分辨率是多少。如果低于1024*768提示一下用户。

 

检测用户的分辨率演示

 

五十五、检测用户电脑的分辨率的代码

 

五十六、复制网址的值，读取网址的值

 

复制网址的值，读取网址的值演示

clearData(“Text”)清空粘贴板。

接下来再给大家说几个事件。

比如有些网站，不让大家复制。

看下我下面的复制过程，

 

五十七、复制过程一

打开个高级记事本，复制-粘贴。然后ctrl+B（快速浏览）。

要是复制html带很多的html标签，不想要html标签，直接粘文字就可以了。

所以，不要迷恋哥，哥只是传说！

接下来咱们就看一下，这种网站是怎么不让我们复制的，为什么通过上面的方法就能复制了。

不想让别人复制的话，就用到JS当中的几个事件。

 

五十八、禁止复制代码

当这种方式实现的时候，用户禁用脚本就能复制了，所以，像百度文库用flash实现的。

 

五十九、禁止粘贴的代码

 

禁止复制，禁止粘贴演示

让大家复制，最后加个文章的出处。

 

六十、允许用户复制，但是需要在最后加一个出处代码

history操作历史记录。

window.history.back()后退；window.history.forward()前进。

window.history.go(-1)后退一步；window.history.go(1)前进一步。

 

允许用户复制，但是需要在最后加一个出处演示

接下来我们说下document属性：

document属性是window对象中最复杂的属性。

 

六十一、直接写write和writeln

 

六十二、直接写write和writeln效果

 

六十三、写在onload里面的代码

 

六十四、写在onload里面的效果

 

六十五、write和writeln的区别

 

六十六、用document.write()动态创建元素会遇到一些个问题

那么，在什么时候会用到document.write()和document.writeln()呢？

在嵌入外部的小模块的时候会用到，假如自己做了个网页。

 

六十七、嵌入外部小模块

http://news.baidu.com/newscode.html网址为：在百度找到新闻的代码的网址。

 

六十八、看下外部js文件是什么

 

 

六十九、打开js文件

 

七十、document.write动态生成div

那么为什么要这么去实现呢？为什么不直接给我们个div代码呢？如果是div代码，网页上肯定会显示这段新闻。第二天百度想变一变，变了之后，我们还要重新拿一段代码复制到这里。如果是引入外部js的话，百度只要一概js对应document.write动态生成的div，所有的用户就都改了。非常的灵活而且非常的方便。

看起来不起眼的东西，作用还是非常的大的。

接下来我们就说下访问页面上元素的其它方式：

 

七十一、获取根节点下每个节点的js写法

但是这样做太麻烦，浏览器为我们封装了三个方法。

1  2  3  4  5      6     21 22 23     24     25     26     
      
       27         
         28             
31             
34         
35              
         36             
39             
42         
43     
       
        
         
29                 30             
         
32                 33             
        
        
         
37                 38             
         
40                 41             
        
       
      
44 45 

 

七十二、documnet.getElementsByName和documnet.getElementsByTagName的区别

案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。

                     

七十三、案例代码

插入案例代码位置：

1  2  3  4  5      6     31 32 33     34     35     36     37     38     39     40     41     42     43     44     45     46     47     48     49     50     51 52 

七十四、案例1演示

课后练习：

案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = “” ，让元素可用。disabled=disabled,为不可用)disabled=true;（用到计时器控件）

 

练习：加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中。

 

七十五、练习图解

练习：美女时钟。

 

七十六、这么获取时分秒

 

作者近期文章列表:

C#中级进阶教程（完全免费，献给代码爱好者的最好礼物。注：本作者分享自己精心整理的C#中级进阶教程，无任何商业目的。 希望与更多的代码爱好者交流心得，也请高手多多指点！！！）
三层及其它内容
SQL数据库 ADO.net
面向过程，面向对象中高级
winform基础
面向过程
面向对象
GDI+
HTML概述以及CSS
JavaScript基础
jQuery