1、jQuery的替换节点
2、代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery的替换节点</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> //测试使用 jQuery replaceWith (replaceAll) 方法: 替换节点 /* 1. replaceWith , replaceAll 一对方法, 可以完成一件事. 就是主语宾语 哪个在前面的问题. 2. 以上的两个方法还有移动节点的功能 3. 节点互换需要先克隆节点. 4. var $rl = $("#rl").replaceWith($bj2); */ $(function(){ //1. 创建一个 <li>尚硅谷</li> 节点, 替换 #city 的最后一个 li 子节点 //$("<li>尚硅谷</li>").replaceAll($("#city li:last")); //2. 创建一个 <li>[尚硅谷]</li> 节点, //替换 #city 的第二个 li 子节点 //$("#city li:eq(1)").replaceWith($("<li>[尚硅谷]</li>")); //3. 互换以下两个节点: #rl 和 #bj. 还有移动的功能. //节点互换需要先克隆节点. var $bj2 = $("#bj").clone(true); var $rl = $("#rl").replaceWith($bj2); $("#bj").replaceWith($rl); }) </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li id="dj">东京</li> <li id="se">首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female <br><br> name: <input type="text" name="username" value="atguigu"/> </body> </html>
3、原始界面
3、案例1
4、案例2
5、案例3
相关推荐
jquery 替换节点 节点jquery 替换节点 节点
教程名称:尚硅谷jQuery视频教程(25集)课程目录:【】1.尚硅谷_佟刚_jQuery_HelloWorld【】10.尚硅谷_佟刚_jQuery_表单元素过滤选择器【】11.尚硅谷_佟刚_jQuery_第一天小结【】12.尚硅谷_佟刚_jQuery_选择器的...
jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip
尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程
尚硅谷关于jQuery学习的教学课件,有需要的可以下载参考(*^▽^*)
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战
日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用
第十八节:jQuery速成 - 替换,删除和复制 第十九节:jQuery速成 - 元素的赋值 第四章:样式篇 - 层叠样式表的处理 第二十节:jQuery速成- 样式的设置与定义 第五章:提高篇 - jQuery中的事件机制 第二十一节:...
jquery 插入节点 节点jquery 插入节点 节点
04_尚硅谷_jQuery_王振国 - 课堂笔记1
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 ...
DateTimePicker:jQuery日期和时间插件
jQuery圆角插件:jquery.corners.js
jQuery:jQuery.extend函数详解
jquery实现父元素大小改变插件:jquery-resize
jquery表单验证框架:jquery.validate.zip 附:中文API 文档
、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin 、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。
jquery上传文件和参数封装的js:jquery.form.js,可用于单文件、上文件上传以及携带参数
jQuery第3天知识点:jQuery 属性操作、jQuery三组基本动画、自定义动画animate.zip
jquery 包裹节点 节点jquery 包裹节点 节点