split

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

实例图片

JavaScript常用知识及其实例(三)


For 循环

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

下面是 for 循环的语法:

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

语句 1 在循环(代码块)开始前执行

语句 2 定义运行循环(代码块)的条件

语句 3 在循环(代码块)已被执行之后执行

实例图片

JavaScript常用知识及其实例(三)

运行:

JavaScript常用知识及其实例(三)


while 循环

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

语法

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

实例图片:

JavaScript常用知识及其实例(三)


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")

通过标签名:

JavaScript常用知识及其实例(三)

JavaScript常用知识及其实例(三)
运行结果:

JavaScript常用知识及其实例(三)


visibility与display区别

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

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

实例代码图片:

JavaScript常用知识及其实例(三)

JavaScript常用知识及其实例(三)

运行结果:

JavaScript常用知识及其实例(三)


点击隐藏按钮后,如图:


JavaScript常用知识及其实例(三)

点击按钮“显示(visiable)”与“显示(inline)”按钮,显示如图:

JavaScript常用知识及其实例(三)

只点击“显示(block)”按钮,显示如图:

JavaScript常用知识及其实例(三)

使用HTML DOM分配事件

JavaScript常用知识及其实例(三)

运行如下:

JavaScript常用知识及其实例(三)

JavaScript常用知识及其实例(三)


JavaScript HTML DOM事件

onchange 事件

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

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

实例如下图:

JavaScript常用知识及其实例(三)

JavaScript常用知识及其实例(三)

运行如下图:

改变省份

JavaScript常用知识及其实例(三)


点击第一个按钮

JavaScript常用知识及其实例(三)

点击第二个按钮

JavaScript常用知识及其实例(三)


onmouseover、onmouseout事件

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

实例代码图片:

JavaScript常用知识及其实例(三)

JavaScript常用知识及其实例(三)

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


onmousedown、onmouseup 以及 onclick 事件

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

实例代码图片:

JavaScript常用知识及其实例(三)

JavaScript常用知识及其实例(三)

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


onfocus与onblur事件

JavaScript常用知识及其实例(三)

JavaScript常用知识及其实例(三)

运行如下:

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

JavaScript常用知识及其实例(三)

JavaScript HTML DOM 元素(节点)

添加和删除节点(HTML 元素)。

实例图片代码:

JavaScript常用知识及其实例(三)

JavaScript常用知识及其实例(三)

运行如下:

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

JavaScript常用知识及其实例(三)


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。

实例如下:

JavaScript常用知识及其实例(三)

JavaScript常用知识及其实例(三)

运行如下:

JavaScript常用知识及其实例(三)

点击提交,查询美女

JavaScript常用知识及其实例(三)


相关文章:

  • 2021-07-11
  • 2022-12-23
  • 2022-12-23
  • 2022-02-02
  • 2022-02-07
  • 2021-05-19
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-06-22
  • 2022-01-30
  • 2021-12-16
  • 2021-12-01
  • 2022-02-19
  • 2021-07-02
  • 2022-12-23
相关资源
相似解决方案