这篇博客介绍了JavaScript的基础知识，包括如何引入JS、基本语法和函数示例。重点讲解了JavaScript事件和DOM（Document Object Model）的概念，解释了DOM如何作为编程接口来操作HTML文档，并展示了DOM方法的实际应用。此外，还详细阐述了省市二级联动的代码实现和动态添加内容的方法。
文章目录
JavaScript
引入JS
JavaScript 代码必须位于 标签之间。
基本语法
1. 变量 var 变量名='value';
2. JavaScript 数据类型: 字符串值，数值，布尔值，数组，对象。
3. JavaScript 函数:
function myFunction(p1, p2) {
return p1 * p2;
} // 该函数返回 p1 和 p2 的乘积
4.判断相等?
==: 值是否相等
===: 类型和值是否相等;
5. 判断语句
if(条件){
满足条件做的事情
}else{
不满足条件做的事情
}
6.for循环
for(var i=0; i<count; i++){
循环做的操作}
函数示例
<script>
var info = "打开成功!";
alert(info);
</script>
标签对象的属性信息:
innerHTML ---- 当前标签对象里面嵌套的html信息
value ---------用户输入的信息值
src ------ 获取图片的路径， 通过赋值方式实现修改图片路径
checked -----判断当前多选框是否被选中
js事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
onsubmit --- 提交事件
onclick ----点击事件
onfocus -----聚焦事件
onblur -------离焦事件
onchange ---- 当对象信息改变时执行的内容
<button onclick="getElementById('demo').innerHTML=Date()">
现在的时间是?
</button>//此语句应用的是点击事件。当点击该语句时弹出当前时间。
应用事件可以干什么？
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等 ...
DOM(document object model)
DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
- 文档是一个文档节点。
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。are text nodes。
- 注释是注释节点。
DOM方法
document.getElementsByName --- 返回的是一个列表对象
document.getElementById --- 返回的是一个元素对象
document.createTextNode --- 创建一个文本节点
document.createElement --- 创建一个元素节点
NodeObj.appendChild --- 为元素添加一个新的子元素
省市二级联动
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function changeCity() {
最低0.47元/天 解锁文章
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
