jQuery节点操作方法大全
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节点操作方法大全的更多相关文章
- jquery 节点操作大全
$para.attr("title"); 实例: <script type="text/javascript"> //<![CDATA[ $( ...
- jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所 ...
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- 十分钟玩转 jQuery、实例大全(参考自博主索宁)
十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- python文件和目录操作方法大全(含实例)
一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...
- 【python】python文件和目录操作方法大全(含实例)
转自:http://www.jb51.net/article/48001.htm 一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Pyt ...
- Jquery节点遍历
jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery ...
随机推荐
- Windows 10不能正常打开开始菜单问题修复
1.可以尝试通过命令重新注注册Windows Store app: powershell -ExecutionPolicy Unrestricted Add-AppxPackage -DisableD ...
- Thread.suspend和println使线程死锁
Thread.suspend和println使线程死锁 package com.stono.thread2.page39; public class MyThread extends Thread{ ...
- HDU 2586 How far away ?(LCA模板 近期公共祖先啊)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2586 Problem Description There are n houses in the vi ...
- sqlite3树形结构遍历效率对照測试
sqlite3树形结构遍历效率对照測试 一.缘起 项目数据结构:本人从事安防行业,视频监控领域.项目中会遇到监控点位的组织机构划分.暂时划分的巡逻点位等.这些相机点位.连同组织机构,它们在逻辑关系上构 ...
- 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 ...
- 解决TortoiseGit下载代码每次要输入用户名、密码
解决办法: 方案1: 右键>ortoiseGit → Settings → Git → Credential 设置为 wincred - this repository only 或者 winc ...
- 使用Lucene对预处理后的文档进行创建索引(可执行)
时间: 2015/3/18 杨鑫newlife 对于文档的预处理后.就要開始使用Lucene来处理相关的内容了. 这里使用的Lucene的过程例如以下: 首先要为处理对象机那里索引 二是构建查询对象 ...
- Python学习笔记24:Django搭建简单的博客站点(二)
上一节说道怎样使用Django创建并执行一个项目.这节说怎样加入一个博客应用. 一 项目跟应用的关系 在加入应用之前,先来看看项目与应用之间有什么不同之处呢? 项目是针对一个特定的 Web 站点相关的 ...
- EOJ 3031 二进制倒置
题目描述 给定一个整数 n(0≤n≤10100).将 n 的 334 位二进制表示形式(不包括开头可能的值为 0 的位,n=0 表示为 1 位 0)前后倒置,输出倒置后的二进制数对应的整数. 例如:n ...
- hihoCoder-1829 2018亚洲区预选赛北京赛站网络赛 B.Tomb Raider 暴力 字符串
题面 题意:给你n个串,每个串都可以选择它的一个长度为n的环形子串(比如abcdf的就有abcdf,bcdfa,cdfab,dfabc,fabcd),求这个n个串的这些子串的最长公共子序列(每个串按顺 ...