jQuery第三章预习

第三章

3.1 DOM操作的分类

DOM操作分为三个方面，DOM Core(核心)，HTML-DOM和CSS-DOM

1.DOM Core

使用DOM Core来获取表单对象的方法：

document.getElementsByTagName("form");

使用DOM Core来获取某元素的src属性的方法：

element.getAttribute("src")

2.HTML-DOM

使用HYML-DOM来获取表单对象的方法：

doucument.forms  //HTML-DOM提供了一个forms对象

使用HTML-DOM来获取某元素的src属性的方法：

element.src;

3.CSS-DOM

设置某元素style对象字体颜色的方法：

element.style.color = "red"

3.2 jQuery中的DOM操作

3.2.1查找节点

1.查找元素节点

var $li = $("ul li:eq(l)");       //获取<ul>里第2个<li>节点
var li_txt = $li.text();         //获取第2个<li>元素节点的文本内容
alert(li_txt);                  //打印文本内容

2.查找属性节点

var $para = $("p")                          //获取<p>节点
var p_txt = $para.attr("title")            //获取<p>元素节点属性title
alert(p_txt);                             //打印title属性值

3.2.2创建节点

1.创建元素节点

(1)创建两个<li>新元素。

(2)将这两个新元素插入文档中。

2.创建文本节点

3.创建属性节点

3.2.3插入节点

方法	描述	示例
append()	向每个匹配的元素内部追加内容
appendTo()	将所有匹配的元素追加到指定的元素中，实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中
prepend()	向每个匹配的元素内部前置内容
prepenfTo()	将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B前置到A中，而是将A前置到B中
after()	在每个匹配的元素之后插入内容
insertAfter()	将所有匹配的元素插入到指定的元素后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面
before()	在每个匹配的元素之前插入内容
insertBefore()	将所有匹配的元素插入到指定的元素前面。实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面