赞
踩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css-dom操作</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function () { $("#btn1").click(function () { var width = $("img").width(); alert("img的width值= " + width); //offset()的使用 var offset = $("img").offset(); alert("img的top值= " + offset.top); alert("img的left值= " + offset.left); }) }) </script> </head> <body> <br/> <img src="../image/beautiful.jpg" width="200"/><br/> <button id="btn1">获取图片信息</button> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选框案例实现</title> <style> div { text-align: center; } select { width: 80px; height: 170px; } </style> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> //思路: // (1)绑定事件 (2)选择对应的对象 (3)处理插入[内部插入/外部插入] $(function () { //1.点击--->把左边选中的移动到右边 $("#btn01").click(function () { //方式① // $("#select1 > option:selected").appendTo($("#select2")); //方式② 层级选择器的 > 可以忽略 // $("#select1 option:selected").appendTo($("#select2")); //方式③ $("#select1").children().eq(0).appendTo($("#select2")); }); //2.点击<---把右边选中的移动到左边 $("#btn03").click(function () { //方式① $("#select2 > option:selected").appendTo($("#select1")); //方式② 层级选择器的 > 可以忽略 // $("#select2 option:selected").appendTo($("#select1")); //方式③ // $("#select2").children().eq(0).appendTo($("#select1")); }); //3.点击===>把左边全部移动到右边 $("#btn02").click(function () { //方式① // $("#select1").children().each(function () { // $(this).appendTo($("#select2")); // }) //方式② $("#select1 > option").appendTo($("#select2")); }) //4.点击<===把右边全部移动到左边 $("#btn04").click(function () { //方式① // $("#select2").children().each(function () { // $(this).appendTo($("#select1")); // }) //方式② $("#select2 > option").appendTo($("#select1")); }) //双击左边的某个选项, 将其自动移动到右边 //(1)绑定事件 ,没有绑定事件不行的 $("#select1").dblclick(function () { $("#select1 option:selected").appendTo($("#select2")); }); //双击右边的某个选项, 将其自动移动到左边 $("#select2").dblclick(function () { $("#select2 option:selected").appendTo($("#select1")); }) }); </script> </head> <body> <div> <select id="select1" size="9" multiple="multiple"> <option value="选项1">选项1~</option> <option value="选项2">选项2~</option> <option value="选项3">选项3~</option> <option value="选项4">选项4~</option> <option value="选项5">选项5~</option> <option value="选项6">选项6~</option> <option value="选项7">选项7~</option> <option value="选项8">选项8~</option> <option value="选项9">选项9~</option> </select> <button id="btn01">---></button> <button id="btn02">===></button> <button id="btn03"><---</button> <button id="btn04"><===</button> <select id="select2" size="9" multiple="multiple"/> </div> </body> </html>
方法 | window.onload | $(document).ready() |
---|---|---|
执行时机 | 必须等待网页中的所有内容(包括图片)加载完毕后才能执行 | 网页中的所有DOM结构绘制完毕后就执行, 可能DOM元素关联的东西并没有加载完 |
编写个数 | 不能同时编写多个 | 能同时编写多个 |
简化写法 | 无 | $() |
测试代码
- window.onload() = function() {}
- $(document).ready(function(){})
- $(function)(){})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业1</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //1.绑定事件 $("#btn1").click(function () { //2.选择对象: 选择所有的checkbox -> 过滤 :checked $(":checkbox:checked").each(function () { //3.进行处理 alert($(this).val()); }); alert("被选中的个数= " + $(":checkbox:checked").length); }) }); </script> </head> <body> <input type="checkbox" name="sports" value="basketball"/>篮球 <input type="checkbox" name="sports" value="volleyball"/>排球 <input type="checkbox" name="sports" value="badminton"/>羽毛球 <input type="checkbox" name="sports" value="ping-pong"/>乒乓球 <input type="button" id="btn1" value="选中的个数"/> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业2</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //1.使单选下拉框的2号被选中 $("#btn1").click(function () { // $("#selectSingle option:eq(1)").attr("selected", true); 这样删除的时候比较麻烦,不推荐 // $("#selectSingle option:eq(1)")[0].selected = true; $("#selectSingle").val("2号"); }) //2.使多选下拉框选中的2号和5号被选中 $("#btn2").click(function () { // $("#selectMultiple option:eq(1)").attr("selected", true);//不推荐 // $("#selectMultiple option:eq(4)").attr("selected", true);//不推荐 // $("#selectMultiple option:eq(1)")[0].selected = true; // $("#selectMultiple option:eq(4)")[0].selected = true; $("#selectMultiple").val(["2号","5号"]); }) //3.使复选框的'复选2'和'复选4'被选中 $("#btn3").click(function () { // $(":checkbox:eq(1)").attr("checked", true);不推荐 // $(":checkbox:eq(3)").attr("checked", true);不推荐 // $(":checkbox:eq(1)")[0].checked = true; // $(":checkbox:eq(3)")[0].checked = true; $(":checkbox").val(["复选2", "复选4"]); }) //4.使单选框的'单选2'被选中 $("#btn4").click(function () { // $(":radio:eq(1)").attr("checked", true);不推荐 // $(":radio:eq(1)")[0].checked = true; $(":radio").val(["单选2"]);//这里要传一个数组, 否则不生效 }) //5.打印已经被选中的值 $("#btn5").click(function () { alert("单选下拉框被选中的值= " + $("#selectSingle option:selected").val()); $("#selectMultiple option:selected").each(function () { alert("多选下拉框被选中的值= " + $(this).val()); }) $(":checkbox:checked").each(function () { alert("复选框被选中的值= " + $(this).val()); }) alert("单选框被选中的值= " + $(":radio:checked").val()); }) }); </script> </head> <body> <button id="btn1">使单选下拉框的2号被选中</button><br/> <button id="btn2">使多选下拉框选中的2号和五号被选中</button><br/> <button id="btn3">使复选框的'复选2'和'复选4'被选中</button><br/> <button id="btn4">使单选框的'单选2'被选中</button><br/> <button id="btn5">打印已经被选中的值</button><br/> <select id="selectSingle"> <option value="1号">1号</option> <option value="2号">2号</option> <option value="3号">3号</option> <option value="4号">4号</option> <option value="5号">5号</option> </select> <select id="selectMultiple" size="9" multiple="multiple"> <option value="1号">1号</option> <option value="2号">2号</option> <option value="3号">3号</option> <option value="4号">4号</option> <option value="5号">5号</option> </select><br/> <input type="checkbox" name="checkbox" value="复选1">复选1 <input type="checkbox" name="checkbox" value="复选2">复选2 <input type="checkbox" name="checkbox" value="复选3">复选3 <input type="checkbox" name="checkbox" value="复选4">复选4<br/> <input type="radio" name="radio" value="单选1"/>单选1 <input type="radio" name="radio" value="单选2"/>单选2 <input type="radio" name="radio" value="单选3"/>单选3 </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业3</title> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //1.全选 $("#btn01").click(function () { //方法一:循环 $(":checkbox:gt(0)").each(function () { //我们不适用attr(), 容易出问题 --> prop //1.attr("checked",""), 如果没有checked就添加并设置为true; //2.如果有checked就不会再添加, 那么此时全选对取消勾选的复选框[此时checked为false]失效! $(this).attr("checked", "");//只会添加, 对checked为false的不能更改为true //1.如果没有checked就添加, 并设置为true //2.如果有checked, 就设置为true $(this).prop("checked", true);//不仅会添加,还会设置 //dom方法 this.checked = true; }) //方式二:不用循环 //把所有索引大于0的checkbox的状态设置为选中 $(":checkbox:gt(0)").prop("checked", true); }) //2.全不选 $("#btn02").click(function () { //方法一:循环 $(":checkbox:gt(0)").each(function () { //如果复选框有checked属性, 一律设置为false //如果没有, 即未被选中的情况下点击'全不选', 添加一个值为false的checked属性 $(this).prop("checked", false); //dom方法 this.checked = false; }) //方法二:不用循环 //把所有索引大于0的checkbox的状态设置为不选中 $(":checkbox:gt(0)").prop("checked", false); }); //3.反选 $("#btn03").click(function () { //这里必须循环 $(":checkbox:gt(0)").each(function () { //jquery方法 $(this).prop("checked", !this.checked); //dom方法 this.checked = !this.checked; }) }) //4.全选/全不选 $("#all").click(function () { //判断当前这个对象(<input type="checkbox" id="all"/>)的checked是否为true或false $(":checkbox:gt(0)").prop("checked", this.checked); //这里不推荐使用循环, 比较麻烦 $(":checkbox:gt(0)").each(function () { $(this).prop("checked", $("#all")[0].checked); }) }) }) </script> </head> <body> <h2>请选择您的爱好</h2> <input type="checkbox" id="all"/>全选/全不选<br/> <input type="checkbox" name="sports" value="football"/>足球 <input type="checkbox" name="sports" value="basketball"/>篮球 <input type="checkbox" name="sports" value="swim"/>游泳 <input type="checkbox" name="sports" value="sing"/>唱歌<br/> <input type="button" id="btn01" value="全选"/> <input type="button" id="btn02" value="全不选"/> <input type="button" id="btn03" value="反选"/> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业4</title> <style> div { text-align: center; } table { margin: auto; width: 500px; text-align: center; } </style> <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //我们将初始化的用户, 也绑定删除的事件 $("a").click(function () { return deleteUser($(this)); }) $("#submit").click(function () { /* 思路分析: <tr> <td>tom</td> <td>123@sohu.com</td> <td>123456</td> <td><a id="tom" href="deleteEmp?id=tom">Delete</a></td> </tr> (1)使用到jquery dom技术 (2)逐步构建td, usernameTd, emailTd, telTd, deleteTd ,其中的文本从输入框获取到 构建tr, 把前面的td加入到tr (3)添加内容/对象 到 table > tbody(层级选择器) */ //1.创建username td节点 var $usernameTd = $("<td/>"); var usernameVal = $("#username").val(); $usernameTd.append(usernameVal); //创建email td节点 var $emailTd = $("<td/>"); var emailVal = $("#email").val(); $emailTd.append(emailVal); //创建tel td节点 var $telTd = $("<td/>"); var telVal = $("#tel").val(); $telTd.append(telVal); //创建delete td节点 // <td><a id="tom" href="deleteEmp?id=tom">Delete</a></td> var $deleteTd = $("<td/>"); var $a = $("<a/>"); $a.attr("id", usernameVal); $a.attr("href", "deleteEmp?id=" + usernameVal); $a.html("Delete"); //完成点击删除功能 $a.click(function () { //专门写一个函数, 完成删除任务 //1.return false相当于终止符, return true相当于执行符 //2.return false在js中一般是用来取消默认动作的,比如单击了一个超链接, //出发了onclick事件,以外还要触发一个默认的事件比如执行页面的跳转, 所以如果 //想要取消默认事件的执行动作就可以return false //3.return false用来阻止表单提交或继续执行下面的代码 return deleteUser($a); }); $deleteTd.append($a); //2.创建tr var $tr = $("<tr/>"); $tr.append($usernameTd); $tr.append($emailTd); $tr.append($telTd); $tr.append($deleteTd); //将tr添加到table > tbody $("#table tbody").append($tr); }); //点击超链接, 完成删除某个用户的任务 function deleteUser($a) { var b = window.confirm("你确认要删除" + $a.attr("id") + "的信息吗?"); if (!b) { return false; } //继续处理删除 //1.通过$a, 找到父元素的父元素 tr $a.parent().parent().remove(); return false; } }) </script> </head> <body> <div> <h3>添加用户:</h3> 姓名: <input type="text" name="username" id="username"/> email: <input type="email" name="email" id="email"/> 电话: <input type="tel" name="tel" id="tel"/><br/> <input type="button" value="提交" id="submit"/> <hr/> </div> <table id="table" border="1" cellspacing="0"> <tr> <th>姓名</th> <th>email</th> <th>电话</th> </tr> <tr> <td>mary</td> <td>123@sohu.com</td> <td>123456</td> <td><a id="mary" href="deleteEmp?id=mary">Delete</a></td> </tr> <tr> <td>tom</td> <td>123@sohu.com</td> <td>123456</td> <td><a id="tom" href="deleteEmp?id=tom">Delete</a></td> </tr> </table> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。