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 事件。
实例代码图片:
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。
实例如下:
运行如下:
点击提交,查询美女