文档章节

jQuery 和 javascript 插入,复制,替换和删除节点

koobur
 koobur
发布于 2015/03/31 13:25
字数 434
阅读 48
收藏 1

今天为了写轮播图,重新看了下 js Dom操作。

jquery 参考 http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp;
javascript 参考 http://www.w3school.com.cn/jsref/dom_obj_all.asp;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>
    <p>你好!</p> 
       你最喜欢的水果是? 
       <ul> 
        <li title="苹果">苹果</li> 
        <li title="橘子">橘子</li> 
        <li title="菠萝">菠萝</li> 
    </ul> 
</body>
</html>
// 几种添加节点的方法 ; 原生js:element.appendChild(),element.insertBefore()
$("p").append("<b>你好吗?</b>");//向p元素中追加《b》 
$("<b>你好吗?</b>").appendTo("p");//将《b》追加到p元素中 
$("p").prepend("<b>你好吗?</b>");//向p中前置《b》 
$("<b>你好吗?</b>").prependTo("p");//将《b》前置到p元素中 
$("p").after("<b>你好吗?</b>");//向p元素后插入《b》 
$("<b>你好吗?</b>").insertAfter("p");//将《b》插入到p元素后边 
$("p").before("<b>你好吗?</b>");//在p元素之前添加《b》 
$("<b>你好吗?</b>").insertBefore("p");//将《b》插入到p元素前面 
 
// 几种删除节点的方法 ; 原生js:element.removeChild()
var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点 
$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去 
$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除 
$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容 
 
// 复制节点 ; 原生js:element.cloneNode()
$(this).clone(true).appendTo("ul");//复制当前点击的节点,并将它追加到《ul》元素中,当添加参数时复制它的事件 
 
// 替换节点 ; 原生js:element.replaceChild()
$("p").replaceWith("<strong>你最不喜欢的水果是?</Strong>");

 

本文转载自:

共有 人打赏支持
koobur
粉丝 11
博文 17
码字总数 11225
作品 0
昌平
高级程序员
私信 提问
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
09/08
0
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
07/20
0
0
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......

北方攻城师
2015/07/01
0
0
二、jQuery中的DOM操作

Dom操作的分类 一般来说,Dom操作分为3个方面,即DOM Core、HTML-DOM和CSS-DOM。 jQuery中的DOM操作 一、查找节点 用jQuery在文档树上查找节点非常容易,可以利用前面介绍的jQuery选择器来完...

Winnie007
2015/11/14
0
0
jQuery学习笔记二:"$"

在jQuery中,使用最频繁的就是"$"符号了,他给我们提供了丰富的功能,例如选择页面中的一个和或是一类元素、作为功能函数的前缀、window.onload的完善、创建页面的DOM节点等。 1.选择器: 在...

长平狐
2013/06/17
26
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据技术的发展趋势

大数据领域已经涌现出了大量新的技术,它们成为大数据采集、存储、处理和呈现的有力武器。这些技术下一步将如何发展?它们之中哪些技术将广为流行?又会诞生哪些新的技术? 技术趋向多样化,...

董黎明
6分钟前
0
0
藏在正则表达式里的陷阱

前几天线上一个项目监控信息突然报告异常,上到机器上后查看相关资源的使用情况,发现 CPU 利用率将近 100%。通过 Java 自带的线程 Dump 工具,我们导出了出问题的堆栈信息。 我们可以看到所...

前端小攻略
8分钟前
0
0
TensorFlow的基础概念01

概念: TensorFlow是一个深度学习框架,人人都能实现机器学习。 import osos.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'import tensorflow as tf#导入对应的TensorFlow#输出Hello W...

怪咖先生forever
9分钟前
0
0
关联更新,关联查询

关联更新 update A,B SET A.c1=B.c1,A.c2=B.c2 where A.id=B.id and ... update A inner join on A.id=B.id set A.c1=B.c1,A.c2=B.c2 where... 关联查询 交叉连接(cross join),内连接(inner ......

关元
12分钟前
0
0
django的环境搭建及启用

Pycharm社区版不像商业版那样可以直接创建django工程,需要通过一下步骤创建: 新建一个用于Django开发的虚拟环境 打开命令窗口 新建虚拟环境: conda create -n env_name python=3.6 查看系...

davidwbnu
12分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部