`
KAXU
  • 浏览: 273428 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

jquery 控制 wrap(html)

HTMLjQuery 
阅读更多

wrap(html)

将‘html’的内容封装在匹配元素集合的每一个元素上。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").wrap("<div></div>");
  });
  </script>
  <style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

 

$("p").wrap("<div></div>");
将‘<div></div>’封装在匹配p元素集合的每一个p元素上。使匹配p元素外都有一个‘div’元素。

分享到：
| jquery 控制 insertBefore(content)
评论
发表评论

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

相关推荐

    用法jQuery中的wrap()函数操作HTML元素的教程_.docx

    总结来说，`wrap()`函数是jQuery中一个非常实用的功能，它允许开发人员在不改变原有DOM结构的情况下，灵活地对元素进行包装，从而实现复杂布局和样式控制。了解并熟练掌握`wrap()`函数的使用，能够极大地提升前端...

    轻松掌握jQuery中wrap()与unwrap()函数的用法

    最后，示例中还包含了一些HTML和jQuery代码，演示了wrap()和unwrap()函数如何在实际页面元素上产生效果。具体的代码展示了通过wrap()函数将段落元素包裹在具有特定ID的div元素中，然后使用unwrap()函数将之前添加的...

    jCarousel是一个jQuery插件用于控制水平或垂直顺序的项目清单

    wrap: 'circular' // 无限循环 }); }); &lt;/html&gt; ``` **资源文件解析** - `index.html`：可能包含一个使用jCarousel的示例网页。 - `Gruntfile.js`：Grunt任务配置文件，用于自动化构建过程，如编译、压缩等...

    jQuery 1.4.1 中文参考

    jQuery 是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在jQuery 1.4.1版本中，这个库提供了丰富的API，使得开发者能够更高效地编写JavaScript代码。 **核心功能** jQuery的核心...

    锋利的jquery第三章例子

    "6-元素包裹.html"则展示了如何使用`.wrap()`、`.wrapAll()`和`.wrapInner()`方法将元素包裹在其他HTML结构中，这在布局和样式调整中非常实用。 通过对这些文件的分析，我们可以看出jQuery的强大之处在于其简洁的...

    JQuery新版中文手册

    wrap(html|ele|fn) unwrap() wrapall(html|ele) wrapInner(html|ele|fn) 替换 replaceWith(content|fn) replaceAll(selector) 删除 empty() remove([expr]) detach([expr]) 复制 clone([Even[,deepEven]...

    jquery文档操作wrap()方法实例简述

    在jQuery众多功能中，文档操作是一个非常实用的方面，包括了元素的创建、插入、删除、包裹（wrap）等。其中，wrap()方法就是专门用于将选取的元素包裹在一个指定的结构中。 1. wrap()方法基本概念 wrap()方法属于...

    jquery包裹节点

    在jQuery库中，"包裹节点"（Wrap Nodes）是一个常用的操作，它允许开发者将一个或多个HTML元素包裹在一个新的DOM结构内，以便更好地控制页面布局、应用样式或者组织交互。这个功能提供了强大的灵活性，使我们可以...

    jquery-环形旋转

    3. jQuery控制：当用户触发事件（如点击按钮）时，使用`.show()`或`.hide()`方法控制列表的显示与隐藏，并通过修改`.rotate()`方法中的角度值来实现旋转效果。 ```javascript $(document).ready(function() { var ...

    jQuery两排图片滚动

    例如，可以使用`display: flex`和`flex-wrap: wrap`属性实现多行布局，同时调整图片的大小和间距以适应不同屏幕尺寸。 3. **jQuery选择器**：jQuery提供了丰富的选择器来选取DOM元素，例如`$("#id")`选取ID为指定值...

    jquery simplemodal模式对话框

    主要的CSS类包括：`#simplemodal-data`（对话框内容）、`.simplemodal-wrap`（对话框容器）、`.simplemodal-overlay`（遮罩层）等。 ### 六、总结 jQuery SimpleModal以其简单易用和高度可定制的特点，成为Web...

    jquery实现图片轮播器

    jQuery实现图片轮播器的关键知识点包括HTML结构搭建、CSS样式设计以及JavaScript逻辑控制。下面将详细介绍这三个方面。 一、HTML结构搭建 在实现图片轮播器的HTML部分，构建了一个包含图片列表和数字导航的框架。...

    JqueryApi中文手册

    - DOM元素转换：`.jQuery(obj)`, `.wrap(element)`, `.unwrap()` - 文本/HTML操作：`.text()`, `.html()` - 位置与尺寸：`.offset()`, `.position()`, `.width()`, `.height()` 10. **版本与兼容性** - jQuery ...

    前端项目-jQuery.dotdotdot.zip

    使用jQuery.dotdotdot插件时，你需要在HTML文件中引入jQuery库和jQuery.dotdotdot.js文件，然后通过jQuery选择器来初始化插件，设置相应的配置项。例如： ```html &lt;script src="path/to/jquery.js"&gt; ...

    jQuery详细教程

    演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数，隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide() 函数，隐藏所有 &lt;p&gt; 元素。 $(".test").hide() ...

    jquery实现模仿搜狐登录界面背景切换特效

    背景图片可以通过CSS的`background-image`属性设置，并使用`background-size`和`background-position`来控制图片的大小和位置。我们还需要为背景切换效果编写关键帧动画或者利用CSS过渡（transition）和变换...

    jquery中有哪些api jQuery主要API

    `jQuery.noConflict()`运行后，变量`$`的控制权会转交给第一个实现它的库。 在属性操作方面，`attr()`方法用于设置或返回被选元素的属性值，`removeAttr()`用于删除指定的属性。`prop()`方法从1.6版本开始引入，它...

    网页文字溢出显示省略号jQuery插件代码

    这样，你可以对网页上的任何文本元素进行控制，确保其适应各种屏幕尺寸和设备。 使用dotdotdot.js插件的步骤如下： 1. **引入jQuery库**：由于dotdotdot.js依赖jQuery，所以首先需要在HTML文档中引入jQuery库。你...

    jquery之checkbox操作(v1.0.0)

    在IT行业中，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本教程中，我们将深入探讨如何使用jQuery来操作checkbox元素，特别是动态生成、设置显示数量以及获取选中项...

    jquery选项卡滑动门文本自适应边界特效

    可以使用`.click()`事件监听选项卡的点击，使用`.slideUp()`和`.slideDown()`方法控制内容区域的隐藏与显示，实现滑动动画。 4. **文本适配**：当内容区域的文本长度变化时，使用jQuery动态计算并调整容器的大小，...

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