jQuery开发基础教程第4章 使用 jQuery操作DOM.pptVIP

创建属性节点 创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建。具体jQuery代码如下 var $p_1 = $(p title=明日科技明日科技/p); // 创建第1个p元素，包含元素节点和文本节点和属性节点，其中“title=明日科技”就是属性节点 var $p_2 = $(p title=明日图书明日图书/p); // 创建第2个p元素，包含元素节点和文本节点和属性节点，其中“title=明日图书就是属性节点 $(div).append($p_1); // 将第1个p元素添加到div中，使它能在页面中显示 $(div).append($p_2); // 将第2个p元素添加到div中，使它能在页面中显示 运行以上代码，将鼠标移至文字“明日科技”上，可以看到title信息，效果如图4-7所示。 图4-7 创建属性节点 4.3.2 插入节点 在元素内部插入 在元素内部插入就是向一个元素中添加子元素和内容。jQuery提供了如表4-2所示的在元素内部插入的方法。 方法 说明 示例 append(content) 为所有匹配的元素的内部追加内容 p id=B编程词典/p $(#B).append(pA/p); //向id为B的元素中追加一个段落 结果：p id=B编程词典pA/p/p appendTo(content) 将所有匹配元素添加到另一个元素的元素集合中 p id=B编程词典/p p id=A明日图书/p $(#B).appendTo(#A); //将id为B的元素追加到id为A的元素后面，也就是将B元素移动到A元素的后面 结果：p id=A明日图书p id=B编程词典/p /p prepend(content) 为所有匹配的元素的内部前置内容 p id=B编程词典/p $(#B).prepend(pA/p); //向id为B的元素内容前添加一个段落 结果：p id=BpA/p编程词典/p prependTo(content) 将所有匹配元素前置到另一个元素的元素集合中 p id=A明日图书/p p id=B编程词典/p $(#B).prependTo(#A); //将id为B的元素添加到id为A的元素前面，也就是将B元素移动到A元素的前面 结果：p id=Ap id=B编程词典/p明日图书/p append()方法与prepend()方法类似，所不同的是prepend()方法将添加的内容插入到原有内容的前面。 appendTo()实际上是颠倒了append()方法，例如下面这句代码： $(pA/p).appendTo(#B); //将指定内容添加到id为B的元素中 等同于： $(“#B”).append(“pA/p”); //将指定内容添加 到id为B的元素中 不过，append()方法并不能移动页面上的元素，而appendTo()方法是可以的，例如下面的代码： $(#B).appendTo(#A); //移动B元素到A元素的后面 append()方法是无法实现该功能的，注意两者的区别。 说明：prepend()方法是向所有匹配元素内部的开始处插入内容的最佳方法。prepend()方法与prependTo()的区别同append()方法与appendTo()方法的区别。 【例4-4】 向div元素插入节点 （1）创建一个名称为index.html的文件，在该文件的head标记中应用下面的语句引入jQuery库。 script type=text/javascript src=../js/jquery-1.11.1.min.js/script （2）在页面的body标记中，添加一个空的div元素，代码如下： div/div （3）在引入jQuery库的代码下方编写jQuery代码，创建2个p节点，分别使用append()和appendTo()方法将这2个p节点插入到div元素中具体代码如下： $(document).ready(function(){ var $p_1 = $(p明日图书/p); // 创建第1个p元素 var $p_2 = $(p编程词典/p); // 创建第2个p元素，文本为空 $div = $(div); // 获取div元素对象 $div.append($p_1); // 将第1个p元素添加到div中 $p_2.appendTo($div);