JQuery 的几个简单实现示例
来源：互联网 发布：js mouseout 编辑：程序博客网 时间：2024/05/20 18:17
几种常见选择器的练习例题 熟练使用JQuery操作表单元素
一、实现表格 隔行变色（例题都引入了css做表单的样式设置）
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //1. 点击所有的 p 节点, 能够弹出其对应的文本内容 $("p").click(function(){ alert("^^["+this.innerHTML+"]"); }); //2. 使第一个 table 隔行变色（从第一行开始变） $("table:first tr:even").css("background-color","#00ff00"); //2. 使二个 table 隔行变色（从第二行开始变） $("table:eq(1) tr:odd").css("background-color","#ff0000"); //3. 点击 button, 弹出 checkbox 被选中的个数 $("button").click(function(){ alert($(":checked").length); }); }); </script></head><body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <table> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第二行</td><td>第二行</td> </tr> <tr> <td>第三行</td><td>第三行</td> </tr> <tr> <td>第四行</td><td>第四行</td> </tr> <tr> <td>第五行</td><td>第五行</td> </tr> <tr> <td>第六行</td><td>第六行</td> </tr> </table> <br/> <hr/> <table> <tr> <td>第一行</td><td>第一行</td> </tr> <tr> <td>第二行</td><td>第二行</td> </tr> <tr> <td>第三行</td><td>第三行</td> </tr> <tr> <td>第四行</td><td>第四行</td> </tr> <tr> <td>第五行</td><td>第五行</td> </tr> <tr> <td>第六行</td><td>第六行</td> </tr> </table> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <input type="checkbox" name="test" /> <button>您选中的个数</button></body></html>效果如下：
二、checkbox实现全选 全不选 反选
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){ //全选按钮 $("#checkedAllBtn").click(function(){ $(":checkbox").prop("checked",true); }); //全不选按钮 $("#checkedNoBtn").click(function(){ $(":checkbox").prop("checked",false); }); //反选按钮 $("#checkedRevBtn").click(function(){ var $checkBox=$("input[name]"); $checkBox.each(function(){ this.checked=!this.checked; }); $("#checkedAllBox").prop("checked",($("input[name]:checked").length==$("input[name]").length)); }); //提交按钮 $("#sendBtn").click(function(){ var $checkBox=$("input[name]:checked"); $checkBox.each(function(){ alert(this.value); }); }); //全选/全不选 复选框 $("#checkedAllBox").click(function(){ $("input[name]").prop("checked",this.checked); }); //全选/全不选复选框与items状态同步 $("input[name]").click(function(){ $("#checkedAllBox").prop("checked",($("input[name]:checked").length==$("input[name]").length)); });});</script></head><body><form method="post" action=""> 你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br /> <input type="button" id="checkedAllBtn" value="全 选" /> <input type="button" id="checkedNoBtn" value="全不选" /> <input type="button" id="checkedRevBtn" value="反 选" /> <input type="button" id="sendBtn" value="提 交" /></form></body></html>效果如下：
三、实现表单选择
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript">// 第一步，一定要先引入jquery文件// 第二步：书写页面加载完成之后$(function() {// 设置单选的下拉列表第三个被选中//给第一个按钮绑定单击事件$("input[type='button']:eq(0)").click(function(){ $("#single").val(['s3']);});// 设置多选的下拉列表同时选中第二个和第四个// 给第二个按钮绑定单击事件$("input[type='button']:eq(1)").click(function(){ $("#multiple").val(['x2','x4']);});// 给第三个按钮绑定单击事件// 设置多选框的2号和4号被选中$("input[type='button']:eq(2)").click(function(){ $(":checkbox").val(['check2','check4']);});// 给第四个按钮绑定单击事件// 设置单选框2号被选中$("input[type='button']:eq(3)").click(function(){ $(":radio").val(['radio2']);});//打印所有被选中的值 低五个按钮$("input[type='button']:eq(4)").click(function(){ $(":checked").each(function(){ alert(this.value); });});});</script></head><body><input type="button" value="使单选下拉框的'选择3号'被选中" /><input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中" /><br><input type="button" value="使多选框的'多选2'和'多选4'被选中" /><input type="button" value="使单选框的'单选2'被选中" /><br><input type="button" value="打印已经被选中的值"><br><br /><select id="single" name="singlecheck"> <option value="s1">选择1号</option> <option value="s2">选择2号</option> <option value="s3">选择3号</option></select><select id="multiple" multiple="multiple" name="multiplecheck" style="height: 120px;"> <option selected="selected" value="x1">选择1号</option> <option value="x2">选择2号</option> <option value="x3">选择3号</option> <option value="x4">选择4号</option> <option selected="selected" value="x5">选择5号</option></select><br /><br /><input type="checkbox" name="c" value="check1" /> 多选1<input type="checkbox" name="c" value="check2" /> 多选2<input type="checkbox" name="c" value="check3" /> 多选3<input type="checkbox" name="c" value="check4" /> 多选4<br /><input type="radio" name="r" value="radio1" /> 单选1<input type="radio" name="r" value="radio2" /> 单选2<input type="radio" name="r" value="radio3" /> 单选3</body></html>效果如下：
四、将下拉框左边选中的移动到右边 右边选中的移动到左边
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"> select { width: 100px; height: 140px; } div { width: 130px; float: left; text-align: center; }</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){ $("button:eq(0)").click(function(){ //获取左边的下拉框被选中的并移动选中的到右边 $("select[name='sel01']>option:selected").appendTo("select:eq(1)"); }); //获取左边的下拉框所有并移动所有到右边 $("button:eq(1)").click(function(){ $("select:eq(0)>option").appendTo("select:eq(1)"); }); //获取右边的下拉框被选中的并移动选中的到左边 $("button:eq(2)").click(function(){ $("select[name='sel02']>option:selected").appendTo("select:eq(0)"); });//获取右边的下拉框所有并移动到左边 $("button:eq(3)").click(function(){ $("select:eq(1)>option").appendTo("select:eq(0)"); }); });</script></head><body><div id="left"> <select multiple="multiple" name="sel01"> <option value="opt01">选项1</option> <option value="opt02">选项2</option> <option value="opt03">选项3</option> <option value="opt04">选项4</option> <option value="opt05">选项5</option> <option value="opt06">选项6</option> <option value="opt07">选项7</option> <option value="opt08">选项8</option> </select> <button>选中添加到右边</button> <button>全部添加到右边</button></div><div id="rigth"> <select multiple="multiple" name="sel02"> </select> <button>选中删除到左边</button> <button>全部删除到左边</button></div></body></html>效果如下：
五、添加或者从表格中删除对象
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="styleB/css.css" /><script type="text/javascript" src="../../script/jquery-1.7.2.js"></script><script type="text/javascript"> $(function(){ function deleteRow(){ var $row=$(this).parent().parent(); var name = $row.find("td").first().html(); var result = confirm("你确定要 删除 [" + name + "] 吗？") // alert(result); // 如果用户点击了确认。就可以将所在行删除 if (result) { //remove方法将tr标签从页面中删除 $row.remove(); } // 阻止标签的默认行为 return false; }; $("a").click(deleteRow); $("#addEmpButton").click(function(){ // 1.获取文本框里输入的内容，name，email，salary var nameText = $("#empName").val(); var emailText = $("#email").val(); var salaryText = $("#salary").val();// alert("姓名：" + nameText + ",邮件：" + emailText+",工资：" + salaryText); var $newTrObj = $("<tr><td>" + nameText + "</td><td>" + emailText + "</td><td>" + salaryText + "</td><td><a href='delete=1234'>" + "Delete</a></td></tr>"); // 把新创建的tr标签对象添加到第一个table中 $newTrObj.appendTo("#employeeTable"); // 查找最后一个创建的a标签对象 // $("a:last"); // 通过当前行对象，查找后代元素中a标签对象 $newTrObj.find("a").click(deleteRow); }); });</script></head><body><table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr></table><div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name: </td> <td class="inp"> <input type="text" name="empName" id="empName" /> </td> </tr> <tr> <td class="word">email: </td> <td class="inp"> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td class="word">salary: </td> <td class="inp"> <input type="text" name="salary" id="salary" /> </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table></div></body></html>效果如下：
0 0
- JQuery 的几个简单实现示例
- Makefile的几个简单示例
- jQuery简单的拖动效果实现原理及示例
- 几个简单的jQuery使用方法
- synchronized(this)的几个简单示例
- synchronized(this)的几个简单示例
- synchronized(this)的几个简单示例
- jQuery实现的几个小游戏
- 几个简单的jQuery扩展函数
- jquery和js的几个简单例子
- 简单模仿jquery的几个特性
- 几个简单的jquery知识点练习
- jQuery表单插件AjaxForm的简单示例
- jQuery 克隆对象的简单示例
- 使用jQuery的ajax功能简单示例
- jQuery简单的Ajax调用示例
- 最简单的jquery插件开发示例
- jQuery简单示例 一
- Activity横竖屏切换，Android游戏，电子书都是非常重要的
- PHP内核--探究内存管理与缓存机制
- php被遗忘的一些功能强大的字符串处理函数
- 定制Hibernate的PropertyAccessor实现XML的反序列化
- android:常用权限
- JQuery 的几个简单实现示例
- 快速排序
- 2016/10/23
- Linux -- 进程间通信之信号量
- struts2文件上传突破2M大小限制的问题
- 自考宏观回顾
- Linux C/C++ 内存泄漏检测工具：Valgrind
- C语言习题
- Canada Cup 2016-D. Contest Balloons(优先队列)
