jQuery学习笔记（一）--基础的DOM和CSS操作

一．DOM 简介
由于课程是基于JavaScript 基础上完成的，这里我们不去详细的了解DOM 到底是什么。
只需要知道几个基本概念：
1.D 表示的是页面文档Document、O 表示对象，即一组含有独立特性的数据集合、M
表示模型，即页面上的元素节点和文本节点。
2.DOM 有三种形式，标准DOM、HTML DOM、CSS DOM，大部分都进行了一系列的
封装，在jQuery 中并不需要深刻理解它。
3.树形结构用来表示DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部

分是文本节点操作。

二．设置元素及内容
我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我
们就可以对这些元素进行DOM 的操作。那么，最常用的操作就是对元素内容的获取和修改。
html()和text()方法
方法名描述
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 值是这些的将被选定