Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

一.创建节点

var box = $(‘<div>节点</div>‘); //创建一个节点,或者var box = "<div>节点</div>";
$(‘body‘).append(box); //将节点插入到<body>元素内部

二.插入节点
jQuery 提供了好几种个方法来插入节点:
1、内部插入节点方法

 方法名 描述
append(content) 向指定元素内部后面插入节点 content
append(function (index, html) {}) 使用匿名函数向指定元素内部后面插入节点
appendTo(content) 将指定元素移入到指定元素 content 内部后面
prepend(content) 向指定元素 content 内部的前面插入节点
prepend(function (index, html) {}) 使用匿名函数向指定元素内部的前面插入节点
prependTo(content) 将指定元素移入到指定元素 content 内部前面

代码示例:

	$(‘div‘).append(‘<strong>节点</strong>‘); //向 div 内部插入 strong 节点
	$(‘div‘).append(function (index, html) { //使用匿名函数插入节点,index为该div的索引,即第几个div,html是原节点内部内容。
        return ‘<strong>节点</strong>+index+html‘;
	});
	$(‘span‘).appendTo(‘div‘); //讲 span 节点移入 div 节点内
	$(‘span‘).appendTo($(‘div‘)); //同上
	$(‘div‘).prepend(‘<span>节点</span>‘); //将 span 插入到 div 内部的前面
	$(‘div‘).append(function (index, html) { //使用匿名函数,同上
	return ‘<span>节点</span>‘;
	});
	$(‘span‘).prependTo(‘div‘); //将 span 移入 div 内部的前面
	$(‘span‘).prependTo($(‘div‘)); //同上

2、外部插入节点方法

方法名 描述
after(content) 向指定元素的外部后面插入节点 content
after(function (index, html) {}) 使用匿名函数向指定元素的外部后面插入节点
before(content) 向指定元素的外部前面插入节点 content
before(function (index, html) {}) 使用匿名函数向指定元素的外部前面插入节点
insertAfter(content) 将指定节点移到指定元素 content 外部的后面
insertBefore(content) 将指定节点移到指定元素 content 外部的前面

代码示例:

        $(‘div‘).after(‘<span>节点</span>‘); //向 div 的同级节点后面插入 span
	$(‘div‘).after(function (index, html) { //使用匿名函数,同上
	return ‘<span>节点</span>‘;
	});
	$(‘div‘).before(‘<span>节点</span>‘); //向 div 的同级节点前面插入 span
	$(‘div‘).before(function (index, html) { //使用匿名函数,同上
	return ‘<span>节点</span>‘;
	});
	$(‘span‘).insertAfter(‘div‘); //将 span 元素移到 div 元素外部的后面
	$(‘span‘).insertBefore(‘div‘); //将 span 元素移到 div 元素外部的前面

三.包裹节点
jQuery 包裹节点就是使用字符串代码将指定元素的代码包含着的意思。

方法名 描述
wrap(html) 向指定元素包裹一层 html 代码
wrap(element) 向指定元素包裹一层 DOM 对象节点
wrap(function (index) {}) 使用匿名函数向指定元素包裹一层自定义内容
unwrap() 移除一层指定元素包裹的内容
wrapAll(html) 用 html 将所有元素包裹到一起
wrapAll(element) 用 DOM 对象将所有元素包裹在一起
wrapInner(html) 向指定元素的子内容包裹一层 html
wrapInner(element) 向指定元素的子内容包裹一层 DOM 对象节点
wrapInner(function (index) {}) 用匿名函数向指定元素的子内容包裹一层

代码示例:

	$(‘div‘).wrap(‘<strong></strong>‘); //在 div 外层包裹一层 strong
	$(‘div‘).wrap(‘<strong>123</strong>‘); //包裹的元素可以带内容
	$(‘div‘).wrap(‘<strong><em></em></strong>‘); //包裹多个元素
	$(‘div‘).wrap($(‘strong‘).get(0)); //也可以包裹一个原生 DOM
	$(‘div‘).wrap(document.createElement(‘strong‘)); //临时的原生 DOM
	$(‘div‘).wrap(function (index) { //匿名函数
	return ‘<strong></strong>‘;
	});
	$(‘div‘).unwrap(); //移除一层包裹内容,多个需移除多次
	$(‘div‘).wrapAll(‘<strong></strong>‘); //所有 div 外面只包一层 strong
	$(‘div‘).wrapAll($(‘strong‘).get(0)); //同上
	$(‘div‘).wrapInner(‘<strong></strong>‘); //包裹子元素内容
	$(‘div‘).wrapInner($(‘strong‘).get(0)); //DOM 节点
	$(‘div‘).wrapInner(function () { //匿名函数
	return ‘<strong></strong>‘;
	});

注意:.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体,分别包含一层外层;后者将所有元素作为一个整体作为一个独立体,只包含一层外层。这两种都是在外层包含,而.wrapInner()在内层包含。

四.节点操作
除了创建、插入和包裹节点,jQuery 还提供了一些常规的节点操作方法:复制、替换和删除节点。

//复制节点
$(‘body‘).append($(‘div‘).clone(true)); //复制一个节点添加到 HTML 中

注意:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true参数的话,这个元素附带的事件处理行为也复制出来。

//删除节点
$(‘div‘).remove(); //直接删除 div 元素

注意:.remove()不带参数时,删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的,比如:$(‘div‘).remove(‘#box‘);只删除 id=box 的 div。

//保留事件的删除节点
$(‘div‘).detach(); //保留事件行为的删除

注意:.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。

//清空节点
2	$(‘div‘).empty(); //删除掉节点里的内容
3	//替换节点
4	$(‘div‘).replaceWith(‘<span>节点</span>‘); //将 div 替换成 span 元素
5	$(‘<span>节点</span>‘).replaceAll(‘div‘); //同上

注意:节点被替换后,所包含的事件行为就全部消失了。

文章来自:http://www.5imoban.net/jiaocheng/jquery/2014/0611/659.html

时间: 2024-10-10 01:32:12

Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作的相关文章

Jquery学习笔记:删除节点的操作

假设如下的html代码 <div id="mydiv" style="width:100px;height:100px;border:1px solid red"> xxx <div>s1</div> <div>s2</div> </div> 有下面的方法可以进行删除节点操作: $("#mydiv").remove();   //remove方法删除mydiv节点本身,以及其

js 访问,插入,替换,创建,删除节点介绍

访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性.语法:elementNode.childNodes注意:如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList. 注意:1. IE全系列.firefox.chrome.opera.safari兼容问题2. 节点之间的空白符,在firefox.chrome.opera.safari浏览器是文本节点,所以IE是3,其它浏览器是7, 访问子节点的第一和最后项一.firstChild 属性返回'chi

jQuery学习之路(2)-DOM操作

▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li>

Webform——JQuery基础(选择器、事件、DOM操作)

一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选择:用空格隔开 代码用法展示:   2.过滤选择器 (1).基本过滤 ①首个::first        ②尾个::last       ③任意个::eq(索引号)        ④大于::gt(索引号) ⑤小于::lt(索引号)         ⑥排除::not(选择器)         ⑦奇数:odd           ⑧偶数:

jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别

html和text都可以获取和修改DOM节点里的内容,方法如下: html(value)     ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容,                ;value可选,可以是html代码或返回html代码的函数,如果没有参数则获取匹配元素集合中第一个元素的innerHTML内容 text(text)         ;获取匹配元素集合中所有元素合并后的文本内容,或者设置每个元素的文本内容,封装了createTextNo

jQuery—一些常见方法(2)DOM操作【insertBefore(),insertAfter(),appendTo(),prependTo(),before(),after(),append(),prepend(),remove(),on(),off(),scrollTop()】

一.insertBefore() 如下代码:找到span标签,将span标签剪切到div的前面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="../../jq-practice/jq/jquery-2.2.1.min.js">&

redis 集群新增节点,slots槽分配,删除节点, [ERR] Calling MIGRATE ERR Syntax error, try CLIENT (LIST | KILL | GET...

redis reshard 重新分槽(slots) https://github.com/antirez/redis/issues/5029 redis 官方已确认该bug redis 集群重新(reshard)分片故障 [ERR] Calling MIGRATE ERR Syntax error, try CLIENT (LIST | KILL | GETNAME | SETNAME | PAUSE | REPLY) 错误背景描述 redis版本:4.0.1 ruby gem reids 版本

jQuery之必会增删改查Dom操作

.next  .prev <button>change</button> <span class = '.demo'>aaa</span> <p class = '.demo'>bbb</p> <script src="./jquery.js"></script> <script> $('button').click(function(){ $(this).next().css(

JQuery选择器,动画,事件和DOM操作

JQuery是由JS封装的一些方法,供我们调用,可以快速的实现某些JS功能,实际是JS编写的方法包 将JQuery文件放到JS文件夹下,然后引用到<head></head>中 一.选择器 1.Id选择器 $("#div1") 2.Class选择器 $(".div") 用class选择器选出一堆对象给他们附事件,不用像Js一样遍历.直接附加事件,取到的所有对象都会附上事件. 注意:Js中的this,在Jquery中变为$(this). 3.标签

红黑树插入删除节点过程分析 &amp;&amp; C代码实现

红黑树的插入和删除规则: 红黑树的五个性质 1.    每个节点要么是红的,要么是黑的 2.    根节点时黑色的 3.    每个叶节点(叶节点既指树尾端NIL指针或NULL节点)是黑色的 4.    如果一个节点时红的,那么它的两个儿子都是黑色的 5.    对每个节点,其到叶节点树尾端NIL指针的每一条路径都包含相同数目的黑节点 这里所说的"叶节点"或者"NULL节点",它不包含数据而只充当树在此结束的知识. 二叉树的左旋和右旋这里不再讲解 红黑树的插入操作: