jQuery的DOM操作小案例
Posted 凌晨三点
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery的DOM操作小案例相关的知识，希望对你有一定的参考价值。
案例一：下拉列表左右选择
<body> <div> <select style="width:60px" multiple size="10" id="leftID"> <option>选项A</option> <option>选项B</option> <option>选项C</option> <option>选项D</option> <option>选项E</option> </select> </div> <div style="position:absolute;left:100px;top:60px"> <input type="button" value="批量右移" id="rightMoveID" /> </div> <div style="position:absolute;left:100px;top:90px"> <input type="button" value="全部右移" id="rightMoveAllID" /> </div> <div style="position:absolute;left:220px;top:20px"> <select multiple size="10" style="width:60px" id="rightID"></select> </div> </body> <script type="text/javascript"> //双击右移 //定位左边的下拉框，同时添加双击事件 $("#leftID").dblclick(function() { //获取双击时选中的option标签 var $option = $("#leftID option:selected"); //将选中的option标签移动到右边的下拉框中 $("#rightID").append($option); }); //批量右移 //定位批量右移按钮，同时添加单击事件 $("#rightMoveID").click(function() { //获取左边下拉框中选中的option标签 var $option = $("#leftID option:selected"); //将选中的option标签移动到右边的下拉框中 $("#rightID").append($option); }); //全部右移 //定位全部右移按钮，同时添加单击事件 $("#rightMoveAllID").click(function() { //获取左边下拉框中所有的option标签 var $option = $("#leftID option"); //将选中的option标签移动到右边的下拉框中 $("#rightID").append($option); }); </script>
案例二：动态添加标签事件
<body> <table id="tableID" border="1" align="center" width="60%"> <tr> <th>用户名</th> <th>密码</th> <th>操作</th> </tr> <tbody id="tbodyID"></tbody> </table> <hr /> 用户名： <input type="text" id="usernameID" /> 密码： <input type="text" id="passwordID" /> <input type="button" value="增加" id="addID" /> </body> <script type="text/javascript"> //定位"增加"按钮，同时添加单击事件 $("#addID").click(function() { //获取用户名和密码的值 var username = $("#usernameID").val(); var password = $("#passwordID").val(); //去掉二边的空格 username = $.trim(username); password = $.trim(password); //如果用户名或密码没有填 if (username.length == 0 || password.length == 0) { //提示用户 alert("用户名或密码没有填"); } else { //创建1个tr标签 var $tr = $("<tr></tr>"); //创建3个td标签 var $td1 = $("<td>" + username + "</td>"); var $td2 = $("<td>" + password + "</td>"); var $td3 = $("<td></td>"); //创建input标签，设置为删除按钮 var $del = $("<input type=\'button\' value=\'删除\'>"); //为删除按钮动态添加单击事件 $del.click(function() { //删除按钮所有的行，即$tr对象 $tr.remove(); }); //将删除按钮添加到td3标签中 $td3.append($del); //将3个td标签依次添加到tr标签中 $tr.append($td1); $tr.append($td2); $tr.append($td3); //将tr标签添加到tbody标签中 $("#tbodyID").append($tr); //清空用户名和密码文本框中的内容 $("#usernameID").val(""); $("#passwordID").val(""); } }); </script>
案例三：全选反选
<body> <table border="1" align="center"> <tr> <th>状态</th> <th>用户名</th> </tr> <tbody> <tr> <td><input type="checkbox" /></td> <td>赵</td> </tr> <tr> <td><input type="checkbox" /></td> <td>钱</td> </tr> <tr> <td><input type="checkbox" /></td> <td>孙</td> </tr> </tbody> <tfoot> <tr> <td><input type="checkbox" /> 全选</td> <td><input type="button" value="全反选" /></td> </tr> </tfoot> </table> <script type="text/javascript"> //全选中和全取消 //定位tfoot中的全选复选框，同时添加单击事件 $("tfoot input:checkbox").click(function() { //获取该全选复选框的状态 var flag = this.checked; //如果选中 if (flag) { //将tbody中的所有复选框选中 $("tbody input:checkbox").attr("checked", "checked"); //如果未选中 } else { //将tbody中的所有复选框取消 $("tbody input:checkbox").removeAttr("checked"); } }); //全反选 //定位tfoot标签中的全反选按钮，同时添加单击事件 $("tfoot input:button").click( function() { //将tbody标签中的所有选中的复选框失效 $("tbody input:checkbox:checked").attr("disabled", "disabled"); //将tbody标签中的所有生效的复选框选中 $("tbody input:checkbox:enabled") .attr("checked", "checked"); //将tbody标签中的所有生效的复选框生效且设置为未选中 $("tbody input:checkbox:disabled").removeAttr("disabled") .removeAttr("checked"); }); </script> </body>
案例四：输入框暗影提示
<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .myClass { color: inactivecaption } </style> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <table border="1" align="center"> <tr> <th>用户名</th> <td><input type="text" value="输入用户名" /></td> </tr> </table> <script type="text/javascript"> //当浏览器加载web页面时 $(function() { //将文本框中的文本样式改变 $(":text").addClass("myClass"); }); //当光标定位文本框时 $(":text").focus(function() { //清空文本框中的内容 $(this).val(""); //删除文本框的样式 $(this).removeClass("myClass"); }); //当文本框失去焦点时 $(":text").blur(function() { //获取文本框中填入的内容 var content = $(this).val(); //去二边的空格 content = $.trim(content); //如果没填了内容 if (content.length == 0) { Jquery Mobile做的小案例，为啥在手机上运行速度很慢jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段