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

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

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

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代码：

   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代码：

   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代码：

   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代码：

   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节点操作函数的教程就分成两篇文章吧~敬请期待！