每天学点jQuery(五)
来源:互联网 发布:出版人周筠 知乎 编辑:程序博客网 时间:2024/05/12 03:23
最近忙着各种考试、各种复习,各种上课。。。。后来腾出时间来了还手懒了很多。。。就是说干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谢谢!
- 每天学点jQuery(五)
- 每天学点Linux:五
- 每天学点jQuery(六)
- 每天学点jQuery(一)
- 每天学点jQuery(二)
- 每天学点jQuery(三)
- 每天学点jQuery(四)
- 每天学点JQuery(1)—选择器
- 每天学点JQuery(3)—事件
- 每天学点JQuery(4)—动画
- 【每天学点redis】Redis的五种结构类型
- 每天学点JQuery(2)—DOM操作
- 每天学点C++
- 每天学点知识
- 每天学点Linux
- 每天学点C++(二)
- 每天学点Linux:一
- 每天学点Linux:二
- 设计(22) 人体关节肿胀度测试设计
- ext4.js tree从服务器加载数据
- Android中显示网络图片
- 使用google-perftools优化nginx在高并发时的性能
- 设计(23) 二元函数3维图形软件设计
- 每天学点jQuery(五)
- LISP中的基础知识
- C#命令模式实例代码
- 设计(24) 框图编辑器设计
- 异常:java.lang.LinkageError: loader constraint violation: when resolving interface method "javax.servl
- 适配器模式实例(C#)
- 设计(25) 《DESARGUES定理》软件
- Spring 注解学习手札(一) 构建简单Web应用
- [3D基础]理解计算机3D图形学中的坐标系变换