Jquery节点操作
来源:互联网 发布:百分百营销软件好用吗 编辑:程序博客网 时间:2024/06/07 01:58
.text .attr
<script type="text/javascript"> //测试使用 jQuery 操作文本节点, 属性节点. //及查找元素节点 $(function(){ //1. 操作文本节点: 通过 jQuery 对象的 text() 方法 alert($("#bj").text()); $("#bj").text("尚硅谷"); //2. 操作属性节点: 通过 jQuery 对象的 attr() 方法. //注: 直接操作 value 属性值可以使用更便捷的 val() 方法. alert($(":text[name='username']").attr("value")); $(":text[name='username']").attr("value", "尚硅谷"); }) </script><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>
添加节点append appendTo prependTo prepend
<script type="text/javascript"> $(function(){ //1. 创建一个 <li id="atguigu">尚硅谷</li> //2. 并把其加入到 #city 的子节点 $("<li id='atguigu'>尚硅谷</li>").appendTo($("#city")); $("#city").append("<li id='atguigu'>[尚硅谷]</li>"); $("<li id='atguigu'>尚硅谷</li>").prependTo($("#city")); $("#city").prepend("<li id='atguigu'>[尚硅谷]</li>"); alert($("#atguigu").text()); }) </script>
添加节点insertAfter insertBefore
<script type="text/javascript"> //测试使用 jQuery 插入节点 $(function(){ //1. 创建一个 <li id="atguigu">尚硅谷</li> //2. 并把其加入到 #bj 的后面 $("<li id='atguigu'>尚硅谷</li>").insertAfter($("#bj")); $("#bj").after("<li id='atguigu'>[尚硅谷]</li>"); $("<li id='atguigu'>尚硅谷</li>").insertBefore($("#bj")); $("#bj").before("<li id='atguigu'>[尚硅谷]</li>"); }) </script>
remove
<script type="text/javascript"> //测试使用 jQuery 删除节点 $(function(){ //1. 为 #city 的每一个 li 添加 click 响应函数: 点击时, li 被删除 $("#city li").click(function(){ $(this).remove(); }); //jQuery 对象的 remove() 方法: 将把 jQuery 对象对应的 //DOM 节点直接删除. $("#bj").remove(); //2. 清空 #game 节点 //jQuery 对象的 empty() 方法: 清空 jQuery 对象对应的 //DOM 对象的所有的子节点. alert("要清空了!"); $("#game").empty(); }) </script>
clone
<script type="text/javascript"> //测试使用 jQuery clone 方法: 复制节点 $(function(){ $("li").click(function(){ alert($(this).text()); }); //复制 #bj 节点, 并添加到 #rl 节点的后面 /* 1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id 属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况. 2. clone(true): 在克隆节点的同时, 克隆节点包含的事件. */ $("#bj").clone(true) .attr("id", "bj2") .insertAfter($("#rl")); }) </script>
replaceWith
<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. 还有移动的功能. //$("#bj").replaceWith($("#rl")); //节点互换需要先克隆节点. //alert(1); var $bj2 = $("#bj").clone(true); var $rl = $("#rl").replaceWith($bj2); //alert(2); $("#bj").replaceWith($rl); }) </script>
wrap wrapAll wrapInner
<script type="text/javascript"> //测试使用 jQuery wrap, wrapAll, wrapInner $(function(){ //包装 li 本身 $("#game li").wrap("<font color='red'></font>"); //包装所有的 li $("#city li").wrapAll("<font color='red'></font>"); //包装 li 里边的文字. $("#language li").wrapInner("<font color='red'></font>"); }) </script>
html
<script type="text/javascript"> //测试使用 html() 方法. $(function(){ alert($("#city").html()); $("#city").html("<li id='atguigu'>尚硅谷</li>"); }) </script>
0 0
- Jquery操作DOM节点
- jQuery 节点操作
- jquery节点操作
- jquery dom 节点操作
- jQuery DOM节点操作
- jQuery节点操作
- jQuery节点操作
- Jquery节点操作
- jQuery节点操作练习
- jQuery节点操作
- jquery节点操作
- jQuery DOM节点操作
- 应用jquery节点操作
- 【jQuery】DOM 节点操作
- jQuery的节点操作
- jQuery节点操作
- jquery操作节点;jquery遍历节点
- JQuery笔记(三)-节点操作
- L1-019. 谁先倒
- Codeforces #164 C. Beautiful Sets of Points ( 思维
- Eclipse在新建项目时候new中只有poject,example,others解决办法
- 兴趣与工作
- spring 学习之四(spring的注入方式(xml和annotation))
- Jquery节点操作
- 嘟哝之JDK -- ArrayBlockingQueue
- html文档
- javascript基础
- JAVA中的网络编程详解
- 日航起死回生
- 深入理解数据库当中的聚合函数
- 第22节 C语言结构体之结构体嵌套、结构体指针与结构体数组的代码实现
- 第四届山东省赛 J Boring Counting [主席树]【数据结构】