JQuery操作Dom
来源：互联网 发布：nfc世界网络银行商城 编辑：程序博客网 时间：2024/05/20 20:18
1、dom创建 运行效果自己Copy代码运行去
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title >创建dom</ title> <style type="text/css"> table{ border-collapse:collapse ;} #tbMy td{ width :122px; height:36px ; border: 1px solid #000;} ul{ border:1px solid #000;width :100px; } </style > <script src="js/jquery-1.5.1.min.js" type="text/javascript"></ script> <script type="text/javascript"> //-------------------------------$("<a></a>")/.append()/.appendto()/.parent() var jsonArr = [ { "id":1,"name" :"刘德华", "age":17,"gender" :"男"}, { "id":2,"name" :"刘德华2", "age":27,"gender" :"女"}, { "id": 3, "name" : "刘德华3", "age": 37, "gender" : "不男不女" } ]; $( function () { //向Jquery方法中 设置 html 代码，Jquery会自动帮我们生成dom元素，并封装到一个新的Jquery对象 //var $Link = $("<a href='http://www.baidu.com'>去百度</a>"); //将 新的 Jquery对象append到 所有奇数单元格中 $()括号中直接设置元素内容 最简单的dom创建 //$("td:odd").append($Link); for (var index = 0; index < jsonArr.length; index++) { var perObj = jsonArr[index]; //获得 数组中的一个 人员信息 //$("<li></li>") 做了两个事儿：1.创建了 dom元素li；2将 此dom元素li 封装成一个Jqeury对象$Li var $Li = $("<li id='" + perObj.id + "' gender=" + perObj.gender + ">" + perObj.name + "</li>") .click( function () { //$("#ulRight").append($(this)); append与appendTo正好相反 var $now = $(this );//获得被点击的 li dom对象,然后通过 $()将其转成 JQ对象 if ($now.parent().attr("id" ) == "ulLeft") $now.appendTo($( "#ulRight")); else $now.appendTo($( "#ulLeft")); }); $( "#ulLeft").append($Li); }// $("div").attr("style", "border:1px solid black");// $.each(jsonArr, function (index, item) {// var jsonIndex = jsonArr[index];// var $LI = $("<li id=" + jsonIndex.id + "name=" + jsonIndex.name + ">" + jsonIndex.name + "</li>").click(function () {// if ($(this).parent().attr("id") == "ulLeft") {// $(this).appendTo($("#ulRight"));// } else {// $(this).appendTo($("#ulLeft"));// }// });// $("#ulRight").append($LI);// }) }) </script ></head><body><select multiple="multiple"><option value="1">aaa </option><option value="2">bbb </option></select><ul id="ulLeft" onclick="alert('123');"></ul><ul id="ulRight"></ul> <table id="tbMy"> <tr> <td class="myPreours">ID </td> <td id="td1">NAME </td> <td> GENDER</td > </tr> <tr> <td class="myPreours">1 </td> <td class="myPreours">痞子 </td> <td id="td2">男 </td> </tr> <tr> <td> 2</td > <td> 一毛</td > <td> 女</td > </tr> <tr> <td> 3</td > <td> 三毛</td > <td> 男</td > </tr> <tr> <td> 4</td > <td> 三点</td > <td> 男</td > </tr> <tr> <td> 汇总：8888</td > <td></ td> <td></ td> </tr> </table ></body></html>
2、通过权限列表左右移动 介绍JQuery函数操作Dom 运行效果自己Copy代码运行去
< html xmlns ="http://www.w3.org/1999/xhtml">< head> <title > 权限列表</ title > <style type="text/css"> select{ height :200px ; float: left ;margin : 10px;} #divBtns{ width :60px ; float: left ; padding : 20px; margin :20px ; border: 1px solid #000 ;} </style > <script src="js/jquery-1.5.1.min.js" type="text/javascript"></ script > <script type="text/javascript"> //Jquery对象本身就是一个数组 //-----------.append()/.appendTo()/.remove()/.empty()/.before()/.after()/.insertBefore()/.insertAfter()/.sort()/.sort(function(pre,next){}) var jsonArr = [ { "id" :1,"name" : "1刘德华", "age" :17,"gender" : "男"}, { "id" :2,"name" : "2黄小琥", "age" :27,"gender" : "女"}, { "id" : 3, "name" : "3张学友", "age" : 37, "gender" : "不男不女" }, { "id" : 4, "name" : "4彭佳慧", "age" : 47, "gender" : "女" }, { "id" : 5, "name" : "5凤凰传奇" , "age" : 47, "gender": "男" }, { "id" : 6, "name" : "6那英", "age" : 27, "gender" : "男" } ]; $( function () { //获得 左下拉框 var $leftSel = $("#leftSel" ); //-------------------------初始化下拉框 数据 for (var i = 0; i < jsonArr.length; i++) { var per = jsonArr[i]; var $opt = $("<option sort='" + per.id + "' value='" + per.name + "' > " + per.name + "</option>"); $leftSel.append($opt); } //------------------------点击 右移 按钮 $( "#btnMoveRight" ).click(function () { //获得选中的左侧列表里的 选项 $( "#leftSel option:selected" ).appendTo($("#rightSel" )); }); //------------------------点击 全右移 按钮 $( "#btnMoveAllRight" ).click(function () { //获得左侧列表里的 所有选项 var $optsSelected = $("#leftSel option" ); $optsSelected.appendTo($( "#rightSel" )); }); //------------------------点击 左移 按钮 $( "#btnMoveLeft" ).click(function () { //获得选中的右侧列表里的 选项 var $optsSelected = $("#rightSel option:selected" ); $optsSelected.appendTo($( "#leftSel" )); }); //------------------------点击 全左移 按钮 $( "#btnMoveAllLeft" ).click(function () { //获得右侧列表里的 所有选项 var $optsSelected = $("#rightSel option" ); $optsSelected.appendTo($( "#leftSel" )); }); //------------------------点击 左移 按钮，移动到左侧列表选中的 选项后 $( "#btnMoveLeftAfter" ).click(function () { //获得选中的右侧列表里的 选项 var $optsSelected = $("#rightSel option:selected" ); //获得左侧列表中 选项(因为选中项可能有多个，所以，我们总是选择最后一个) var $selectedLeftOpt = $("#leftSel option:selected:last" ); //将 右侧 选中项 追加到 左侧选中项的后面 $selectedLeftOpt.after($optsSelected); //after(content)在每个匹配的元素之后插入内容abefore(content)相反 //insertBrfore() insertAfter查看帮助 }); $( "#btnClearLeft" ).click(function () { //删除后返回的就是被删除的节点，而且由JQuery对象封装 //var $removedOpts = $("#leftSel option").remove();//remove()方法返回被删除的节点对象 //alert($removedOpts.appendTo($("#rightSel"))); //$("#divBtns").remove();//.empty()则是保留div框架 而remove则是连div都不存在 remove返回被删除的节点对象 }); //对移入移出元素进行先后的排序 $( "#btnMoveLeftSort" ).click(function () { //获得选中的右侧列表里的 选项 var $optsSelected = $("#rightSel option:selected" ); $optsSelected.appendTo($( "#leftSel" )); var sortedList = $("#leftSel option" ).sort( function (prev, next) { //sort不知道如何排序 我们 需要匿名函数 指明排序方法 根据元素sort属性值进行排序 var prevI = parseInt(prev.sort); var nextI = parseInt(next.sort); if (prevI > nextI) return 1; else if (prevI < nextI) return -1; else return 0; }); $( "#leftSel" ).append(sortedList); //$("#leftSel").empty().append($(sortedList)); //for (var i = 0; i < sortedList.length; i++) { //alert(sortedList[i].sort); //} }); //自己写的方法 较上比较复杂// $("#AllToR").click(function () {// $("#selLeft").children().each(function () {// $(this).appendTo($("#selRight"));// })// }) }); //以下四种插入外部元素 方法 自己查看帮助 //--------------------after(content)/before(content)/insertAfter(content)/insertBefore(content) </script ></ head>< body>< select id ="leftSel" multiple ="multiple"></ select>< div id ="divBtns"> <input type="button" id="btnMoveRight" value="->" /> <input type="button" id="btnMoveAllRight" value="=>" /> <input type="button" id="btnMoveLeft" value="<-" /> <input type="button" id="btnMoveAllLeft" value="<=" /> -------- <input type="button" id="btnMoveLeftAfter" value="<-" /> <input type="button" id="btnMoveAllLeftAfter" value="<=" /> <input type="button" id="btnClearLeft" value="清空左侧列表" /> <input type="button" id="btnMoveLeftSort" value="左移并排序" /></ div>< select id ="rightSel" multiple ="multiple"></ select></ body></ html>
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 【jQuery】jQuery操作DOM
- jQuery 的dom操作
- jQuery中的DOM操作
- jQuery中的DOM操作
- jQuery中的DOM操作
- jQuery DOM常见操作
- jQuery DOM操作
- jquery操作dom
- jQuery 的 DOM操作
- JQuery中的DOM操作
- Jquery Dom操作
- jQuery的DOM操作
- JQuery操作DOM
- Jquery操作DOM节点
- Jquery Dom操作
- JQuery的Dom操作
- JQuery操作DOM
- jQuery操作DOM
- Get和Post方法的区别
- 简单c语言实现unix shell【转载】
- 黑马程序员----JAVA基础之 BeanUtils
- ios 加速传感器UIAccelerometer
- 软件设计模式系列之二 FACTORY METHOD（工厂方法）
- JQuery操作Dom
- 欧拉函数
- hdu 4027 Can you answer these queries? 线段树 懒惰标记 单点更新妙用
- 从微信谈起，如何优化互联网APP心跳机制
- 决策树（decisions tree）和ID3算法
- uva 11461（水题）
- WINCE音量设置(系统音按键音)
- JQuery基本过滤选择器与表单对象过滤器
- 怎么在vs2005中加入wince5 模拟器
