JavaScript常用知识及其实例（三）

split

用于将一个字符串分割成字符串数组

实例图片

For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法：

for (语句 1; 语句 2; 语句 3)  {  被执行的代码块  }

语句 1 在循环（代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

实例图片

运行：

while 循环

While 循环会在指定条件为真时循环执行代码块。

语法

while (条件)  {  需要执行的代码  }

实例图片：

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素：document.getElementById("id")
• 通过标签名找到 HTML 元素： document.getElementsByTagName("p")
• 通过类名找到 HTML 元素 ：document.getElementsByClassName("class")

通过标签名:

运行结果：

visibility与display区别

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，
1、仍然占据它原来所在的位置。visibility会保留元素的位置

2、元素被隐藏之后，就不能再接收到其它事件了，当其被设为"hidden"的时候，就不能再接收响应到事件了，因此也就无法通过JS令其显示出来。
display属性就有一点不同了。
none隐藏（元素消失），可恢复
inline,block显示

实例代码图片：

运行结果：

点击隐藏按钮后，如图：

点击按钮“显示(visiable)”与“显示(inline)”按钮，显示如图：

只点击“显示(block)”按钮，显示如图：

使用HTML DOM分配事件

运行如下：

JavaScript HTML DOM事件

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例如下图：

运行如下图：

改变省份

点击第一个按钮

点击第二个按钮

onmouseover、onmouseout事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

实例代码图片：

当鼠标移动在字段上时，字段颜色改变，移出时，改变颜色

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

实例代码图片：

按下调用onmousedown改变颜色，放开调用onmouseup回到默认颜色

onfocus与onblur事件

运行如下：

当鼠标点击边框，获取焦点，边框中会显示“获取焦点”，鼠标点击边框外，边框中会显示“失去焦点”；

JavaScript HTML DOM 元素（节点）

添加和删除节点（HTML 元素）。

实例图片代码：

运行如下：

点击“点击创建节点”按钮，创建一个字段，点击“点击删除节点”，会将“这是一个节点1”删除掉

JavaScript Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

Window Location

window.location 对象在编写时可不使用 window 这个前缀。

一些例子：

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http:// 或 https://）

Window Location Href

location.href 属性返回当前页面的 URL。

实例如下：

运行如下：

点击提交，查询美女