day32-JQuery05已关闭评论
150 次浏览

A+

所属分类：Web前端

摘要

对多选框进行操作，输出选中的多选框的个数，并且把选中爱好的名称显示。

便宜好用的国外VPS推荐

jQuery05

9.作业

9.1homework01

对多选框进行操作，输出选中的多选框的个数，并且把选中爱好的名称显示。

day32-JQuery05

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>homework01</title>     <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>     <script type="text/javascript">         //对多选框进行操作，输出选中的多选框的个数比把选中爱好的名称显示         $(function () {             //绑定事件             $("button").click(function () {                 //选择所有的checkbox，再过滤                 var $input = $("input:checked");                 alert("选中的个数= " + $input.length)                 $input.each(function () {                     alert("值= " + this.value)                 })             })         })     </script> </head> <body> <input type="checkbox" name="sports" value="篮球" checked>篮球 <input type="checkbox" name="sports" value="排球">排球 <input type="checkbox" name="sports" value="羽毛球">羽毛球 <input type="checkbox" name="sports" value="乒乓球">乒乓球 <button>选中的个数</button> </body> </html>

day32-JQuery05

9.2homework02

根据给出的示意图，完成相应的功能

day32-JQuery05

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>homework02</title>     <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>     <script type="text/javascript">         $(function () {             //使单选下拉框的'2号'被选中             $("#b1").click(function () {                 //设置2号的属性值selected为true                 //$("#sid1 > option").eq(1).attr("selected", true)                 //或者                 $("#sid1").val("2号")              })              //使多选下拉框中的'2号'和'5号'被选中             $("#b2").click(function () {                 // //设置2号和5号的属性值selected为true                 // $("#sid2 > option").eq(1).attr("selected", true)                 // $("#sid2 > option").eq(4).attr("selected", true)                 //或者                 $("#sid2").val(["2号", "5号"])             })              // 使复选框的'复选2'和'复选4'被选中             $("#b3").click(function () {                 // 设置2号和4号的属性值checked为true                 // $("input[type='checkbox']").eq(1).attr("checked", true)                 // $("input[type='checkbox']").eq(3).attr("checked", true)                 //或者                 //注意val的值是value的                 $("input[type='checkbox']").val(["fx2", "fx4"])             })              //使单选框的'单选2'被选中             $("#b4").click(function () {                 //设置2号属性值checked为true                 // $("input[type='radio']").eq(1).attr("checked", true)                 //或者                 //注意：这里的val需要传数组！！                 $("input[type='radio']").val(["dx2"])             })              //打印已经被选中的值             $("#b5").click(function () {                 //获取所有选中的值                 var strVal = "";                 //1.下拉单选框                 strVal += "下拉单选框=" + $("#sid1 > option:checked").val();                 //2.多选下拉框                 strVal += "  多选下拉框=";                 $("#sid2 > option:checked").each(function () {                     strVal += this.value;                 })                 //3.复选框                 strVal += "  复选框=";                 $("input[type='checkbox']:checked").each(function () {                     strVal += this.value;                 })                 //4.单选框                 strVal += "  单选框=" + $("input[type='radio']:checked").val();                 alert(strVal);             })         })     </script> </head> <body> <button id="b1">使单选下拉框的'2号'被选中</button> <br/><br/> <button id="b2">使多选下拉框中的'2号'和'5号'被选中</button> <br/><br/> <button id="b3">使复选框的'复选2'和'复选4'被选中</button> <br/><br/> <button id="b4">使单选框的'单选2'被选中</button> <br/><br/> <button id="b5">打印已经被选中的值</button> <br/><br/> <select id="sid1">     <option>1号</option>     <option>2号</option>     <option>3号</option>     <option>4号</option>     <option>5号</option>     <option>6号</option> </select> &nbsp; <select id="sid2" multiple="multiple" size="7">     <option>1号</option>     <option>2号</option>     <option>3号</option>     <option>4号</option>     <option>5号</option>     <option>6号</option> </select> <br/> <input type="checkbox" name="fx" value="fx1">复选1 <input type="checkbox" name="fx" value="fx2">复选2 <input type="checkbox" name="fx" value="fx3">复选3 <input type="checkbox" name="fx" value="fx4">复选4 <br/> <input type="radio" name="dx" value="dx1">单选1 <input type="radio" name="dx" value="dx2">单选2 <input type="radio" name="dx" value="dx3">单选3 </body> </html>

day32-JQuery05

9.3homework03

根据给出的示意图，完成相应的功能

day32-JQuery05

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>homework03</title>     <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>     <script type="text/javascript">         $(function () {             //全选             $("#b1").click(function () {                 // 如果使用attr()方法会有问题：                 // 如果你点击全选按钮，会给所有复选框添加checked属性，如果之后你再取消某个复选框，                 // 重新点击全选按钮，浏览器不会选择之前被取消的框框，因为浏览器会认为这个框已经存在checked属性了                 // 因此不要使用这个-->$("input[name='sports']").attr("checked", "")                  // 简单地讲就是 prop("checked", true) 将选择的对象的状态设置为选中                 // prop("checked", false) 将选择的对象的状态设置为不选中                 $("input[name='sports']").prop("checked", true)             })              //全不选             $("#b2").click(function () {                 // prop("checked", false) 将选中的对象的状态设置为不选中                 $("input[name='sports']").prop("checked", false)             })              //反选             $("#b3").click(function () {                 //判断当前的选择框选择状态                 //遍历处理                 $("input[name='sports']").each(function () {                     if (this.checked) {                         $(this).prop("checked", false)                     } else {                         $(this).prop("checked", true)                     }                 })             })              //复选框的全选/全不选             $("input[name='All_notAll']").click(function () {                 //判断当前的All_notAll复选框的状态                 if (this.checked) {//表示希望全选                     $("input[name='sports']").prop("checked", true)                 } else {                     $("input[name='sports']").prop("checked", false)                 }             })         })     </script> </head> <body> 请选择你的爱好！<br/> <input type="checkbox" name="All_notAll">全选/全不选<br/> <input type="checkbox" name="sports" value="足球"/>足球 <input type="checkbox" name="sports" value="篮球"/>篮球 <input type="checkbox" name="sports" value="游泳"/>游泳 <input type="checkbox" name="sports" value="唱歌"/>唱歌<br/> <button id="b1">全选</button> <button id="b2">全不选</button> <button id="b3">反选</button> <button id="b4">提交</button> </body> </html>

day32-JQuery05

9.4homework04

使用jquery实现动态添加用户效果

day32-JQuery05

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>homework04</title>     <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>     <script type="text/javascript">          //完成点击删除用户信息的功能         function deleteUser($a) {             //先弹出一个确认对话框             var b = window.confirm("是否要删除" + $a.attr("id") + "用户信息?")             if (!b) {                 return false;             }             //获取a父节点的父节点tr             $a.parent().parent().remove();             return false;         }          $(function () {             //我们将初始化的用户也绑定一个事件             $("a").click(function () {                 //隐式传入this                 //调用deleteUser 时候，需要对this 包装成$(this)                 return deleteUser($(this));             })             /**              * 思路分析：              * 1.使用到jqueryDOM操作              * 2.添加的内容应该为表格的一行 table>tr              *   <tr>              *         <td>姓名</td>              *         <td>email</td>              *         <td>电话</td>              *         <td><a href="">delete</a></td>              *    </tr>              *  3.先逐步构建              *   先获得名字以及它所在的td              *   然后是email，td              *   然后是电话，td              *   最后是delete，td              *  4.构建一个tr，将前面的td放到tr中              *  5.tr放到table tbody中              */              //绑定事件             $("#b1").click(function () {                 //获取数据                 // var $data = $("input[type='text']");                  //创建名字及所在的td                 var $nameTd = $("<td/>");                 var nameVal = $("#name").val();                 $nameTd.append(nameVal)                  //创建email及所在的td                 var $emailTd = $("<td/>");                 var emailVal = $("#email").val();                 $emailTd.append(emailVal)                  //创建电话及所在的td                 var $telTd = $("<td/>");                 var tellVal = $("#tel").val();                 $telTd.append(tellVal)                  //创建delete及所在的td                 var $deleteTd = $("<td/>");                 //创建超链接                 var $a = $("<a/>");                 $a.html("Delete");                 //给超链接创建一个id属性，属性值为当前的name                 $a.attr("id", nameVal)                 //给超链接创建一个href属性                 $a.attr("href", "deleteEmp?id=" + nameVal)                 //完成点击删除的功能                 $a.click(function () {                     //如果返回的是false，就会停留在原页面，不会跳转                     return deleteUser($a)                 })                 $deleteTd.append($a)                  //创建tr并内部插入之前创建的td                 var $tr = $("<tr/>");                 $tr.append($nameTd)                 $tr.append($emailTd)                 $tr.append($telTd)                 $tr.append($deleteTd)                 //添加到表格中                 $("table tbody").append($tr)             })         })     </script> </head> <body> <center>     姓名：<input type="text" id="name"/>     email：<input type="text" id="email"/>     电话：<input type="text" id="tel"/><br/><br/>     <input id="b1" type="button" value="提交">     <hr/>     <table border="1" width="300">         <tr>             <td>姓名</td>             <td>email</td>             <td>电话</td>             <td></td>         </tr>         <tr>             <td>Tom</td>             <td>tom@tom.com</td>             <td>5000</td>             <td><a id="Tom" href="deleteEmp?id=Tom">Delete</a></td>         </tr>         <tr>             <td>Jerry</td>             <td>jerry@sohu.com</td>             <td>8000</td>             <td><a id="Jerry" href="deleteEmp?id=Jerry">Delete</a></td>         </tr>     </table> </center> </body> </html>

day32-JQuery05

便宜好用的国外VPS推荐