JavaWeb系列二十: jQuery的DOM操作下

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/>
&nbsp;&nbsp;<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>