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


Posted in Javascript onMarch 04, 2013
<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"></script> 
<script type="text/javascript"> 
   $(document).ready(function(){ 
     //几种添加节点的方法 
    //$("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元素前面    
      //几种删除节点的方法 
    //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元素的内容 
    //复制节点 
   /* $("ul li").click(function(){ 
     $(this).clone(true).appendTo("ul");//复制当前点击的节点,并将它追加到《ul》元素中,当添加参数时复制它的事件 
    }); 
    */ 
    //替换节点 
   // $("p").replaceWith("<strong>你最不喜欢的水果是?</Strong>");   
   }); 
</script> 
</head> 
<body> 
   <p>你好!</p> 
   你最喜欢的水果是? 
   <ul> 
    <li title="苹果">苹果</li> 
    <li title="橘子">橘子</li> 
    <li title="菠萝">菠萝</li> 
    </ul> 
</body> 
</html>
Javascript 相关文章推荐
javascript运动详解
Jul 06 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
js代码实现轮播图
May 04 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
JS获取后台Cookies值的小例子
Mar 04 #Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 #Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 #Javascript
js给dropdownlist添加选项的小例子
Mar 04 #Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 #Javascript
利用js实现选项卡的特别效果的实例
Mar 03 #Javascript
DWZ刷新dialog解决方法
Mar 03 #Javascript
You might like
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
python封装对象实现时间效果
2020/04/23 Python
python多线程扫描端口示例
2014/01/16 Python
python动态监控日志内容的示例
2014/02/16 Python
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
详解Python中的join()函数的用法
2015/04/07 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
python3.x上post发送json数据
2018/03/04 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
前厅部经理岗位职责范文
2014/02/04 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
质量整改报告范文
2014/11/08 职场文书
指导老师鉴定意见
2015/06/05 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Python中文纠错的简单实现
2021/07/07 Python
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang