为什么写这篇文章

  JavaScript是Web的编程语言。所有现代的HTML页面都可以使用JavaScript。利用JavaScript,我们可以简单地对HTML页面内容进行操作,因此,JavaScript是Web开发中不可缺少的重要组成元素。这篇文章记录一下JavaScript对HTML内容的操作方法。

正文

JavaScript操作HTML标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//根据id获取标签
var tag = document.getElementByID("{标签名称}");

//对标签中的文本进行读写
//读
var txt = tag.innerText;
//写
tag.innerText = txt;

//创建新的标签
var newTag = document.createElement("{标签名}");

//为标签添加子标签
/*源码:
<ul id="list">
</ul>
*/
var parentTag = document.getElementByID("list");
var childTag = document.createElement("li");
childTag.innerText = "abc";
parentTag.appendChild(childTag);
/*结果:
<ul id="list">
<li>abc</li>
</ul>
*/

JavaScript与HTML数据交互

为button绑定事件触发JavaScript脚本

1
2
3
4
5
<!--单击触发绑定的Myfunction()函数-->
<input type="button" onclick="Myfunction()">

<!--双击触发绑定的Myfunction()函数-->
<input type="button" ondblclick="Myfunction()">

input框与JavaScript数据传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<!--这里的内容省略-->
</head>
<body>
<input type="text" placeholder="请输入内容" id="txt" />
<input type="button" onclick="MyFunc()" value="确认">

<script type="text/javascript">
function MyFunc(){
//示例:读取数据

//Step1:获取标签
var tag = document.getElementByID("txt");

//Step2:获取输入框内容
var data = tag.value;

//Step3:将输入框置空
tag.value=""; //空字符串

//Step4:反馈成功信息
alert("输入成功");

}
</script>
</body>
</html>

JavaScript库:jQuery

jQuery选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//id选择器
$("#{欲选择的ID名}")
$("#txt")

//样式(类)选择器
$(".{欲选择的类名}")
$(".header")

//标签选择器
$("{欲选择的标签名}")
$("h2")

//层级选择器
$("{欲选择的层级}")
$(".c1 .c2 a") //解释:class="c1"下的class="c2"下的<a>标签

//属性选择器
$("{标签名}[属性条件]")
$("input[name='n1']") //解释:选中了形如<input type="text" name="n1" />的标签

//多选择器
$("{筛选条件1},{筛选条件2}")
$(".c1, .c2, #form") //解释:同时选中了三种筛选标准

//同级选择器
$(...).prev() //同级上一元素
$(...).next() //同级下一元素
$(...).siblings() //同级所有元素

//选择父子标签
$(...).parent() //找到父标签
$(...).children("{子标签的筛选条件,可以为空}") //获取所有子标签

$(...).find("{筛选条件}") //递归寻找所有子孙中满足筛选条件的标签

利用jQuery操作HTML内容

1
2
3
4
5
6
7
8
9
10
//修改内容
$("#id").text("内容")

//与input框互动
$("#c2").val() //获取值
$("#c2").val("内容") //设置值

//创建标签并写入文本
var newTag = $("<li>").text("...")
$("#view").append(newTag); //添加子标签

JavaScript为button绑定事件并通过ajax发送请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//一个例子
function btnConfirmDelete() {
$("#btnConfirmDelete").click(function () { //为按钮绑定click事件
$.ajax({
url: "/order/delete/",
type: "POST",
data: {
'delete_id': deleteID,
}, //这里的data也可以用$("").serialize()
dataType: "JSON",
success: (function (res) {//发送成功后接受返回值(JSON)
if(res["status"]){
...
}
})
})
})
}

To Be Continued