第5章基础DOM和CSS操作论述.pdf

第 5章 基础 DOM和 CSS操作 学习要点： 1.DOM简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS方法 DOM在 JavaScript课程中我们详细的探讨过，它是一种文档对象模型。方便开发者对 HTML结构元素内容进行展示和修改。在 JavaScript中，DOM不但内容庞大繁杂，而且我 们开发的过程中需要考虑更多的兼容性、扩展性。在 jQuery中，已经将最常用的 DOM操 作方法进行了有效封装，并且不需要考虑浏览器的兼容性。 一．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(emwww.li.cc/em); //设置 html内容 $(#box).text(emwww.li.cc/em); //设置文本内容，会自动转义 html标签 注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期 望能够追加数据的话，需要先获取原本的数据。 $(#box).html($(#box).html() + emwww.li.cc/em); //追加数据 如果元素是表单的话，jQuery提供了 val()方法进行获取或设置内部的文本数据。 $(input).val(); //获取表单内容 $(input).val(www.li.cc); //设置表单内容 如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递 操作。 $(input).val([check1,check2, radio1 ]); //value值是这些的将被选定 三．元素属性操作 除了对元素内容进行设置和获取，通过 jQuery也可以对元素本身的属性进行操作，包 括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。 attr()和 removeAttr() 方法名 描述 attr(key) 获取某个元素 key属性的属性值 attr(key, value) 设置某个元素 key属性的属性值 attr({key1:value2, key2:value2...}) 设置某个元素多个 key属性的属性值 attr(key, function (index, value) {}) 设置某个元素 key通过 fn来设置 //获取属性的属性值 //设置属性及属性值 $(div).attr(title); $(div).attr(title, 我是域名); $(div).attr({ title:我是域名, id:red }); $(div).attr(title, function () { //通过匿名函数返回属性值 return 我是域名; }); $(div).attr(title, function (index, value) { //可以接受两个参数 return value + (index+1) + ，我是域名; }); 注意：attr()方法里的 function() {}，可以不传参数。可以只传一个参数 index，表示当前元 素的索引(从 0 开始)。也可以传递两个参数 index、value，第二个参数表示属性原本的值。 注意：jQuery中很多方法都可以使用 function() {}来返回出字符串，