1.DOM 简介
DOM 它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。
在 JavaScript 中，DOM 不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。
在 jQuery 中，已经将最常用的
DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。
1.D 表示的是页面文档 Document、O 表示对象，即一组含有独立特性的数据集合、M表示模型，即页面上的元素节点和文本节点。
2.DOM
有三种形式，标准 DOM、HTML DOM、CSS DOM，大部分都进行了一系列的封装，在 jQuery 中并不需要深刻理解它。
3.树形结构用来表示
DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部分是文本节点操作。
二．设置元素及内容
最常用的操作就是对元素内容的获取和修改。
在常规的 DOM 元素中，我们可以使用 html()和 text()方法获取内部的数据。html()方法可以获取或设置
html 内容，text()可以获取或设置文本内容。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//alert($("#dv").html());//获取的是id为dv里面的东西包括HTML标签，结果是这样<strong>www.baidu.com</strong>
//alert($("#dv").text());//获取的是id为dv里面的东西不包括HTML标签，结果是这样www.baidu.com
$(‘#dv‘).text(‘<em>www.li.cc</em>‘);//结果是<em>www.li.cc</em>，不能解析HTML标签
$(‘#dv‘).html(‘<em>www.li.cc</em>‘);//结果是>www.li.cc，能够解析html标签//注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。
//$(‘#dv‘).html($(‘#dv‘).html() + ‘<em>www.li.cc</em>‘); //追加数据//如果元素是表单的话，jQuery 提供了 val()方法进行获取或设置内部的文本数据。
alert($(‘input‘).val()); //获取表单内容
$(‘input‘).val(‘www.li.cc‘); //设置表单内容});
</script>
<style type="text/css"></style>
</head>
<body>
<div id="dv"><strong>www.baidu.com</strong></div>
<input type="text" value="wocao" />
</body>
如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//alert($(‘input‘).val());
//$(‘input‘).val(‘女‘);//设置value为女
$("input").val(["男","女", "编程" ]); //value 值是这些的将被选定});
</script>
<style type="text/css"></style>
</head>
<body>
<input type="radio" value="男" />男
<input type="radio" value="女" />女
<input type="checkbox" value="编程" />编程
</body>
三．元素属性操作
除了对元素内容进行设置和获取，通过 jQuery 也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//alert($(‘#dv‘).attr(‘id‘));
//$(‘#dv‘).attr(‘title‘, ‘我是域名‘); //设置属性及属性值$(‘#dv‘).attr(‘title‘, function () { //通过匿名函数返回属性值,效果同上
return ‘我是域名‘;
});//设置某个元素多个 key 属性的属性值
$(‘#dv‘).attr( {
‘title‘:‘我是域名‘,
‘class‘:‘red‘,
‘data‘:‘123‘
});
});
//class不建议用attr来设置，后面哟更强大和更丰富的功能替代
</script>
<style type="text/css"></style>
</head>
<body>
<div id="dv"><strong>www.baidu.com</strong></div>
<div id="dl"><strong>www.baidu.com</strong></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(‘#dv‘).attr(‘title‘, function (index, value) { //可以接受两个参数
return value + (index+1) + ‘，我是域名‘;//value 是原来的title属性的值，如果没有那么就是undefined
});
});</script>
<style type="text/css"></style>
</head>
<body>
<div id="dv"><strong>www.baidu.com</strong></div>
<div id="dl"><strong>www.baidu.com</strong></div>
</body>