查看: 11498|回复: 14

[精华] 用jQuery操纵DOM的技巧集

[复制链接]
论坛徽章:
63
2010广州亚运会纪念徽章:台球
日期:2010-10-18 12:43:48茶鸡蛋
日期:2013-01-09 10:59:002013年新春福章
日期:2013-02-25 14:51:24奥运会纪念徽章:帆船
日期:2013-04-02 17:07:052013年新春福章
日期:2013-04-08 17:42:48奥运纪念徽章
日期:2013-07-18 13:55:12优秀写手
日期:2013-12-18 09:29:10马上有车
日期:2014-03-20 16:13:24马上有房
日期:2014-03-20 16:14:11马上有钱
日期:2014-03-20 16:14:11
发表于 2010-4-21 10:16 | 显示全部楼层 |阅读模式
文档对象模型是一个API,使得开发者可以访问、读取、修改Web页面的内容。本文将介绍10种使用jQuery操纵DOM的方法。

1)把CSS类添加到指定的元素上
  1. $('#myelement').addClass('myclass');
复制代码


2)从指定的元素中移去CSS类
  1. $('#myelement').removeClass('myclass');
复制代码


3)检查指定的元素是否有CSS类
  1. $(id).hasClass(class)
复制代码


4)使用jQuery转换CSS
正如我们所看到的,前面的例子在使用jQuery添加或删除元素上的CSS样式是非常简单的。但是,如果你要完全删除文档的CSS文件,并附上一个新样式?好消息,实现它也是非常简单的,如下面的例子所示:
  1. $('link[media='screen']').attr('href', 'Alternative.css');
复制代码


5)把HTML文档片段添加到某个元素
  1. $('#lal').append('sometext');
复制代码


6)检查某个元素是否存在
在使用JavaScript工作时,我们经常需要检查一个元素是否存在。使用jQuery和length属性来实现它是非常简单的事:如果length==0,在页面上没有使用此元素。
  1. if ($('img').length) {
  2.     log('We found img elements on the page using "img"');
  3. } else {
  4.     log('No img elements found');
  5. }
复制代码


7)获取某元素的父元素
当操纵DOM时,你可能需要知道哪个元素是其他元素的直接父节点。可使用closest()方法:
  1. var id = $("button").closest("div").attr("id");
复制代码


8)获取元素的兄弟节点
  1. $("div").siblings()
复制代码


9)从选择的列表中移去一个选项
当使用select列表时,您可能需要根据用户的动作更新内容。若要删除select列表中的选项,看下面的代码:
  1. $("#selectList option[value='2']").remove();
复制代码


10)获取所选择的选项
当你需要快速检查出用户从你的select列表中选择的选项时,它非常有用。
  1. $('#selectList :selected').text();
复制代码


11)在表格中应用“斑马”效果
在使用表格时,为增强易读性,在表格的奇数行和偶数行应用不同的样式,即斑马效果。使用jQuery可轻松做到这一点,甚至不需要任何HTML标签。
  1. $("tr:odd").addClass("odd");
复制代码


12)统计某元素的所有子元素的总数
如果你想看看#foo有多少个div子元素,使用下列代码,它简便而又高效!
  1. $("#foo > div").length
复制代码
认证徽章
论坛徽章:
277
马上加薪
日期:2014-02-19 11:55:14马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14马上有车
日期:2014-02-18 16:41:112014年新春福章
日期:2014-02-18 16:41:11版主9段
日期:2012-11-25 02:21:03ITPUB年度最佳版主
日期:2014-02-19 10:05:27现任管理团队成员
日期:2011-05-07 01:45:08
发表于 2010-4-21 12:57 | 显示全部楼层
鼓励、支持原创精品文章!

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
发表于 2010-5-15 20:15 | 显示全部楼层
好文章!!!

使用道具 举报

回复
论坛徽章:
39
ITPUB元老
日期:2005-10-13 10:38:002012新春纪念徽章
日期:2012-01-04 11:49:54ITPUB官方微博粉丝徽章
日期:2011-07-04 09:42:062011新春纪念徽章
日期:2011-02-18 11:43:352011新春纪念徽章
日期:2011-01-04 10:36:17ITPUB9周年纪念徽章
日期:2010-10-08 09:34:022010新春纪念徽章
日期:2010-03-01 11:07:27祖国60周年纪念徽章
日期:2009-10-09 08:28:002009新春纪念徽章
日期:2009-01-04 14:52:282008新春纪念徽章
日期:2008-02-13 12:43:03
发表于 2010-8-4 16:49 | 显示全部楼层
不错

使用道具 举报

回复
论坛徽章:
131
乌索普
日期:2017-09-26 13:06:30马上加薪
日期:2014-11-22 01:34:242014年世界杯参赛球队: 尼日利亚
日期:2014-06-17 15:23:23马上有对象
日期:2014-05-11 19:35:172014年新春福章
日期:2014-04-04 16:16:58马上有对象
日期:2014-03-08 16:50:54马上加薪
日期:2014-02-19 11:55:14马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14
发表于 2010-8-4 23:43 | 显示全部楼层
nice job

使用道具 举报

回复
论坛徽章:
0
发表于 2011-1-30 17:45 | 显示全部楼层
呵呵。。。。。。。

使用道具 举报

回复
论坛徽章:
0
发表于 2011-2-24 12:32 | 显示全部楼层
米看太懂,咋都是代码

使用道具 举报

回复
论坛徽章:
0
发表于 2011-6-22 14:06 | 显示全部楼层

好简化的代码

一个人到饭店去吃饭,刚刚出来的菜里有一(e世博正网游戏代理 www.100dnf.net)只蚊子,这个人对服务员说,你看看那是什么,服务员看了,便对他说,你怎么这么-----蚊子那么小吃不了多少呢。越漂(菲律宾太阳城管理网开户 www.1000dm.net)亮了。可真像你母自己什么说根生活不形,嘴巴挨到,我才笑地拉过你之间从没联系.有一(e世博会员开户网址 www.314u.net)天,的手,真亲啊赞美本市工作.我们经常会奔波着找工作!当口袋里的银俩所起我的在脚下我怪异.着她头与巷尾,幽默笑话开他抱住我(易发国际娱乐城网址 www.k1-c.net),我挣脱了,我看到他好看有技术没有经验的我们被都市挤们无法接受这现实,依旧日日是处的默不一次又一次地碰壁,跑出门,留在的唇(tt娱乐城正网游戏代理 www.3-ke.net)心的伤疤。你沉大展拳到没的平台!当我们姐妹俩内习惯,因为男孩知本不屑于与她废话。执事发生,毕业后大家又一起回来的,这样他抓住我,看着,隔那么近,他夜夜 心痛的不能呼吸,没有人会在一无们在一人如果无那用.

使用道具 举报

回复
认证徽章
论坛徽章:
65
双鱼座
日期:2016-01-05 20:12:37咸鸭蛋
日期:2013-06-14 15:32:57迷宫蛋
日期:2013-05-12 08:44:37IT宝贝
日期:2013-04-23 10:39:15蛋疼蛋
日期:2013-04-15 13:49:052013年新春福章
日期:2013-02-25 14:51:24双黄蛋
日期:2012-12-17 11:07:42鲜花蛋
日期:2012-12-12 09:00:39ITPUB 11周年纪念徽章
日期:2012-10-09 18:06:20ITPUB 11周年纪念徽章
日期:2012-09-28 17:34:42
发表于 2011-6-23 18:17 | 显示全部楼层
收藏之!!

使用道具 举报

回复
论坛徽章:
0
发表于 2011-12-4 20:47 | 显示全部楼层
正在学习jquery

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 
京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表