jQuery开发之DOM操作一

1，查找节点
1)，查找元素节点
获取元素节点并打印出它的文本内容，jQuery代码如下：

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

2)，查找属性节点

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

2, 创建节点

(1)创建元素节点
例如需要创建两个<li> 元素节点，并且要把它们作为<ul> 元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤
a, 创建两个<li> 新元素。
b, 将这两个新元素插入文档中。
第a 步骤可以使用jQuery的工厂函数$() 来完成，格式如下：

$(html);

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象返回。
首先创建两个<li> 元素，jQuery代码如下：

var $li_1 = $("<li></li>");   //创建第一个<li>元素
var $li_2 = $("<li></li>");   //创建第二个<li>元素

接下来执行第二个步骤，jQuery代码如下：

$("ul").append($li_1);
$("ul").append($li_2);

(2)创建文本节点

var $li_1 = $("<li>苹果</li>");   //创建第一个<li>元素，包含元素节点、文本节点和属性节点
var $li_2 = $("<li>草莓</li>");   //创建第二个<li>元素，包含元素节点、文本节点和属性节点

$("ul").append($li_1);
$("ul").append($li_2);

(3)创建属性节点

var $li_1 = $("<li title =‘苹果‘>苹果</li>");   //创建第一个<li>元素，包含元素节点和文本节点
var $li_2 = $("<li title =‘草莓‘>草莓</li>");   //创建第二个<li>元素，包含元素节点和文本节点

$("ul").append($li_1);
$("ul").append($li_2);