recherche
Maisoninterface Webjs tutorielJquery 基础学习笔记之文档处理_jquery

主要包括以下几部分:(1)内部插入(2)外部插入(3)包裹(4)替换(5)删除(6)赋值。那我们就开始详细地看一下。
1、内部插入:向一些元素的内部插入内容
(1)append(content) :向每个匹配的元素内部追加内容,追加到元素内部的末尾,比如
描述:
向所有段落中追加一些HTML标记。
HTML 代码:

I would like to say:


jQuery 代码:
$("p").append("Hello");
结果:
[

I would like to say: Hello

]

(2)appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中
描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:

I would like to say:



jQuery 代码:
$("p").appendTo("div");
结果:

I would like to say:


I would like to say:



(3) prepend(content) 向每个匹配的元素内部前置内容
描述:
向所有段落中前置一些HTML标记代码。
HTML 代码:

I would like to say:


jQuery 代码:
$("p").prepend("Hello");
结果:
[

HelloI would like to say:

]

(4) prepend() 把所有匹配的元素前置到另一个、指定的元素元素集合中。
描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:

I would like to say:


jQuery 代码:
$("p").prependTo("#foo");
结果:

I would like to say:



2、内部插入:向一些元素的外部插入内容
(1)after(content)在每个匹配的元素之后插入内容。
描述:
在所有段落之后插入一些HTML标记代码。
HTML 代码:

I would like to say:


jQuery 代码:
$("p").after("Hello");
结果:

I would like to say:

Hello

(2)before() 在每个匹配的元素之前插入内容
描述:
在所有段落之前插入一些HTML标记代码。
HTML 代码:

I would like to say:


jQuery 代码:
$("p").before("Hello");
结果:
[ Hello

I would like to say:

]
(3)insertafter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
描述:
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
HTML 代码:

I would like to say:

Hello

jQuery 代码:
$("p").insertAfter("#foo");
结果:
Hello

I would like to say:



(4)insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面
描述:
把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。
HTML 代码:
Hello

I would like to say:


jQuery 代码:
$("p").insertBefore("#foo");
结果:

I would like to say:

Hello




3、包裹:把一些元素包裹起来
(1)wrap(html) 把所有匹配的元素用其他元素的结构化标记包裹起来
描述:
把所有的段落用一个新创建的div包裹起来
HTML 代码:

Test Paragraph.


jQuery 代码:
$("p").wrap("
");
结果:

Test Paragraph.



(2) wrap(elem) 把所有匹配的元素用其他元素的结构化标记包装起来
描述:
用ID是"content"的div将每一个段落包裹起来
HTML 代码:

Test Paragraph.


jQuery 代码:
$("p").wrap(document.getElementById('content'));
结果:

Test Paragraph.



(3)wrapAll(html) 将所有匹配的元素用单个元素包裹起来
描述:
用一个生成的div将所有段落包裹起来
HTML 代码:

Hello

cruel

World


jQuery 代码:
$("p").wrapAll("
");
结果:

Hello

cruel

World



(4) wrapAll(elem)将所有匹配的元素用单个元素包裹起来
描述:
用一个生成的div将所有段落包裹起来
HTML 代码:

Hello

cruel

World


jQuery 代码:
$("p").wrapAll(document.createElement("div"));
结果:

Hello

cruel

World


(5) wrapInner(html)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
描述:
把所有段落内的每个子内容加粗
HTML 代码:

Hello

cruel

World


jQuery 代码:
$("p").wrapInner("");
结果:

Hello

cruel

World


(6) wrapInner(elem)
描述:
把所有段落内的每个子内容加粗
HTML 代码:

Hello

cruel

World


jQuery 代码:
$("p").wrapInner(document.createElement("b"));
结果:

Hello

cruel

World


4、替换:用制定的元素替换一些HMTL或者DOM元素
(1)replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素
描述:
把所有的段落标记替换成加粗的标记。
HTML 代码:

Hello

cruel

World


jQuery 代码:
$("p").replaceWith("Paragraph. ");
结果:
Paragraph. Paragraph. Paragraph.
(2) repalceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
描述:
把所有的段落标记替换成加粗标记
HTML 代码:

Hello

cruel

World


jQuery 代码:
$("Paragraph. ").replaceAll("p");
结果:
Paragraph. Paragraph. Paragraph.

5、删除:删除制定的元素
(1)empty() 删除匹配的元素集合中所有的子节点。
描述:
把所有段落的子元素(包括文本节点)删除
HTML 代码:

Hello, Person and person


jQuery 代码:
$("p").empty();
结果:


(2)remove([expr]) 从DOM中删除所有匹配的元素
描述:
从DOM中把所有段落删除
HTML 代码:

Hello

how are

you?


jQuery 代码:
$("p").remove();
结果:
how are
描述:
从DOM中把带有hello类的段落删除
HTML 代码:

Hello

how are

you?


jQuery 代码:
$("p").remove(".hello");
结果:
how are

you?


5、复制:克隆匹配的元素
(1)Clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
描述:
克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。
HTML 代码:
Hello

, how are you?


jQuery 代码:
$("b").clone().prependTo("p");
结果:
Hello

Hello, how are you?



(2) clone(true) 元素以及其所有的事件处理并且选中这些克隆的副本

描述:
创建一个按钮,他可以复制自己,并且他的副本也有同样功能。
HTML 代码:

jQuery 代码:
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
终于整理完毕。以上内容参考与Jquery1.3中文参考。
希望此篇对初学者有益。
Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

DVWA

DVWA

Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel

PhpStorm version Mac

PhpStorm version Mac

Le dernier (2018.2.1) outil de développement intégré PHP professionnel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

MinGW - GNU minimaliste pour Windows

MinGW - GNU minimaliste pour Windows

Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP