`

JQuery教程---DOM操作(三)

jQueryF#HTML 
阅读更多

1. ancestors ()　

    一依次以匹配结点的父节点的内容为对象,根节点除外

例：

<div>
　　<p>one</p>
　　<span>
　　    <u>two</u>
　　</span>
</div>

jQuery代码及功能：

function jq(){
　　var f=$("u").ancestors();
　　for(var i=0;i<$(f).size();i++){
　　　alert($(f).eq(i).html());}
}

 

第一个对象是以<u>的父节点的内容为对象，[ <u>two</u> ]

第一个对象是以<u>的父节点的父节点（div）的内容为对象，[<p>one</p><span><u>two</u></span> ]

一般一个文档还有<body>和<html>，依次类推下去。

2. ancestors (expr)　

在ancestors（）的基础上之取符合表达式的对象

如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象：

 <p>one</p><span><u>two</u></span>　

 

3. children()　返回匹配对象的子介点

例：

<p>one</p>
<div id="ch">
　　<span>two</span>
</div>

 

jQuery代码及功能：

function jq(){
　　alert($("#ch").children().html());
}

 

$("#ch").children()得到对象[ <span>two</span> ].所以.html()的结果是”two”

 

4. children(expr)

    返回匹配对象的子介点中符合表达式的节点

 

<div id="ch">
　　　<span>two</span>
　　　<span id="sp">three</span>
</div>

 jQuery代码及功能

function jq(){
　　alert($("#ch").children(“#sp”).html());
}

 

$("#ch").children()得到对象[<span>two</span><span id="sp">three</span> ].

$("#ch").children(“#sp”)过滤得到[<span id="sp">three</span> ]

parent ()　parent (expr)取匹配对象父节点的。参照children帮助理解

 

分享到：
| JQuery教程---DOM操作(二)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery教程-pdf

    ### jQuery教程知识点详解 #### 一、什么是jQuery jQuery是一种JavaScript脚本库，它与.NET类库的概念相似：提供了一系列工具方法或对象方法的封装，旨在简化开发者的使用过程。值得注意的是，虽然“库”与“框架...

    JQuery MX-9

    4. **DOM操作**：提供对HTML元素的简便操作，如选择、添加、删除、修改等，简化DOM操作流程。 5. **Ajax支持**：集成的Ajax功能使得异步数据交换更为简单，可快速构建动态交互的Web应用。 6. **自定义快捷键**：...

    jquery 精品教程 -- Learning JQuery

    - DOM操作详解 - 事件处理 - 动画效果 - **第三章：高级技巧** - AJAX应用 - 插件开发 - 性能优化 - **第四章：实战案例** - 实例1：动态表单验证 - 实例2：轮播图实现 - 实例3：异步数据加载 #### 七、...

    JQuery教程---入门

    **jQuery教程——入门** jQuery是一款广泛应用于Web开发的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。这个“jQuery教程——入门”将带你逐步走进jQuery的世界，了解其基本概念和...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。它的API设计易于理解和使用，使得开发者能够用更少的代码实现更多的功能，提高了开发效率。 2. **jQuery ...

    JQuery教程-从零开始学习jQuery

    4. **纠正错误的脚本知识**：许多开发者在使用原生JavaScript时可能存在一些错误的习惯，例如在页面加载时立即操作DOM。JQuery通过提供更好的API来避免这类问题的发生。 ##### HelloWorld JQuery 为了让大家快速...

    jquery-ui-1.10.4

    jQuery UI 1.10.4 版本在性能上进行了优化，减少不必要的DOM操作，提高页面响应速度。同时，它广泛支持各种浏览器，包括IE6+，确保在不同环境下都能良好运行。 五、实际应用场景 jQuery UI 在网页应用、后台管理...

    Web-前端教程24 jQuery DOM 实操.zip

    本教程聚焦于jQuery库在DOM操作中的应用，它为JavaScript开发者提供了更加简便和强大的工具，极大地提高了前端开发效率。 jQuery是一个轻量级、高性能的JavaScript库，其核心特性包括选择器、DOM操作、事件处理和...

    jquery-1.2-UnCompressed

    jQuery是由John Resig在2006年创建的一个开源JavaScript库，旨在简化DOM操作、事件处理、动画制作以及Ajax交互。jQuery 1.2是该库的一个里程碑版本，它在前代基础上进行了许多优化和增强，使得JavaScript开发更加...

    jQuery1.4.4.js、jQuery1.4.4-mini.js、最新的jQuery1.4.1中文帮助文档.chm

    jQuery是世界上最流行的JavaScript库之一，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在提供的压缩包中，我们找到了两个版本的jQuery1.4.4：一个是完整的版本（jQuery1.4.4.js），另一个...

    JQuery-latest-Chinese-document.rar_jquery_jquery-latest

    - **DOM操作**：包含元素创建、属性修改、内容插入和删除等操作的教程。 - **效果和动画**：介绍如何创建和控制动画，以及如何使用动画队列。 - **Ajax**：解释了$.ajax(), $.get(), $.post()等函数的用法，以及如何...

    jquery-1.11.3.js

    2. **DOM操作**：jQuery提供了一系列方法来操作DOM（文档对象模型）。比如，`append()`用于在元素内部追加内容，`remove()`用于移除元素，`html()`用于获取或设置元素的HTML内容。 3. **事件处理**：jQuery简化了...

    jquery资料--jquery学习资料

    3. **DOM操作（DOM Manipulation）**：jQuery提供了丰富的DOM操作方法，包括添加、删除和修改元素，如`$("div").append("&lt;p&gt;Hello&lt;/p&gt;")`在每个div后添加一个段落。 4. **事件处理（Events）**：jQuery统一了事件...

    最新JQuery类库 -- JQuery1.4

    - 在1.4版本中，jQuery团队对内部代码进行了重构，提高了DOM操作和选择器的执行速度。这使得开发者在处理大量元素时能够获得更快的响应时间。 2. **API改进**： - 引入了新的API方法，如`$.proxy()`，用于设置...

    jquery-confirm设置按钮显示中文

    在IT领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理以及动画制作。而jquery-confirm则是一个基于jQuery的插件，用于创建美观的弹窗提示，包括确认对话框、警告对话框和自定义对话框。...

    jquery-powered-html5-navigation-menu.zip

    jQuery是一个轻量级的JavaScript库，它的出现简化了JavaScript的DOM操作，提供了丰富的动画效果和事件处理。借助jQuery，我们可以用更少的代码实现更复杂的功能，提高开发效率。 在HTML5中，新增了一些语义化的标签...

    详细的jquery 教程

    这个详尽的jQuery教程涵盖了从基础到高级的所有关键概念，旨在帮助初学者快速上手并进一步提升专业技能。 ### 1. jQuery基础 - **选择器**: jQuery的核心功能之一是选择页面中的元素。它支持CSS选择器，如ID（#id...

    JQuery教程全集

    在《JQuery教程全集》的第一章中，作者首先阐述了为何选择 JQuery 这个 JavaScript 库。随着 Web 开发技术的发展，JavaScript 的使用变得越来越普遍。然而，在没有库或框架的支持下，编写复杂的 DOM 操作和 AJAX ...

    jQuery教程学习

    jQuery的出现使得JavaScript编程变得更加简洁高效，尤其在处理DOM操作时。本教程将带您逐步深入jQuery的世界，从基础到进阶，帮助您掌握这个强大的工具。 **第一章：基础篇 - 对象的获取** 1. **jQuery速成 - 向...

    jQueryAPI-100214

    jQuery，作为一个广泛使用的JavaScript库，极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。`jQuery API-100214`可能是针对这个库的一个特定版本或者一个教程集合，它深入讲解了jQuery的核心特性。让我们...

Magicbox
Global site tag (gtag.js) - Google Analytics