`

jquery dom 遍历

 
阅读更多
1. 交替为表格行添加样式
  $(document).ready(function() {
    $('tr:odd').addClass('odd'); /** odd is one class in css **/
    $('tr:even').addClass('even');
    /** The code can be rewrote as $('tr').filter(':odd').addClass('odd');
});

2. 为标题行添加样式
  $(document).ready(function() {
    $('tr').parent().addClass('table-heading');
    $('tr:not([th]):even').addClass('even');
    $('tr:not([th]):odd').addClass('odd');
    $('td:contains("Herry")').addClass('highlight');
});

3. 为单元格添加样式
  $(document).ready(function() {
    /** next()方法只是取最接近的下一个同辈元素。**/
    $('td:contains("Herry")').next().addClass('highlight');
    /** 取得包含Herry的单元格,然后取得该单元格的所有同辈元素**/
    $('td:contains("Herry")').siblings().addClass('highlight');
    /**取得包含Herry的单元格,再取得他的父元素,然后找到该元素中包含的所有编号大于0的单元格(0是第一单元格)**/
    $('td:contains("Herry")').parent().find('td:gt(0)').addClass('highlight');
   /** 取得包含Herry的单元格,再取得它的父元素,找到该元素中包含的所有单元格,然后再过滤这些单元格排除包含Herry的那个**/    $('td:contains("Herry")').parent().find('td').not(':contains("Herry")').addClass('highlight');
/**取得包含Herry的单元格,再取得它的父元素,找到该元素中所包含的子元素的第二个单元格,取消最后一次find(),再查找该元素包含的子元素中的第三个单元格 **/
$('td:contains("Herry")').parent().find('td:eq(1)').addClass('highlight').end().find('td:eq(2)').addClass('highlight');

});

4. 访问DOM元素

var myTag = $('#my-id').get(0).tagName;
   
分享到:
评论

相关推荐

    dom遍历所有xml节点,并且重新生成xml

    在本主题“DOM遍历所有XML节点,并且重新生成XML”中,我们将深入探讨如何利用DOM API遍历XML文档的所有节点,并根据需求重新构建XML文档。 首先,让我们了解XML的基本结构。XML(eXtensible Markup Language)是一...

    jQuery 1.5 遍历xml节点属性

    总之,jQuery 1.5通过其强大的API简化了XML节点属性的遍历,使开发者能够更加专注于应用逻辑,而不是底层的DOM操作。通过结合"test.html"和"jquery-1.5.js",我们可以创建一个直观的实例来演示这一功能。

    jQuery 遍历 – 后代

    通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代。 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() find() jQuery children() 方法 children() 方法返回被选元素的所有直接子...

    使用递归和dom遍历dom树形结构

    ### 使用递归与DOM遍历DOM树形结构 在现代Web开发中,处理XML文档是一项常见任务。DOM(Document Object Model)是一种广泛采用的技术,用于表示XML或HTML文档的结构,使得开发者能够轻松地访问、修改文档中的元素...

    jquery 动态遍历select 赋值的实例

    本文主要讲解了如何使用jQuery动态地遍历select元素,并为其赋值。这是一项非常实用的技术,尤其在动态网站开发中,经常会遇到需要根据不同的数据动态更新下拉列表选项的情况。 知识点一:遍历和选择select元素中的...

    jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    在学习和使用jQuery时,掌握其提供的DOM遍历方法对于开发高质量的前端界面至关重要。jQuery提供了几种非常有用的函数,用于向上遍历DOM树:parents()、parent()和closest()。尽管它们都是为了遍历DOM而设计的,但...

    jquery 遍历 学习

    这个“jQuery遍历学习”的主题主要关注如何使用jQuery来高效地遍历DOM元素,以实现对网页内容的控制和操作。 首先,jQuery提供了多种遍历方法,包括基本的选择器和遍历函数。选择器如`$()`用于选取DOM元素,可以...

    JQuery DoM和ajax 操作

    jQuery提供了丰富的选择器、遍历和操作方法,使得DOM操作变得简单易行。 1. **选择器**: jQuery提供了多种CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element),以及组合选择器等,使我们能够快速...

    jquery遍历节点树

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理和Ajax交互等任务。当涉及到HTML文档中的节点遍历时,jQuery提供了一系列的方法来帮助开发者高效地处理和操作DOM结构,特别是对于构建...

    jQuery DOM节点操作源码

    3. **DOM遍历**:jQuery提供了多种方法用于遍历DOM树,如`parent()`, `children()`, `siblings()`, `next()`, `prev()`等,它们帮助我们找到元素的父级、子级、相邻兄弟元素等。 4. **元素操作**:`append()`, `...

    jQuery遍历DOM元素与节点方法详解

    本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考,具体如下: 一、向上遍历–祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤...

    jQuery循环遍历子节点并获取值的方法

    总的来说,jQuery提供的遍历和属性操作功能极大地简化了JavaScript中的DOM操作,使得开发者能够更加专注于业务逻辑而不是底层的DOM操作。理解并熟练运用这些技巧,能够提高开发效率,优化代码质量。对于jQuery遍历...

    Jquery测试题.pdf

    正确回答这些测试题需要对jQuery的选择器语法和DOM遍历有较深入的了解。对于实际编程场景,这些知识点是十分重要的,因为它们是操作DOM和实现动态网页交互的基础。在解决实际问题时,准确使用jQuery选择器可以提高...

    jQuery 遍历 – 祖先

    在jQuery库中,遍历DOM树是常见的操作,特别是当你需要查找或操作元素的祖先时。"祖先"在这个上下文中指的是元素的父级、父级的父级,以及更高级别的上级元素,直至文档的根节点`<html>`。jQuery提供了几个方便的...

    dom-traversal:轻量级DOM遍历库

    《深入理解轻量级DOM遍历库:dom-traversal》 在Web开发中,DOM(Document Object Model)遍历是必不可少的技术环节。DOM是HTML和XML文档的一种结构化表示,它允许程序和脚本动态更新、添加、删除和改变元素及属性...

    jQuery实现遍历XML节点和属性的方法示例

    需要注意的是,虽然jQuery提供了很多操作DOM的方法,但它本身并不支持直接获取节点的attributes属性集。因此,示例中使用了原生JavaScript的obj[0].attributes来访问节点的属性集合。通过这种方式,可以遍历节点的...

    jQuery 循环遍历改变a标签的href(实例讲解)

    标题中提到的是关于如何使用jQuery来循环遍历并改变页面上a标签的href属性值,这是一个在前端开发中常见的操作,用于动态地修改超链接的目标地址。 首先,让我们来了解一下什么是jQuery。jQuery是一个快速、小巧、...

    jquery dom对象 详细介绍1

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。jQuery的核心特性包括对JSON的支持、XML解析以及一套强大的选择器系统,使得开发者能够更加高效地选取和操作...

    jQuery 遍历map()方法详解

    .map(callback(index,domElement)) 三、详细说明 由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组 四、案例: <!DOCTYPE html> <html> <head> <meta charset=utf-...

Global site tag (gtag.js) - Google Analytics