今天继续学习JavaScript,该笔记主要记录JavaScript的循环、JS HTML DOM、JS Window。

JavaScript的for循环与white循环:

循环可以将代码块执行指定的次数。

JavaScript 支持不同类型的循环:

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块
  • 本处主要展示for/in和while这两个循环。
  • for/in:
  • eg.
  • JavaScript循环、JS HTML DOM、JS Window
  • 结果
  • JavaScript循环、JS HTML DOM、JS Window
  • JavaScript循环、JS HTML DOM、JS Window
  • JavaScript循环、JS HTML DOM、JS Window
  • while:
  • eg.
  • JavaScript循环、JS HTML DOM、JS Window
  • 结果:
  • JavaScript循环、JS HTML DOM、JS Window
  • JavaScript循环、JS HTML DOM、JS Window
  • JavaScript循环、JS HTML DOM、JS Window
  • JavaScript循环、JS HTML DOM、JS Window
  • JavaScript循环、JS HTML DOM、JS Window
HTML DOM(文档对象模型):
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

      HTML DOM 模型被构造为对象的树。

HTML DOM 树:

JavaScript循环、JS HTML DOM、JS Window

查找HTML 元素
首先找到该元素。有三种方法来做这件事:
  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素
  • 注意:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
  • eg.
  • JavaScript循环、JS HTML DOM、JS Window
  • JavaScript循环、JS HTML DOM、JS Window
  • 结果:
  • JavaScript循环、JS HTML DOM、JS Window
  • JavaScript循环、JS HTML DOM、JS Window
  • JavaScript循环、JS HTML DOM、JS Window
  • JavaScript循环、JS HTML DOM、JS Window
改变 HTML 元素:
比较好的例子:使元素不可见。改变元素内容样式(大小写)(onchange)
eg.
JavaScript循环、JS HTML DOM、JS Window
JavaScript循环、JS HTML DOM、JS Window
界面结果:
JavaScript循环、JS HTML DOM、JS Window
JavaScript循环、JS HTML DOM、JS Window
JavaScript循环、JS HTML DOM、JS Window
JavaScript循环、JS HTML DOM、JS Window
对事件作出反应:
向 button 元素分配 onclick 事件:
eg.
JavaScript循环、JS HTML DOM、JS Window
结果
JavaScript循环、JS HTML DOM、JS Window
mouse事件:
eg.
JavaScript循环、JS HTML DOM、JS Window
结果
JavaScript循环、JS HTML DOM、JS Window
鼠标点击事件:
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,
当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
eg.
JavaScript循环、JS HTML DOM、JS Window
JavaScript循环、JS HTML DOM、JS Window
结果
JavaScript循环、JS HTML DOM、JS Window
JavaScript循环、JS HTML DOM、JS Window
添加和删除节点(HTML 元素):
eg.
JavaScript循环、JS HTML DOM、JS Window
JavaScript循环、JS HTML DOM、JS Window
结果:
JavaScript循环、JS HTML DOM、JS Window
JavaScript循环、JS HTML DOM、JS Window
JavaScript循环、JS HTML DOM、JS Window


相关文章:

  • 2022-12-23
  • 2021-05-06
  • 2021-09-26
  • 2022-12-23
  • 2021-12-10
  • 2022-12-23
猜你喜欢
  • 2021-04-19
  • 2021-11-20
  • 2022-01-24
  • 2022-02-07
  • 2022-12-23
  • 2022-01-25
  • 2022-12-23
相关资源
相似解决方案