注意本文涉及到的jQuery的全部基础知识点配套专栏的jQuery和JSON里面的文章看跟好
列一
对多选框进行操作, 输出选中的多选框的个数并且把选中爱好的 名称显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对多选框进行操作</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //页面加载完毕 //1. 绑定事件 //2. 选择对象 //3. 进行处理 $("#b1").click(function () { //思路：选择所有的checkbox -> 过滤 checked var $input = $("input[type='checkbox']:checked"); console.log("你选择的个数= " + $input.length); //显示名称, 遍历 $input $input.each(function () { //隐式this console.log("选择的爱好是= " + $(this).val()) }) }) }) </script> </head> <body> <h1>对多选框进行操作</h1> <input type="checkbox" name="hobby" value="篮球"/>篮球 <input type="checkbox" name="hobby" value="足球"/>足球 <input type="checkbox" name="hobby" value="网球"/>网球 <input type="checkbox" name="hobby" value="排球"/>排球 <input type="button" id="b1" value="点击测试"/> </body> </html>
列二
根据图片完成要求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据给出的示意图，完成相应的功能</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //1. 使单选下拉框的'2号'被选中 $("#input1").click(function () { //思路，怎么样才是表示选择了某个option //通过设置val, 表示选择 $("#one").val("2号"); }) //2. 使多选下拉框选中的'2号'和'5号'被选中 // 思路和上面类似 // 如何选择第二个button // input:eq(1) 表示选择第二个input对象 $("input:eq(1)").click(function () { $("#many").val(["5号","2号"]); }) //使复选框的'复选2'和'复选4'被选中 //思路和上面类似 $("input:eq(2)").click(function () { //这里小伙伴注意，val的值是 value属性 $("input[type='checkbox']").val(["check2","check4"]) }) //使单选框的'单选2'被选中 $("input:eq(3)").click(function () { $("input[type='radio']").val(["radio2"]); }) }) </script> </head> <body> <input type="button" id="input1" value="使单选下拉框的'2号'被选中"/><br> <input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br> <input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br> <input type="button" value="使单选框的'单选2'被选中"/><br> <br/> <select id="one"> <option>1号</option> <option>2号</option> <option>3号</option> </select> <select id="many" multiple="multiple" style="height:120px;"> <option selected="selected">1号</option> <option>2号</option> <option>3号</option> <option>4号</option> <option>5号</option> <option selected="selected">6号</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>
列三
根据给出的示意图，完成相应的功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据给出的示意图，完成相应的功能. homework03.html</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { //1. 点击按钮，完成全选 $("#CheckedAll").click(function () { //留一个小? 我们不使用 attr -> prop //$("input[name='items']").attr("checked", "") //1. 简单的讲就是prop("checked", true) 就将选择的对象的状态设置为选中 //2. prop("checked", false), 就将选择的对象的状态设置为未选中 $("input[name='items']").prop("checked", true); }) //2. 全不选 $("#CheckedNo").click(function () { //这里将选择的对象, 的状态设置为,未选中 $("input[name='items']").prop("checked", false); }) //3. 反 选 $("#CheckedRev").click(function () { //判断当前是不是选中状态, 进行遍历处理 $("input[name='items']").each(function () { //alert("当前的状态= " + this.checked) if(this.checked) { $(this).prop("checked", false) } else { $(this).prop("checked", true); } }) }) //4. 全选/全不选 $("#checkedAll_2").click(function () { //判断当前的<input type="checkbox" id="checkedAll_2"/>全选/全不选 状态 if(this.checked) {//表示希望全选 //把所有的name='items' 的checkbox的状态设置为选中 $("input[name='items']").prop("checked", true); } else { $("input[name='items']").prop("checked", false); } }) }) </script> </head> <body> <form method="post" action=""> 请选择您的爱好! <br><input type="checkbox" id="checkedAll_2"/>全选/全不选 <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="CheckedAll" value="全 选"/> <input type="button" id="CheckedNo" value="全不选"/> <input type="button" id="CheckedRev" value="反 选"/> <input type="button" id="send" value="提 交"/> </form> </body> </html>
列四
使用 JQuery 实现动态添加用户效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用 JQuery 实现动态添加用户效果</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> //点击删除超链接，完成删除某个用户的任务 /* <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a id="Jerry" href="deleteEmp?id=Jerry">Delete</a></td> </tr> */ function deleteUser($a) { //弹出一个确认的对话框 var b = window.confirm("你确认要删除 " + $a.attr("id") + " 用户信息"); if(!b){ return false; } //继续处理删除 //1. 通过$a 找到父tr $a.parent().parent().remove(); return false; } $(function () { //我们将初始化的用户，也绑定删除的事件 $("a").click(function () { //隐式传入this //调用deleteUser 时候，需要对this 包装成$(this) return deleteUser($(this)); }) $("#addUser").click(function () { /* 思路分析==> 代码[功能逐步实现(1) 添加 (2) 删除] 1. 使用到jquery dom 相关技术 2. 添加的内容/对象 到 table > tbody <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a id="Jerry" href="deleteEmp?id=Jerry">Delete</a></td> </tr> 3 如果去构建一个 上面的tr juqery对象 4.逐步构建 (1)nameTD, 名字从输入得到 (2)emailTD, telTD, deleteTD (3)构建 TR, 把前面的td, 加入. 5.将 tr , 加入 table tbody */ var $nameTD = $("<td/>"); var nameVal = $("#name").val(); $nameTD.append(nameVal); var $emailTD = $("<td/>"); var emailVal = $("#email").val(); $emailTD.append(emailVal); var $telTD = $("<td/>"); var telVal = $("#tel").val(); $telTD.append(telVal); //构建deleteTD var $deleteTD = $("<td/>"); var $a = $("<a/>"); $a.html("Delete"); $a.attr("id", nameVal); $a.attr("href", "deleteEmp?id=" + nameVal); //绑定了 完成点击删除的功能 $a.click(function (){ //专门写一个函数，完成删除任务 //解读：如果我们返回的false ,则表示放弃提交，页面就会停留在原页面 return deleteUser($a); }) $deleteTD.append($a); //创建tr对象 var $tr = $("<tr/>"); $tr.append($nameTD); $tr.append($emailTD); $tr.append($telTD); $tr.append($deleteTD); //将tr加入到table > tbody $("#usertable tbody").append($tr); }) }) </script> </head> <body> <center> <br><br> 添加用户:<br><br> 姓名: <input type="text" name="name" id="name"/> email: <input type="text" name="email" id="email"/> 电话: <input type="text" name="tel" id="tel"/><br><br> <button id="addUser">提交</button> <br><br> <hr> <br><br> <table id="usertable" border="1" cellpadding="5" cellspacing=0> <tbody> <tr> <th>姓名</th> <th>email</th> <th>电话</th> <th> </th> </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> </tbody> </table> </center> </body> </html>
td>
5000
Jerry
jerry@sohu.com
8000
