1.append()

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

HTML代码:

<p>我想说:</p>

jQuery代码:

$('p').append('<b>你好</b>');

结果:

<p>我想说:<b>你好</b></p>

2.appendTo()

将所有匹配的元素追加到指定的元素中。实际上,使用该方法是颠倒了常规$(A).append(B)的操作,既不是将B追加到A中,而是将A追加到B中

HTML代码:

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').appendTo('p');

结果:

<p>我想说:<b>你好</b></p>

3.prepend()

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

HTML代码:

<p>我想说:</p>

jQuery代码:

$('p').prepend('<b>你好</b>');

结果:

<p><b>你好</b>我想说:</p>

4.prependTo()

将所有匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规$(A).prepend(B)的操作,既不是将B前置到A中,而是将A前置到B中

HTML代码:

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').prependTo('p');

结果:

<p><b>你好</b>我想说:</p>

5.after()

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

HTML代码:

<p>我想说:</p>

jQuery代码:

$('p').after('<b>你好</b>');

结果:

<p>我想说:<b>你好</b></p>

6.insertAfter

将所有匹配的元素插入到指定元素的后面。实际上,使用该方法是颠倒了常规$(A).after(B)的操作,既不是将B插入到A后面,而是将A插入到B后面

HTML代码:

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').insertAfter('p');

结果:

<p>我想说:<b>你好</b></p>

7.before

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

HTML代码:

<p>我想说:</p>

jQuery代码:

$('p').before('<b>你好</b>');

结果:

<p><b>你好</b>我想说:</p>

8.insertBefore

将所有匹配的元素插入到指定元素的前面。实际上,使用该方法是颠倒了常规$(A).after(B)的操作,既不是将B插入到A前面,而是将A插入到B前面

HTML代码:

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').insertBefore('p');

结果:

<p><b>你好</b>我想说:</p>

9.remove()

作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素

注意!     当某个节点用remove()方法删除后,该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。

实例:

var $li=$('ul li:eq(1)').remove();//获取第二个<li>元素节点后,将它从网页中删除

$li.appendTo('ul');//把刚才删除的节点又重新添加到<ul>元素里

另外remove()方法也可以通过传递参数来选择性的删除元素

实例:

$('ul li').remove('li[title!=菠萝]');//将<li>元素中属性title不等于‘菠萝’的<li>元素删除

10.empty()

严格来讲,empty()方法不是删除节点,而是清空节点,他能清空元素中的所有后代节点

实例:

$('ul li:eq(1)').empty();//获得第二个<li>元素节点后,清空此元素里的内容,注意是元素里!

当代码运行后,第二个<li>元素的内容被清空了,只剩下了<li>标签默认符号‘·’

11.clone()

实例:

$('ul li').click(function(){

  $(this).clone().appendTo('ul');//复制当前节点,并将它追加到<ul>元素中

})

注意!      复制节点后,被复制的新元素并不具备任何行为。如果需要新元素也具有行为,使用clone时传递参数true。

实例:

$(this).clone(true).appendTo('ul');

12.replaceWith()和replaceAll()

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。

实例:

$('p').replaceWith('<strong>你最不喜欢的方法是?</strong>');

同样上述功能也能使用relaceAll()来实现,该方法与relaceWith()方法的作用相同,只是颠倒了relaceWith()操作。

实例:

$('<strong>你最不喜欢的方法是?</strong>').replaceAll('p');

注意!    如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在元素上重新绑定事件。

13.wrap()

将某个节点用其他标记包裹起来。该方法对于需要在文档中插入额外标记的结构化标记非常有用,而且她不会破坏原始文档的语义。

jQuery代码:

$('strong').wrap('<b></b>');//用<b>标签把<strong>元素包裹起来

结果:

<b><strong title='你最不喜欢的方法是'>你最喜欢的方法是?</strong></b>

14.wrapAll()

将所有匹配的元素用一个元素来包裹。它不同于wrap()方法,wrap()方法是将所有的元素进行单独的包裹。

HTML代码:

<strong title='方法'>方法</strong>

<strong title='方法'>方法</strong>

<ul>

  <li title='方法一'>方法一</li>

  <li title='方法二'>方法二</li>

  <li title='方法三'>方法三</li>

</ul>

如果使用wrap()方法包裹<strong>元素

jQuery代码:

$('strong').wrap('<b></b>');

结果:

<b><strong title='方法'>方法</strong></b>

<b><strong title='方法'>方法</strong></b>

如果使用wrapAll()方法包裹<strong>元素

jQuery代码:

$('strong').wrapAll('<b></b>');

结果:

<b>

  <strong title='方法'>方法</strong>

  <strong title='方法'>方法</strong>

</b>

15.wrapInner()

将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。

jQuery代码:

$('strong').wrapInner('<b></b>');

结果:

<strong title='喜欢的方法'><b>喜欢的方法</b></strong>

jQuery节点操作方法大全的更多相关文章

  1. jquery 节点操作大全

    $para.attr("title"); 实例: <script type="text/javascript"> //<![CDATA[ $( ...

  2. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  3. jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  4. jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  5. 十分钟玩转 jQuery、实例大全(参考自博主索宁)

    十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...

  6. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  7. python文件和目录操作方法大全(含实例)

    一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...

  8. 【python】python文件和目录操作方法大全(含实例)

    转自:http://www.jb51.net/article/48001.htm 一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Pyt ...

  9. Jquery节点遍历

    jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery ...

随机推荐

  1. Windows 10不能正常打开开始菜单问题修复

    1.可以尝试通过命令重新注注册Windows Store app: powershell -ExecutionPolicy Unrestricted Add-AppxPackage -DisableD ...

  2. Thread.suspend和println使线程死锁

    Thread.suspend和println使线程死锁 package com.stono.thread2.page39; public class MyThread extends Thread{ ...

  3. HDU 2586 How far away ?(LCA模板 近期公共祖先啊)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2586 Problem Description There are n houses in the vi ...

  4. sqlite3树形结构遍历效率对照測试

    sqlite3树形结构遍历效率对照測试 一.缘起 项目数据结构:本人从事安防行业,视频监控领域.项目中会遇到监控点位的组织机构划分.暂时划分的巡逻点位等.这些相机点位.连同组织机构,它们在逻辑关系上构 ...

  5. Leetcode45:Intersection of Two Linked Lists

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  6. 解决TortoiseGit下载代码每次要输入用户名、密码

    解决办法: 方案1: 右键>ortoiseGit → Settings → Git → Credential 设置为 wincred - this repository only 或者 winc ...

  7. 使用Lucene对预处理后的文档进行创建索引(可执行)

    时间: 2015/3/18 杨鑫newlife 对于文档的预处理后.就要開始使用Lucene来处理相关的内容了. 这里使用的Lucene的过程例如以下: 首先要为处理对象机那里索引 二是构建查询对象 ...

  8. Python学习笔记24:Django搭建简单的博客站点(二)

    上一节说道怎样使用Django创建并执行一个项目.这节说怎样加入一个博客应用. 一 项目跟应用的关系 在加入应用之前,先来看看项目与应用之间有什么不同之处呢? 项目是针对一个特定的 Web 站点相关的 ...

  9. EOJ 3031 二进制倒置

    题目描述 给定一个整数 n(0≤n≤10100).将 n 的 334 位二进制表示形式(不包括开头可能的值为 0 的位,n=0 表示为 1 位 0)前后倒置,输出倒置后的二进制数对应的整数. 例如:n ...

  10. hihoCoder-1829 2018亚洲区预选赛北京赛站网络赛 B.Tomb Raider 暴力 字符串

    题面 题意:给你n个串,每个串都可以选择它的一个长度为n的环形子串(比如abcdf的就有abcdf,bcdfa,cdfab,dfabc,fabcd),求这个n个串的这些子串的最长公共子序列(每个串按顺 ...