`
zhangyaochun
  • 浏览: 2608682 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

jquery基础篇--文档操作

阅读更多

包裹节点相关

 

     -------- 对文档中插入额外的结构化标记有用,不会破坏原始文档的语义。

 

 

1、wrap()

 

$(selector).wrap(wrapper);

 

参数wrapper

 

      把所有匹配的元素其他元素的结构化标记包裹起来

  • 必需,规定包裹被选元素的内容。
  • 可能的值:
  1. HTML 代码
<p>测试文本</p>

执行:
 
$('p').wrap('<div class="wrap"></div>');
 
结果:

<div class="wrap"><p>测试文本</p></div>
 

     2. 其他的元素(已经存在的和新创建的)
执行:
 
$('p').wrap('document.getElementById('wrap')');
 
结果:

<div id="wrap"><p>测试文本</p></div>

     

2、unwrap()

 

 

     这个方法将移出元素的父元素。这能快速取消.wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。

 

 

3、wrapAll()

 

    将所有匹配的元素用单个元素包裹起来。

 

 

<p>测试数据1</p><p>测试数据2</p><p>测试数据3</p>

 

 

  • 参数是html
执行:
 
$('p').wrapAll('<div class="wrap"></div>');
 
结果:

<div class="wrap"><p>测试数据1</p><p>测试数据2</p><p>测试数据3</p></div>

 

 

 

 

4、wrapInner()

 

     ----- 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

 

  测试用例:

 

  将所有段落的每一个子内容加粗。

 

 

<p>测试文本1</p><p>测试文本2</p><p>测试文本3</p>
 

 

 

执行:
 
$('p').wrapInner('<b></b>');
 
结果:

<p><b>测试文本1</b><b>测试文本2</b><b>测试文本3</b></p>

 

 

 

分享到:
评论

相关推荐

    jquery-1.11.0+jquery-UI-1.10.4

    本篇将深入探讨jQuery 1.11.0与jQuery UI 1.10.4这两个版本的功能、特性以及它们在实际项目中的应用。 首先,jQuery 1.11.0是jQuery库的一个稳定版本,它在1.10.x的基础上进行了优化和修复,确保了更好的浏览器兼容...

    jquery-ui-1.8.13

    本篇文章将围绕“jquery-ui-1.8.13”这一特定版本,探讨其核心特性、使用方法以及如何通过源代码学习和应用。 1. **jQuery UI 的基本构成** jQuery UI 主要由以下几部分组成: - **Widgets(组件)**:如 Dialog...

    jquery 1.7---1.11 chm文档

    一、jQuery基础 jQuery的核心是选择器,它借鉴了CSS的语法,使得选取DOM元素变得极其简单。例如,`$("#myID")`用于选取ID为"myID"的元素,`$(".myClass")`则选取所有class为"myClass"的元素。此外,jQuery还提供了...

    jquery-ui-1.8.20.custom.zip

    jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面库,它提供了多种组件、效果、主题和文档,旨在简化网页开发中的交互元素设计。本篇文章将深入探讨 "jquery-ui-1.8.20.custom.zip" 压缩包中的内容,以及...

    jquery-1.2.6-vsdoc

    本篇将聚焦于jQuery 1.2.6版本的VSDOC中文版,深入探讨其核心特性、函数以及在实际开发中的应用。 一、jQuery简介 jQuery是由John Resig在2006年创建的,它的目标是简化HTML文档遍历、事件处理、动画和Ajax交互。...

    JQuery移动层---简单型

    本篇文章将深入探讨如何创建一个简单的 jQuery Mobile 应用,以及在实际开发中的基本使用方法。 首先,让我们理解 jQuery Mobile 的核心概念。jQuery Mobile 基于页面架构,而不是传统的单一页面应用。这意味着,...

    jquery-ui-1.11.4

    在本篇文章中,我们将深入探讨jQuery UI 1.11.4版本,以及它如何帮助开发者构建出高效且美观的用户界面。 一、jQuery UI 1.11.4概述 jQuery UI 1.11.4是这个库的一个稳定版本,发布于2015年,它包含了丰富的组件和...

    jquery-ui-1.8.10.custom含vsdoc.rar

    在Web开发领域,jQuery UI是一个广泛使用的JavaScript库,它扩展了基础的jQuery功能,提供了丰富的用户界面组件,如日期选择器、对话框、拖放操作等。在本篇文章中,我们将深入探讨jQuery UI 1.8.10自定义版本,并...

    jquery-1.3.1-vsdoc.rar

    五、jQuery基础操作 - 选择器:jQuery支持CSS1至CSS3的选择器,如$("#id")选取ID为id的元素,$(".class")选取所有class为class的元素。 - DOM操作:如$(selector).html()用于设置或获取元素的HTML内容,$(selector)...

    jquery-1.2-UnCompressed

    本篇将深入探讨jQuery 1.2未压缩版本,揭示其内部机制,帮助开发者更好地理解和利用这个经典版本。 1. **jQuery介绍** jQuery是由John Resig在2006年创建的一个开源JavaScript库,旨在简化DOM操作、事件处理、动画...

    jquery-drop-down-menu.zip

    本篇将详细探讨如何使用jQuery库来实现功能丰富的下拉菜单,以及其背后的原理和技术要点。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在创建下拉菜单时,jQuery的...

    jquery-1.4.1-vsdoc.js

    本篇文章将围绕"jquery-1.4.1-vsdoc.js"这一文件展开,探讨jQuery 1.4.1版本的VSDOC(Visual Studio Documentation)内容,帮助开发者更好地理解和运用这一强大的工具。 "jquery-1.4.1-vsdoc.js"是一个专门用于...

    jquery.uploadify-v2.1.4

    本篇文章将深入探讨Uploadify的使用方法、核心功能和常见配置,帮助你更好地理解和应用这个工具。 ### 1. **基本使用** Uploadify的安装并不复杂,主要包括两个步骤:引入jQuery和Uploadify的JavaScript及CSS文件...

    前端开源库-jquery-widget-compiler.zip

    本篇文章将深入探讨“前端开源库-jquery-widget-compiler”,解析其核心概念、工作原理以及实际应用。 一、jQuery Widget Factory概述 jQuery Widget Factory是jQuery UI项目的一部分,它提供了一种结构化的方法来...

    jquery-1.5.1-vsdoc

    本篇将聚焦于jQuery 1.5.1版本,特别是针对ASP.NET开发环境的使用。`jquery-1.5.1-vsdoc`是一个专门为Visual Studio设计的文档文件,它提供了详细的API注释,便于开发者在VS环境下进行代码智能提示和调试。 jQuery ...

    jquery-manager-master.rar

    本篇文章将深入探讨 "jquery-manager-master" 的源码,帮助开发者更好地理解和运用 jQuery 的管理机制。 一、jQuery 的核心理念 jQuery 的设计目标是“Write Less, Do More”,其通过简洁的 API 设计,让开发者...

    jquery-ui-1.8.7 js

    在本篇文章中,我们将深入探讨 jQuery UI 1.8.7 版本,并结合其核心文件 `jquery-1.4.4.min.js` 和 `jquery-ui-1.8.7.custom.min.js`,揭示其背后的原理和应用场景。 首先,我们来理解 jQuery UI 的基础——jQuery...

    jquery-tab-menu_02

    一、jQuery基础 jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在"jquery-tab-menu_02"这个示例中,jQuery被用来处理Tab菜单的点击事件和内容切换。 二、Tab菜单结构 1....

    JQUERY的API中文文档

    这篇文档将深入探讨jQuery的核心功能及API用法,帮助你更好地理解和运用这个强大的工具。 1. **选择器(Selectors)** jQuery的选择器基于CSS,允许你快速准确地选取页面中的元素。例如,`$("#id")`用于选取ID为...

    jquery-easyui-1.3.6.zip

    2. `jquery.min.js`:这是jQuery库的最小化版本,它是jQuery EasyUI的基础,提供了事件处理、DOM操作、Ajax等功能,使得开发者可以方便地操控HTML元素。 3. `easyloader.js`:EasyLoader是jQuery EasyUI的加载器,...

Global site tag (gtag.js) - Google Analytics