每天学点jQuery(五)

最近忙着各种考试、各种复习，各种上课。。。。后来腾出时间来了还手懒了很多。。。就是说干IT这行的要是手懒那真做不好，总归这么久没写，都是因为我手懒了的原因。。。好吧，现在归于平静，继续学习吧O(∩_∩)O哈哈~

从上面的那几篇文章中，如果你有一定的js基础的话，那掌握是没问题的，而且还可以做出四种的那个小的特效。因为前面用到了蛮多用jQuery操作DOM，那这一篇就来讲下怎么用jQuery操作DOM。

1，首先是最基本的类似于js中的getElementById来获取元素：

<div id="div1">this is a div</div>

$(document).ready(function() {
	var text = $("#div1");
	alert( text.html() );
});

其中text.html()这个方法和js中的innerHTML是一样的。

另外一种获取文本的方法是：.text()

这些是最基本的jQuery提供的一些方法，那么当你使用的时候如果你不熟悉的话最好是多查查手册，因为有些东西没必要说出来，这个就靠你的自学能力了。

2，通过下面的这个实例实现来演示元素的查找、创建、删除、添加：

<ul>
	<li title="苹果">苹果</li>
    <li title="橘子">橘子</li>
    <li title="香蕉">香蕉</li>
    <li title="梨子">梨子</li>
</ul>

（1）查找节点

function searchNode() {
	var oLi = $("ul li:eq(1)");			//筛选节点（下标从0开始）
	var li_text = oLi.text();			//获取节点文本
	var li_title = oLi.attr("title");	//获取节点属性（指定为title属性）
	alert( li_text );
	alert( li_title );
}
searchNode();

因为jQuery中的选择器是支持层级查找的，那$("ul li")的意思就是找到ul下面的所有的li节点，而li:eq(idx)就是表示在所有的li中找第几个li，那所有的Li的下标识从0开始的。

（2）创建节点

function createNode() {
	var oLi1 = $( '<li title="蜜瓜">蜜瓜</li>' );		//创建节点（带属性和文本）
	var oLi2 = $( '<li title="番茄">番茄</li>' );
	var oLi3 = $( '<li title="梨子">梨子</li>' );
	$("ul").append(oLi1).append(oLi2).append(oLi3);		//添加节点
}
createNode();

查找节点你要是理解的话，那么创建节点就很简单了，只不过方法就变成了append()

（3）删除节点

function deleteNode() {
	var oLi = $("ul li:eq(1)");		
	var oDelLi = oLi.remove();		//返回被删除节点的引用
	$("ul").append( oDelLi );		//再将其插入，可以实现换位操作
	//$("ul").empty();				//清空节点
}
deleteNode();

那么通过上面的这些就掌握了基本的DOM操作，那需要说明的就是：当通过$('')这种方式创建和.remove()的时候返回的都是当前操作节点的对象，这样就可以解释为什么可以这么写：$("ul").append(oLi1).append(oLi2).append(oLi3);同时也可以说明为什么上面删除节点的时候将返回的值再通过append()来添加的时候可以将删掉的元素添加到ul的尾部，就是因为返回的是操作节点的对象。

那清空节点就容易多了，找到对象调用.empty()方法，那么就将当前节点下所有的子元素清除了，注意这里是清除子节点，当前操作节点其本身还是在页面中的。

（4）插入节点

那么对于节点的插入呢，其实通过实际情况的考虑就会发现其原理所在，首先你要向那个节点中插入一个什么样的节点，那就需要两个对象，一个被插入的节点和一个待插的节点。明白了这一点，那下面的代码就清晰多了

我们的html代码如下：

<p>这是开始=========<font id="insertT">这是测试添加节点：</font>========这是结束</p>

这是插入函数：

function insertNode() {
	var oP = $("#insertT");			//目标节点
	var oB = $("<b>这是插入的节点</b>");	//待插节点
	//在之前插入
	oP.before( oB );
	在之后插入
	//oP.after( oB );;
}
insertNode();

那你也可以想象的到了，插入的时候被查节点和待插节点其实是有顺序的，那么这里就是一个在之前插入，一个在之后插入。

3，最后呢就说下关于设置属性的一些基本操作：

关于设置元素样式的操作:
（1）可以用attr("class", "clasName")来设置元素的样式
（2）可以通过addClass("className")来添加样式
（3）可以通过removeClass("className")来删除元素的样式
（4）可以通过hasClass("className")来确认元素是否具有某一样式
最后对于attr和addClass的比较：
attr是设置元素的样式，当元素原本存在样式的时候则替换掉原来的样式
addClass是追加样式，当元素原本存在样式的时候则再给其追加一个样式
二者对于原本不存在样式的元素都是执行设置元素样式的动作

好，这一篇就写这么，DOM操作还有一些东西需要说的，那还是留在下一篇来写吧。。。

每天说一句：这个月是怀念黄家驹的月份，如果你跟我一样的喜欢他，喜欢Beyond那请你祝福他在那边过的好吧，O(∩_∩)O谢谢！