jQuery之文档处理

最新推荐文章于 2024-08-09 18:46:14 发布
最新推荐文章于 2024-08-09 18:46:14 发布
阅读量65 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/WWWrs/p/6858168.html
版权

jQuery

文档处理

1)内部插入
2）外部插入
3）包裹
4）替换
5）删除
6）复制

1.内部插入

append(content|fn)

向每个匹配的元素内部追加内容。

向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]

appendTo(content)

把所有匹配的元素追加到另一个指定的元素元素集合中。

新建段落追加div中并加上一个class
HTML 代码:
<div></div><div></div>
jQuery 代码:
    $("<p/>")
    .appendTo("div")
    .addClass("test")
    .end()
    .addClass("test2");
结果:
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

prepend(content)

向每个匹配的元素内部前置内容

向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <p><b>Hello</b>I would like to say: </p> ]

将一个DOM元素前置入所有段落
HTML 代码:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jQuery 代码:
$("p").prepend( $(".foo")[0] );
结果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>

向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").prepend( $("b") );
结果:
<p><b>Hello</b>I would like to say: </p>

prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。

把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>

2.外部插入

after(content|fn)

在每个匹配的元素之后插入内容。

在所有段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>

在所有段落之后插入一个DOM元素。
HTML 代码:
<b id="foo">Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("#foo")[0] );
结果:
<p>I would like to say: </p><b id="foo">Hello</b>

在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<b>Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("b") );
结果:
<p>I would like to say: </p><b>Hello</b>

before(content|fn)

在每个匹配的元素之前插入内容。

在所有段落之前插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
结果:
[ <b>Hello</b><p>I would like to say: </p> ]

在所有段落之前插入一个元素。
HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
jQuery 代码:
$("p").before( $("#foo")[0] );
结果:
<b id="foo">Hello</b><p>I would like to say: </p>

在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").before( $("b") );
结果:
<b>Hello</b><p>I would like to say: </p>

insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter("#foo");
结果:
<div id="foo">Hello</div><p>I would like to say: </p>

insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。
HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore("#foo");
结果:
<p>I would like to say: </p><div id="foo">Hello</div>

包裹

wrap(html|element|fn)

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

用原先div的内容作为新div的class，并将每一个元素包裹起来
HTML 代码:
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
jQuery 代码:
$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});
结果:
<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

unwrap()

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

用ID是"content"的div将每一个段落包裹起来
HTML 代码:
<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>
jQuery 代码:
 $("p").unwrap()
结果:
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

wrapAll(html|ele)

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

html描述:
用一个生成的div将所有段落包裹起来
jQuery 代码:
$("p").wrapAll("<div></div>");

elem描述:
用一个生成的div将所有段落包裹起来
jQuery 代码:
$("p").wrapAll(document.createElement("div"));

wrapInner(htm|element|fnl)

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

用原先div的内容作为新div的class，并将每一个元素包裹起来
HTML 代码:
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
jQuery 代码:
$('.inner').wrapInner(function() {
  return '<div class="' + $(this).text() + '" />';
});
结果:
<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

替换

replaceWith(content|fn)

将所有匹配的元素替换成指定的HTML或DOM元素。

把所有的段落标记替换成加粗的标记。
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").replaceWith("<b>Paragraph. </b>");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。
HTML 代码:
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>
jQuery 代码:
$('.third').replaceWith($('.first'));
结果:
<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。

把所有的段落标记替换成加粗标记
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph. </b>").replaceAll("p");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

删除

empty()

删除匹配的元素集合中所有的子节点。

把所有段落的子元素（包括文本节点）删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>

:has(selector)

匹配含有选择器所匹配的元素的元素

给所有包含 p 元素的 div 元素添加一个 text 类
HTML 代码:
<div><p>Hello</p></div>
<div>Hello again!</div>
jQuery 代码:
$("div:has(p)").addClass("test");
结果:
[ <div class="test"><p>Hello</p></div> ]

detach([expr])

从DOM中删除所有匹配的元素。

从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach();
结果:
how are

从DOM中把带有hello类的段落删除
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach(".hello");
结果:
how are <p>you?</p>

复制

clone([Even[,deepEven]])

克隆匹配的DOM元素并且选中这些克隆的副本。

克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>

创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
HTML 代码:
<button>Clone Me!</button>
jQuery 代码:
$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

转载于:https://www.cnblogs.com/WWWrs/p/6858168.html

weixin_30306905
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery中的部分函数
panwenzhi0525的专栏
02-15 331
1：addClass(class)Html的代码： Hello world JQuery的代码： $(“p”).addClass（select）。 结果就变成：Hello      world 实例：向第一个P元素中添加一个类（样式） $（“button”）.click（function（）{$（“p：first”）.addClass（“intro”）；}） 2：attr（）方法
05_ Electron 自定义菜单、主进程与渲染进程通信
最新发布
所学所思
08-09 464
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
【Vue3】图片未加载成功前占位
菜就多练
08-08 258
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
社交媒体分享预览图片和内容修改
wangweiscsdn的博客
08-06 221
社交媒体分享链接时的预览图片和内容
Typescript配置文件(tsconfig.json)详解系列六：allowImportingTsExtensions
zzyp1927314的博客
08-05 496
如果不使用的时候，在导入文件的时候需要加上typescript编译后的文件后缀。如果使用了就不能输出编译文件，只能输出声明文件（*.d.ts）。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 960
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
【Material-UI】Autocomplete 组件的局限性（Limitations）详解
lph159的博客
08-05 727
在某些情况下，您可能需要为 Autocomplete 组件提供自定义的。此时，务必确保滚动容器具有属性。这样可以确保在使用键盘导航时，滚动行为的正确性。虽然 Material-UI 的 Autocomplete 组件提供了强大的功能，但开发者在使用时需要注意其一些局限性。通过合理设置组件属性和处理可能出现的问题，可以提升组件的用户体验和可访问性。希望本文能帮助您更好地理解和应用 Autocomplete 组件中的局限性。如果您有任何问题或建议，欢迎交流探讨。
Unity数据持久化 之 Json序列化与反序列化
2301_77947509的博客
08-09 371
Json的序列化与反序列化
i5ting_toc工具优化
麦麦麦先森的小世界
08-07 561
markdown转换支持带左侧导航的html
第15节课：表单高级功能——提升用户填写体验与数据交互
学问小小谢的技术博客
08-07 673
在现代Web应用中，表单是用户与服务器交互的重要方式。HTML5引入了一系列高级表单属性和数据绑定技术，极大地提升了用户的填写体验和表单数据的处理效率。本节课将深入探讨`autocomplete`、`autofocus`、`placeholder`等表单属性，以及表单数据的动态绑定和更新技术。
初步认识vue
qq_64669006的博客
08-05 302
vue是一种自下而上的渐进式框架，当实现简单的应用时，只需一个轻量小巧的核心库；当实现复杂的应用时，可以引入各式各样的Vue插件。
[Vue3] - 5 watch与watchEffect用法
weixin_45291798的博客
08-09 395
一全部属性firstName:'张',lastName:'三',job:{name:'前端工程师'}});接收的参数newValue与oldValue，person下的job对象改变，watch也能监视到，在vue2中只有开启了deep深度监视才会生效1 无法获取正确的oldValue2 deep设置无效，强制开启深度监视watch监听的是RefImpl或Proxy结构watchEffect监听回调中用到额度属性。
colResizable插件实现网页中表格列宽自定义
每天学习一点点
08-09 172
解决方法：使用jQuery的一个插件，名称叫 colResizable，可以实现。需求：页面上每个字段的列宽，可以通过页面拖动的形式进行调整。该插件依赖jQuery，所以需要在使用前引用jQuery。.Table指表格中table的class名称。
Vue - 关于v-wave 波浪动画组件
miaomiaowins的博客
08-07 993
这个动画库可以在标签中添加新的v-wave属性，来让点击标签元素后添加漂亮的波纹效果，并且可以根据父元素自动形成波纹的颜色，也可以自定义波纹颜色，持续时间，透明度，触发的对象等。
【微信小程序实战教程】之微信小程序中的 JavaScript
柯晓楠
08-06 1128
小程序的开发框架被称为MINA框架，其框架结构如图1所示。图1 MINA框架结构通过上面的框架结构图，我们可以看到小程序的MINA框架有三个部分组成，首先是View视图层，其次是App Service逻辑层和Native系统层。小程序中所有的页面都在View视图层中，每个页面由WXML文件和WXSS文件来搭建页面视图的结构和展现样式。App Service逻辑层是由App Service线程来加载、运行的，其生命周期常驻内存。
H5页面返回时提示用户返回将丢失信息
no_one_but_you的博客
08-06 198
H5页面返回时提示用户返回将丢失信息
Javascript——原始数据类型的自动装箱
weixin_45705239的博客
08-06 280
在 JavaScript 中，自动装箱（Automatic Boxing）是指当对原始数据类型（如字符串、数字和布尔值）执行类似对象的操作时，JavaScript 引擎会临时将其转换成对应的对象类型，以便可以使用对象上的方法或属性。StringNumberBooleanSymbol (在 ES6 及之后的版本中)String 对象Number 对象Boolean 对象Symbol 对象。
JS 补充内容
2301_80441013的博客
08-06 721
注意：dataset 会得到所有的自定义属性，并且将其变为一个集合对象返回指定时间戳根据日期返回对应的星期。
JavaScript 数组迭代
爱敲代码的卡拉米的博客
08-08 425
请注意此函数接受 4 个参数：总数（初始值/先前返回的值） 项目值 项目索引 数组本身。方法在数组中从右到左工作。请注意此函数接受 3 个参数：项目值 项目索引 数组本身。请注意此函数接受 3 个参数：项目值 项目索引 数组本身。请注意此函数接受 3 个参数：项目值 项目索引 数组本身。该函数接受 3 个参数：项目值 项目索引 数组本身。方法通过对每个数组元素执行函数来创建新数组。方法返回通过测试函数的第一个数组元素的索引。方法返回通过测试函数的第一个数组元素的值。方法不会对没有值的数组元素执行函数。
jquery的文档处理方法
06-11
jQuery 提供了许多文档处理方法，可以方便地操作文档的结构和内容。以下是一些常见的文档处理方法： - `append()`、`prepend()`、`after()`、`before()`：这些方法用于向文档中添加和插入元素。`append()` 将指定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值