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.创建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>