jQuery中对节点进行操作的相关介绍

动态创建Dom节点

jQuery中使用$(html字符串)来动态创建Dom节点，并且返回一个jQuery对象，可以调用append等方法将创建的节点添加到Dom中。

例如：

var link = $("<a href='http://www.baidu.com'>百度</a>");

$("div:first").append(link);

添加节点元素的方法：

Append方法用来在元素的末尾追加元素（最后一个子节点）

Prepend在元素的开始添加元素（第一个子节点）

After:在元素之后添加元素（添加兄弟节点）

Before：在元素之前添加元素（添加兄弟节点）

子元素.appendTo(父元素)：在元素的末尾追加一个子元素

子元素.prependTo(父元素):在元素的开始追加一个子元素

A.insertBefore(B)    将A插入到B的前面，等同于B.before(A);

X.insertAfter(B)   将X插入到Y的后面，等同于Y.after(X);

删除节点：

Empty():清空该元素下的所有子节点

等同于：while(ele.firstChild){ele.removeChild(ele.firstChild);}

Remove(selectot);自杀；删除当前元素，返回值为被删除的元素，可以讲节点删除之后放到其他节点下面，有一个移动的效果，例如：

var lis = $("#ulSite li").remove();

$("#ulSite2").append(lis);

Clone()克隆节点，支复制节点，不复制节点

Clone(true):克隆节点带事件

节点的替换：

$("br").replaceWith("<hr/>");

$("br").replaceAll("<hr/>");

包裹节点

Wrap()方法用来将所有的元素逐个用指定的标签包裹

$("b").wrap("<font color='red'></font>");将所有粗体字红色显示

wrapInner();在内部围绕

赞 (0)

相关推荐

  • jQuery移动和复制dom节点实用DOM操作案例

    本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考. 在做一个项目时,需要dom节点移动,如以下代码: 复制代码 代码如下: <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 复制代码 代码如下: $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样: 复制代码 代码如下: $('div').a

  • jQuery:节点(插入,复制,替换,删除)操作

    复制代码 代码如下: <html> <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>jQuery插入,复制.替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2.js&q

  • js和jquery对dom节点的操作(创建/追加)

    复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app

  • jQuery中对节点进行操作的相关介绍

    动态创建Dom节点 jQuery中使用$(html字符串)来动态创建Dom节点,并且返回一个jQuery对象,可以调用append等方法将创建的节点添加到Dom中. 例如: var link = $("<a href='http://www.baidu.com'>百度</a>"); $("div:first").append(link); 添加节点元素的方法: Append方法用来在元素的末尾追加元素(最后一个子节点) Prepend在元素的

  • JQuery中DOM节点的操作与访问方法实例分析

    本文实例讲述了JQuery中DOM节点的操作与访问方法.分享给大家供大家参考,具体如下: Jquery中DOM节点的操作 已有对象.append(要添加的对象) 作为最后一个子元素添加 要添加的对象.appendTo(已有对象) prepend()/prependTo() 作为第一个子元素添加 已有元素.before(要添加的元素)/after() 在对象前面/后面添加新的元素,可用逗号分割添加多个元素 要添加的元素.insertBefore(已有元素)/insertAfter() .empty

  • JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象 Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数组的功能 1.1 定义数组 声明有10个元素的数组 复制代码 代码如下: var a = new Array(10); 此时为a已经开辟了内存空间,包含10个元素,用数组名称加 [下标] 来调用,例如

  • jquery对dom节点的操作【推荐】

    1.JavaScript脚本放在哪里才好? 1.当有些函数 需调用才执行或者有些事件需触发才执行的脚本,我们可以将脚本放在HTML的head部分中,这样可以保证脚本在任何调用之前已经被加载. 2.当页面加载时 需执行的脚本可以放在HTML的body部分,这类脚本通常被用来生成页面的内容. 3.当页面加载后 需立即执行的脚本,我们可以放在最后,文档加载之后执行.所幸的是,Jquery有事件控制,所以,这部分我们可以下载 head 引用的外部文件中. 2.jquery的常用函数 如:children

  • jQuery中 DOM节点操作方法大全

    append(content | fn):向每个匹配的元素内部追加内容.参考:http://jquery.cuishifeng.cn/append.html 例如:向所有段落中追加一些HTML标记. <p>I would like to say: </p> $("p").append("<b>Hello</b>"); [ <p>I would like to say: <b>Hello</

  • ElementUI中el-tree节点的操作的实现

    其实tree的有些方法用起来是很方便的, this.$refs.tree.getCheckedKeys():这个原生态的方法.官方文档上说的是,返回一个数组.有了这个方法,我们就可以得到选中的每个节点的id,拿到了id,那所有的问题就迎刃而解了. 废话不多说,直接上代码 html <div id="app"> <el-row> <el-button @click="checkedKeys">得到节点id</el-button

  • jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍

    insertBefore():a.insertBefore(b) a在前,b在后, a:是一个选择器,b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> <script type="text/javascript" src='jquery-2.2.0.min.js'></script&g

  • 详解jQuery中的元素的属性和相关操作

    元素属性 元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要. jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用,用来设置或获取属性的值.和 $.fn.css 用法类似,$.fn.attr 既可一次性接受单个属性,也可以接受多个属性(对象) : $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are

  • jquery中为什么能用$操作

    前言 jq对dom节点的操作相信大家都很熟悉, $("input").val("value"); 直接用$来获取dom节点的方式也非常便捷方便,那么他是怎么实现的呢? 猜想 在没看源码之前,我的猜想是这样的 function Dom(selector){ this.dom = document.querySelector(selector); this.val = function (content) { if(content){ this.dom.value =

  • 基于jQuery中对数组进行操作的方法

    jQuery中提供了两个函数 : 1.$.map(array,callback(element,index)); 对于array中的每个元素,调用callback()函数,最终返回一个新的数组,原数组不变 例如: $(function () {            var arrInt = [1, 3, 5, 79];            var b = $.map(arrInt, function (value, key, a) {//map返回来的是一个新数组              

随机推荐