jQuery开发之DOM操作一

来源:互联网 发布:内存卡如何恢复数据 编辑:程序博客网 时间:2024/06/05 07:40

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>元素节点属性titlealert(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);
0 0
原创粉丝点击