JQuery 的几个应用
工资条：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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"> 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 () { //获得选中的左侧列表里的 选项 var $optsSelected = $("#leftSel option:selected"); $optsSelected.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); }); $("#btnClearLeft").click(function () { //删除后返回的就是被删除的节点，而且由JQuery对象封装 //var $removedOpts = $("#leftSel option").remove(); //alert($removedOpts.appendTo($("#rightSel"))); //$("#divBtns").remove(); }); $("#btnMoveLeftSort").click(function () { //获得选中的右侧列表里的 选项 var $optsSelected = $("#rightSel option:selected"); $optsSelected.appendTo($("#leftSel")); var sortedList = $("#leftSel option").sort(function (prev, next) { 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); //} }); }); </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>
左边右边动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>选择好友</title> <style type="text/css"> .lul{width:200px;height:300px;} .lul li{cursor:pointer;} #ulL{border:1px solid #000;float:left;} #ulR{border:1px solid #000; float:right;} </style> <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> //好友列表数据 var friList = [ { name: "孙燕姿", age: "19", gender: "男" }, { name: "刘德华", age: "29", gender: "女" }, { name: "本拉登", age: "19", gender: "未知" } ]; $(function () { var friListDiv = $("#ulL"); //左边的好友列表 $.map(friList, function (item) { friListDiv.append(//为好友列表追加子元素 li $("<li age='" + item.age + "'>" + item.name + "</li>").click(function () { //$(this).appendTo($("#ulR")).unbind("click");//将 当前 点击 的li对象 移动到 右侧列表，并取消它的单击事件方法 $(this).css({ position: "absolute" }).animate({ left: $("#ulR").position().left + 20 }).queue(function (next) { $(this).appendTo($("#ulR")).css({ position: "static" }); //next(); }); }) ); }); }); </script> </head> <body> <ul id="ulL" class="lul"> </ul> <ul id="ulR" class="lul"> </ul> </body> </html>
工资管理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>权限列表</title> <style type="text/css"> #tbList td{border:1px solid #000;padding:5px;} #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"> var jsonArr = [ { "id": 1, "name": "1刘德华", "eamil": "123@126.com", "gender": "男" }, { "id": 2, "name": "2刘德华", "eamil": "123@126.com", "gender": "女" }, { "id": 3, "name": "3刘德华", "eamil": "133@126.com", "gender": "不男不女" }, { "id": 4, "name": "4周连君", "eamil": "113@126.com", "gender": "女" }, { "id": 5, "name": "5徐捷", "eamil": "223@126.com", "gender": "男" }, { "id": 6, "name": "6刘宁", "eamil": "423@126.com", "gender": "男" } ]; //表格的Jquery对象 var $tbList; /* *加载数据列表 */ function loadListData() { $tbList = $("#tbList"); //循环数据数组 for (var i = 0; i < jsonArr.length; i++) { var per = jsonArr[i]; //取出当前数据 //创建行对象 var $tr = $("<tr><td>" + per.name + "</td><td>" + per.eamil + "</td><td>" + per.gender + "</td><td></td></tr>"); //创建 超链接 对象(JQuery对象)，并为它追加一个 点击方法 var $link = $("<a href='#'>删</a>").click(function () { //点击超链接时 this 就是当前被点击的超链接，调用它的父元素(td)的父元素(tr)的删除方法，就把超链接所在的行给删除了 $(this).parent().parent().remove(); }); //将 超链接 添加到 新创建行里的最后一个单元格里 $("td:last", $tr).append($link); //将新创建行 添加到 表格里 $tbList.append($tr); } } /* *dom树加载完后执行 */ $(function () { loadListData(); $("#btnAdd").click(function () { var $uN = $("#txtName"); var $uE = $("#txtEmail"); var $uT = $("#txtGender"); //创建行对象 var $tr = $("<tr><td>" + $uN.val() + "</td><td>" + $uE.val() + "</td><td>" + $uT.val() + "</td><td></td></tr>"); //创建 超链接 对象(JQuery对象)，并为它追加一个 点击方法 var $link = $("<a href='#'>删</a>").click(function () { //点击超链接时 this 就是当前被点击的超链接，调用它的父元素(td)的父元素(tr)的删除方法，就把超链接所在的行给删除了 $(this).parent().parent().remove(); }); //将 超链接 添加到 新创建行里的最后一个单元格里 $("td:last", $tr).append($link); //将新创建行 添加到 表格里 $tbList.append($tr); }); }); function doDel(id) { } </script> </head> <body> 姓名：<input type="text" id="txtName" /> email：<input type="text" id="txtEmail" /> 性别：<input type="text" id="txtGender" /><br /> <input id="btnAdd" type="button" value="提交" /> <br /> <table id="tbList"> <tr> <td>姓名</td> <td>email</td> <td>性别</td> <td>操作</td> </tr> </table> </body> </html>
样式操作--改变 添加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>样式操作</title> <style type="text/css"> .red{ background-color:Red; color:White;} .bigFont{font-size:77px; font-weight:bold;} </style> <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> var jsonArr = [ { "id": 1, "name": "1刘德华", "eamil": "123@126.com", "gender": "男" }, { "id": 2, "name": "2刘德华", "eamil": "123@126.com", "gender": "女" }, { "id": 3, "name": "3刘德华", "eamil": "133@126.com", "gender": "不男不女" }, { "id": 4, "name": "4周连君", "eamil": "113@126.com", "gender": "女" }, { "id": 5, "name": "5徐捷", "eamil": "223@126.com", "gender": "男" }, { "id": 6, "name": "6刘宁", "eamil": "423@126.com", "gender": "男" } ]; $(function () { $("#btnTest").click(function () { //$("#divTest").attr("class", "red"); $("#divTest").addClass("red"); }); $("#btnTest2").click(function () { //$("#divTest").attr("class", $("#divTest").attr("class") + " bigFont"); $("#divTest").addClass("bigFont"); }); $("#Button1").click(function () { //$("#divTest").attr("class", "red"); $("#divTest").removeClass("red"); }); $("#Button2").click(function () { //$("#divTest").attr("class", $("#divTest").attr("class") + " bigFont"); $("#divTest").removeClass("bigFont"); }); $("#Button3").click(function () { //$("#divTest").attr("class", $("#divTest").attr("class") + " bigFont"); $("#divTest").toggleClass("red"); }); $("#Button4").click(function () { $("div").wrap("<font style='font-size:66px;'></font>"); }); }); </script> </head> <body> <input id="btnTest" type="button" value="变色" /><input id="btnTest2" type="button" value="字体变大" /><br /> <input id="Button1" type="button" value="颜色变回来" /><input id="Button2" type="button" value="字体还原" /><br /> <input id="Button3" type="button" value="class切换" /><input id="Button4" type="button" value="wrap" /><br /> <div id="divTest"> <pre> 杨中科在线试听 主讲课程：呼叫中心项目、JQuery、如鹏网项目、站内搜索项目、Windows Phone 7开发 杨中科，CSDN学生大本营2009年度十佳老师。曾任职于微软中国、金蝶软件等知名IT企业。撰写了《自己动手写开发工具》、《程序员的SQL学习笔记》等技术图书。主导了金蝶EAS湖南烟草局SCM系统、字符终端图形库AHA3及开发工具AHAIDE、上海浦东发展银行图形前端等项目的开发，并且在中国工商银行批量平台、集中监控运维系统（部署于中国工商银行、中国农业银行、交通银行、北京银行、深圳发展银行等大中型银行）、力诺集团呼叫中心、新广源集团呼叫中心等项目中担任主力开发人员。 杨中科创办了为计算机初学者提供学习指导的公益性网站如鹏网（http://www.rupeng.com），运营两年多来，撰写的大量的学习方法的文章和《C语言也能干大事》等视频教程帮助无数的计算机初学者走出迷茫走入正确、快速发展的通道。收听杨老师的腾讯微博。 </pre> </div> </body> </html>
全选，全不选，反选，提交
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>节点复制</title> <style type="text/css"> #tbList td{border:1px solid #000;padding:5px;} #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"> var jsonArr = [ { "id": 1, "name": "1刘德华", "eamil": "123@126.com", "gender": "男" }, { "id": 2, "name": "2刘德华", "eamil": "123@126.com", "gender": "女" }, { "id": 3, "name": "3刘德华", "eamil": "133@126.com", "gender": "不男不女" }, { "id": 4, "name": "4周连君", "eamil": "113@126.com", "gender": "女" }, { "id": 5, "name": "5徐捷", "eamil": "223@126.com", "gender": "男" }, { "id": 6, "name": "6刘宁", "eamil": "423@126.com", "gender": "男" } ]; $(function () { var $name = $("#txtName"); $name.click(testForFun); //为文本框 的点击事件 添加方法 //var $copy = $name.clone(); //复制 文本框(浅克隆) var $copy = $name.clone(true); //复制 文本框(深克隆) $("#btnAdd").after($copy); //将文本框的副本 放在按钮后面 //为全选/全不选按钮追加点击事件 $("#chkAll").click(function () { $(":checkbox").attr("checked", this.checked); //直接将 chkAll 的选中状态设置到每个复选框 }); //为 全选 按钮追加点击事件 $(":button[value='全 选']").click(function () { $(":checkbox").attr("checked", "true"); }); //$("#btnNotAll").click(function () { // $(":checkbox").attr("checked", false); //}) //为 全不选 按钮追加点击事件 $(":button[value='全不选']").click(function () { $(":checkbox").removeAttr("checked"); //$(":checkbox").attr("checked", false); }); //为 反选 按钮追加点击事件 $(":button[value='反 选']").click(function () { $(":checkbox[id!=chkAll]").each(function (index, item) { item.checked = !item.checked; }); }); //为 提交 按钮追加点击事件 $(":button[value='提 交']").click(function () { var allValues = ""; $(":checkbox[id!=chkAll]:checked").each(function (i, item) { allValues += item.value+","; }) alert(allValues); }); }); function testForFun() { alert(new Date()); } </script> </head> <body> 姓名：<input type="text" id="txtName" value="123" /> email：<input type="text" id="txtEmail" /> 性别：<input type="text" id="txtGender" /><br /> <input id="btnAdd" type="button" value="提交" /> <br /> <fieldset style="font-size:24px;"> <legend>请用心选择</legend> 请选择您的爱好：<br /> <input id="chkAll" type="checkbox"/>全选/全部选<br /> <input id="Checkbox1" type="checkbox" value="凤姐" />凤姐 <input id="Checkbox2" type="checkbox" value="芙蓉姐姐"/>芙蓉姐姐 <input id="Checkbox3" type="checkbox" value="小翠翠" />小翠翠 <input id="Checkbox4" type="checkbox" value="小月月" />小月月<br /> <input type="button" value="全 选" /> <input type="button" value="全不选" /> <input type="button" value="反 选" /> <input type="button" value="提 交" /> </fieldset> </body> </html>
l不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件
View Code
show()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换 $(":button[value=show]").click(function() { $("div").show(); }); $(":button[value=hide]").click(function() { $("div").hide(); }); 如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以使用三个内置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery动画函数中需要速度的地方一般也可以使用这个三个值。toggle、slideDown、slideUp --------------------------------------------------------- 动画函数都可以传入回调函数
解除 删除 添加事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>事件操作</title> <style type="text/css"> .red{ background-color:Red; color:White;} .bigFont{font-size:77px; font-weight:bold;} #bigDiv{border:1px solid #000; width:500px; height:500px;} #smalldiv{border:1px solid #000; width:50%; height:50%;} </style> <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnTest").click(function () { //$("#divTest").click(test); //$("#divTest").click(test22); $("#divTest").bind("click", test); }); $("#btnTest2").click(function () { $("#divTest").unbind("click", test); }); //div事件 $("#bigDiv").mouseenter(function () { alert("#bigDiv,enter"); }).mouseover(function () { alert("#bigDiv,over");
