最近忙着各种考试、各种复习,各种上课。。。。后来腾出时间来了还手懒了很多。。。就是说干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谢谢!