jQuery基础教程之DOM操作-节点操作函数（一）

jQuery基础教程之DOM操作-节点操作函数（一）

发表于 2011 年 01 月 20 日 由 梦三秋

jQuery作为Javascript的一个强大的库，其对DOM对象的操作之简化，让开发人员甚至于小白们都为之赞叹不已。
接着上一个系列的jQuery选择器的教程，接下来教大家的是jQuery中的DOM操作。为了方便大家更加容易对jQuery中的各种操作DOM对象的函数进行理解。今天我花了一天的时间自己构建了一个模仿W3C School的在线测试工具，梦三秋在线测试工具1.0版，感兴趣的可以试试。

关于jQuery DOM操作，我会分为几篇文章来介绍，尽量写细一点，让例子更加丰富点。今天先来说说jQuery关于DOM节点的一些操作函数的用法。
创建一个简单的页面，代码如下：（body之间的内容）

view source

print ?

1	<H3>您目前最关注的技术是什么</H3>

2

<UL>

3	<LI title=PHP>PHP</LI>

4	<LI title=jQuery>jQuery</LI>

5	<LI title=CSS>CSS</LI>

6

</UL>

1. 首先来看看如何查找元素节点的：
   jquery代码：
   view source

   print ?

   1	var $li = $("ul li");//获取<ul>中的所有的li节点

   2	var $li2 = $("ul li:eq(1)");//获取<ul>中的第二个<li>节点

   3	var $li_2 = $li.eq(1);//同样也获取到<ul>中的第二个<li>节点

   4	alert($li2.text());//打印出jQuery

   5	alert($li_2.text());//同样打印出jQuery

   6	alert($li.text());//会打印出PHPjQueryCSS

   7	alert($li.html());//会打印出PHP

   

   注意:text函数是取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。

2. 利用元素属性来查找节点：
   Jquery代码：
   view source

   print ?

   1	var $li_title_jQuery = $("li[title=jQuery]");//获取title属性为‘jQuery’的<li>元素

   2	$li_title_jQuery.css("color","#FF0000");//将title属性为‘jQuery’的<li>元素的字体颜色设置为红色

   3	var $li_last = $("ul li:last");//获取<ul>中的最后一个<li>元素

   4	var li_last_title = $li_last.attr("title");//获取<ul>中的最后一个<li>元素的title属性

   5	alert(li_last_title);

   
3. 创建节点：
   $(html)方法会根据传入的HTML标记字符串，首先创建一个DOM对象，并将这个DOM对象包装成jQuery对象后返回。也就是说$(html)方法返回的始终是个jQuery对象。
   记住必须要正确地传入HTML标记字符串，不然返回的对象虽然是jQuery对象，但是可以说是空jQuery对象（因为这个jQuery对象的length属性为0，所以我就认为它是空的对象，不一定准确，但是我是这么理解的 ^_^ ）
   不相信你们可以试试：
   Jquery代码：
   view source

   print ?

   1	alert($("这是个不正确的参数").length);//会打印出0

   2	alert($("<SPAN>这是个正确的HTML标记字符串</SPAN>").length);//会打印出1

   3	alert($("<SPAN>这是个正确的HTML标记字符串</SPAN><SPAN>第二个span</SPAN>").length);//会打印出2

   4

   alert($("

   5	<DIV><SPAN>这是个正确的HTML标记字符串</SPAN><SPAN>第二个span</SPAN></DIV>

   6

   7	").length);//会打印出1

   

   现在我们再来细细地看看$(html)生成各种节点的样子，通过jquery的append方法，将$(html)生成的节点插入到DOM中去，你就可以清晰地看明白了。
   jQuery代码：

   view source

   print ?

   1	var $li = $("<li>$lt;/li>");//为了兼容各大浏览器，请一定要用组合关闭标签

   2	var $input = $("<input />");//像input这样的元素，要写正规了<input />自关闭

   3	$("ul").append($li);//将新建的li节点插入到ul中去

   4	$li.append($input);//将新建的input节点插入到新建的li中去

   5	$li2 = $("<li title='jQuery插件'>jQuery插件</li>");//创建一个完整的元素

   6	$("ul").append($li2);//将新建的完整的li元素添加到ul元素中去

   

额~~一下子都写了这么多内容了呢~~为了让大家看得更舒服点，jQuery节点操作函数的教程就分成两篇文章吧~敬请期待！