jQuery设置元素及内容
本节课所讲内容：
1. jQuery DOM 简介
2. 设置元素及内容
主讲教师：Head老师
一. jQuery DOM 简介
在 jQuery 中，已经将最常用的 DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。
1.D 表示的是页面文档 Document、O 表示对象，即一组含有独立特性的数据集合、M
表示模型，即页面上的元素节点和文本节点。
2.DOM 有三种形式，标准 DOM、HTML DOM、CSS DOM，大部分都进行了一系列的
封装，在 jQuery 中并不需要深刻理解它。
3.树形结构用来表示 DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部
分是文本节点操作。
二. 设置元素及内容
我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我们就可以对这些元素进行 DOM 的操作。那么，最常用的操作就是对元素内容的获取和修改。
方法名 | 描述 |
html() | 获取元素中 HTML 内容 |
html(value) | 设置元素中 HTML 内容 |
text() | 获取元素中文本内容 |
text(value) | 设置原生中文本内容 |
val() | 获取表单中的文本内容 |
val(value) | 设置表单中的文本内容 |
在常规的 DOM 元素中，我们可以使用 html()和 text()方法获取内部的数据。html()方法
可以获取或设置 html 内容，text()可以获取或设置文本内容。
$('#box').html(); //获取 html 内容
$('#box').text(); //获取文本内容，会自动清理 html 标签
$('#box').html('<em>www.li.cc</em>'); //设置 html 内容
$('#box').text('<em>www.li.cc</em>'); //设置文本内容，会自动转义 html 标签
注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期
望能够追加数据的话，需要先获取原本的数据。
$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加数据
如果元素是表单的话，jQuery 提供了 val()方法进行获取或设置内部的文本数据。
$('input').val(); //获取表单内容
$('input').val('www.li.cc'); //设置表单内容
如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递
操作。
$("input").val(["check1","check2", "radio1" ]); //value 值是这些的将被选定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="q">
<title>jQuery 元素及内容设置</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
</head>
<body>
<div>
文本内容
</div>
<input type="text" name="name" value="用户名">
<div id="ad">
ad
</div>
<script>
//下面的方法添加数据会覆盖原有数据
// alert($('#ad').text('cd'));
// alert($('#ad').text('cd')); //返回的Object对象
// alert($('#ad').html());
// alert($('#ad').html('dfs'));
// alert($('input').val()); //返回的Object对象
// alert($('input').val('请输入')); //返回的Object对象
//在原有数据添加数据
$('#ad').html($('#ad').html()+'<em>追加数据</em>');
</script>
</body>
</html>
