jQuery的DOM操作
- CSS-DOM操作
- 多选框案例
- 页面加载完毕触发方法
- 作业布置
- jQuery获取选中复选框的值
- jQuery控制checkbox被选中
- jQuery控制(全选/全不选/反选)
- jQuery动态添加删除用户
CSS-DOM操作
- 获取和设置元素的样式属性: css()
- 获取和设置元素透明度: opacity属性
- 获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是px; 如需要使用其它单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);
- 获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left, 该方法只对可见元素有效
<!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>
页面加载完毕触发方法
- 在页面加载完毕后, 浏览器会通过JavaScript为DOM元素添加事件
- 在常规的Javascript代码中, 通常使用 window.onload 方法, window.onload = function(){}
- 在jQuery中使用$(document).ready()方法
- 如图所示
| 方法 | window.onload | $(document).ready() |
|---|---|---|
| 执行时机 | 必须等待网页中的所有内容(包括图片)加载完毕后才能执行 | 网页中的所有DOM结构绘制完毕后就执行, 可能DOM元素关联的东西并没有加载完 |
| 编写个数 | 不能同时编写多个 | 能同时编写多个 |
| 简化写法 | 无 | $() |
测试代码
- window.onload() = function() {}
- $(document).ready(function(){})
- $(function)(){})
作业布置
jQuery获取选中复选框的值
<!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>
jQuery控制checkbox被选中
<!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>
jQuery控制(全选/全不选/反选)
<!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>
jQuery动态添加删除用户
<!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.创建trvar $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>
