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 创建节点并插入节点到指定的节点中 /* 1. 创建节点: 使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽 返回对应节点的 jQuery 对象: $("<li id='atguigu'>尚硅谷</li>") 2. 添加节点: 1). appendTo 和 append: 主语和宾语的位置不同: $("<li id='atguigu'>尚硅谷</li>").appendTo($("#city")); $("#city").append("<li id='atguigu'>[尚硅谷]</li>"); 2). prependTo 和 prepend: 主语和宾语的位置不同: $("<li id='atguigu'>尚硅谷</li>").prependTo($("#city")); $("#city").prepend("<li id='atguigu'>[尚硅谷]</li>"); */ $(function(){ //1. appendTo()和append() //需求:创建一个<li id="atguigu">尚硅谷</li> //并把其作为#city的子节点加入到最后面 //$("<li id='atguigu'>尚硅谷</li>").appendTo($("#city")); //$("#city").append("<li id='atguigu'>[尚硅谷]</li>"); //2.prependTo()和prepend() //需求:创建一个<li id="atguigu">尚硅谷</li> //并把其作为#city的子节点加入到最前面 //$("<li id='atguigu'>尚硅谷</li>").prependTo($("#city")); //$("#city").prepend("<li id='atguigu'>[尚硅谷]</li>"); //3. insertAfter()和after() //需求:创建一个<li id="atguigu">尚硅谷</li> //并把其插入到#bj的后面 //$("<li id='atguigu'>尚硅谷</li>").insertAfter($("#bj")); //$("#bj").after("<li id='atguigu'>[尚硅谷]</li>"); //4、insertBefore()和before() //需求:创建一个<li id="atguigu">尚硅谷</li> //并把其插入到#bj的前面 //$("<li id='atguigu'>尚硅谷</li>").insertBefore($("#bj")); //$("#bj").before("<li id='atguigu'>[尚硅谷]</li>"); }) </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、原始界面
4、案例1:appendTo()
5、案例2:append()
6、案例3:prependTo()
7、案例4:prepend()
8、案例5:insertAfter()
9、案例6:after()
10、案例7:insertBefore()
11、案例8:before()
相关推荐
教程名称:尚硅谷jQuery视频教程(25集)课程目录:【】1.尚硅谷_佟刚_jQuery_HelloWorld【】10....尚硅谷_佟刚_jQuery_创建节点及插入节点【】14.尚硅谷_ 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
jquery 插入节点 节点jquery 插入节点 节点
尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程
jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip
尚硅谷关于jQuery学习的教学课件,有需要的可以下载参考(*^▽^*)
第七节:jQuery速成 - 内容对象的获取和对象可见性! 第八节:jQuery速成 - 对象获取进阶 第九节:jQuery速成 - 子元素的获取 第十节:jQuery速成 - 表单对象的获取 第十一节:jQuery速成 - 元素属性的设置与移除 第...
jquery 创建节点 节点jquery 创建节点 节点
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 ...
04_尚硅谷_jQuery_王振国 - 课堂笔记1
jQuery插入节点1
37:特殊符号 38:创建节点 39:追加节点1 40:追加节点2 41:插入节点1 42:插入节点2 43:删除节点1 44:删除节点2 45:参数删除 46:清空节点 47:克隆节点 48:替换节点1 49:替换节点2 50:包裹节点1 51:包裹节点2 52:...
Jquery节点插入、复制和替换方法总结
jquery 包裹节点 节点jquery 包裹节点 节点
DateTimePicket jQuery插件:使用这个插件来悄悄地添加一个DateTimePicker,日期选择器或timepicker下拉到您的表单。
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,...jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
jquery 替换节点 节点jquery 替换节点 节点
jQuery的Cookie插件 cookies cookies 是一个强大的 jQuery 用来操作 Cookie 的插件。除了常见的操作 $.cookies.set( 'sessid', 'dh3tr62fghe' ); var sessid = $.cookies.get( 'sessid' ); $.cookies.del( 'sessid...
去做jQuery + Node.js +猫鼬
jQuery:节点(插入,复制,替换,删除)操作,需要的朋友可以参考一下
jquery遍历节点树jquery遍历节点树jquery遍历节点树