jquery技术学习2

news2025/1/22 16:55:59

移动节点

<!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 () {
            //****使用外部插入法 把反恐li移动天津后
            $("#b1").click(function () {
                $("#tj").after($("#fk"));
            })

            //****使用内部插入法 把反恐li移动天津后
            $("#b2").click(function () {
                $("#tj").append($("#fk"));
            })

        })
    </script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="tj" name="tianjin">天津</li>
</ul>

您爱好的游戏:<br>
<ul id="game">
    <li id="fk" name="fakong">反恐</li>
    <li id="cq" name="chuangqi">传奇</li>
</ul>
<input type="button" id="b1" value="使用after插入法 把反恐li移动天津后"/><br/><br/>
<input type="button" id="b2" value="使用append插入法 把反恐li移动天津后"/><br/><br/>
</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 () {
            //*****删除所有p
            $("#b1").click(function () {
                $("p").remove();
            })
            //***所有p清空
            $("#b2").click(function () {
                $("p").empty();
            })
            //****删除上海这个li
            $("#b3").click(function (){
                $("#sh").remove();
            })
        });
    </script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="tj" name="tianjin">天津</li>
</ul>

您爱好的游戏:<br>
<ul id="game">
    <li id="fk" name="fakong">反恐</li>
    <li id="cq" name="chuangqi">传奇</li>
</ul>

<p>Hello</p> how are <p>you?</p>


<p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>

<input type="button" value="删除所有p" id="b1"/>
<input type="button" value="所有p清空" id="b2"/>
<input type="button" value="删除上海这个li" id="b3"/>
</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. 将 p 替换成 button
            //$("p").replaceWith("<input type='button' id='my' value='我的按钮'/>")

            //2.将p 替换成 超链接
            //$("p").replaceWith("<a href='http://www.baidu.com'>点击到百度</a><br/>");

            //3. 使用对象来进行替换
            var $button = $("<input type='button' id='my' value='我的按钮~'/>");
            $button.click(function (){
                alert("ok ~~~");
            })
            $("p").replaceWith($button);
        });
    </script>
</head>
<body>
<h1>节点替换</h1>
<p>Hello</p>
<p>jquery</p>
<p>World</p>
</body>
</html>

在这里插入图片描述

val函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>val()课堂练习</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //单独的一个测试代码
            // $("#b1").click(function (){
            //     alert("默认值=" + this.defaultValue);
            // })

            //1.给b1绑定一个获取焦点事件
            //2.当用户把光标定位到输入框b1, 该事件就会被触发
            $("#b1").focus(function (){
                //获取-判断
                //获取到当前值
                var currentVal = $(this).val();
                //如果当前值就是默认值, 就清空, 让用户输入自己的值
                if(currentVal == this.defaultValue) {
                    $(this).val("");
                }
            })

            //1. 给b1绑定一个失去焦点事件 blur
            //2. 当用户的光标离开这个输入框,就会触发
            $("#b1").blur(function (){
                //获取当前值
                var currentVal = $(this).val();
                //判断如果当前值为"", 说明用户没有输入内容
                //就恢复提示默认信息
                if(currentVal == "") {
                    $(this).val(this.defaultValue);
                }
            })

        })
    </script>
</head>
<body>
<input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br>
<input type="password" value="" id="b2"/><br>
<input type="button" value="登陆" id="b3"/>
</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>
        $(function () {

            //点击p, 弹出文本信息
            $("p").click(function () {
                //隐式的传入this->p的dom对象
                alert("段落的内容= " + $(this).text())
            })
            //克隆p, 插入到按钮后面
            //老韩解读
            //1. $("p").clone() 表示克隆p元素，但是没有复制事件
            //2. $("p").clone(true) 表示克隆p元素，同时复制事件
            $("p").clone(true).insertAfter($("button"));

        })
    </script>
</head>
<body>
<button>保存</button>
<br><br><br><br><br>
///<br>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>
</html>

在这里插入图片描述

创建节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建节点-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        $(function () {
            //添加重庆li到上海下(使用dom的传统方法)
            $("#b1").click(function () {
                //1. 创建重庆li
                var cq_li = document.createElement("li");
                //2. 设置属性和内容
                cq_li.setAttribute("id", "cq");
                cq_li.setAttribute("name", "chongqing");
                cq_li.innerText = "重庆";
                //3. 添加到指定元素后面
                document.getElementById("sh").append(cq_li);
            })

            //*****添加重庆li到 上海下-jquery完成添加节点
            $("#b2").click(function () {
                //创建好重庆li
                var $cq_li = $("<li id=\"cq\" name=\"chongqing\">重庆~</li>");
                //内部插入法append
                //$("#sh").append($cq_li);
                //外部插入法
                $("#sh").after($cq_li);//老韩推荐...
                //$cq_li.insertAfter($("#sh"));
            })


            //*** 添加成都li到 北京前
            $("#b3").click(function () {
                //创建成都li
                var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都</li>");
                //添加到北京li前面-老韩玩一把[感受外部插入和内部插入区别]
                //$("#bj").prepend($cd_li);//内部插入
                $("#bj").before($cd_li);//外部插入
            })

            //*** 添加成都li到 北京和上海之间
            $("#b4").click(function () {
                //创建成都li
                var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都~~~~</li>");
                //外部插入
                //$("#bj").after($cd_li);
                $("#sh").before($cd_li);
            })

            //*** 添加成都li到 吉林前面
            $("#b5").click(function () {
                //创建成都li
                var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都@@@###</li>");
                //外部插入
                $("#jl").before($cd_li);//老韩推荐
                //$cd_li.insertBefore($("#jl"));
            })

        })
    </script>
</head>
<body>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="shanghai">上海</li>
    <li id="jl" name="jilin">吉林</li>
    <li id="my" name="mianyang">绵阳</li>
</ul>

<input type="button" id="b1" value="添加重庆li到 上海下(使用dom的传统方法)"/><br/><br/>
<input type="button" id="b2" value="添加重庆li到 上海下"/><br/><br/>
<input type="button" id="b3" value="添加成都li到 北京前"/><br/><br/>
<input type="button" id="b4" value="添加成都li到 北京和上海之间"/><br/><br/>
<input type="button" id="b5" value="添加成都li到 吉林前面"/><br/>

</body>
</html>

在这里插入图片描述

css的dom对象

<!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 (){
            $("#b1").click(function (){
                var width = $("img").width();
                alert("width=" + width);
                //offset
                var offset = $("img").offset();
                alert("img的 top = " + offset.top);
                alert("img的 left = " + offset.left);
            })
        })
    </script>
</head>
<body>
<br/><br/><br/>
hello,world~<img src="../image/5.png" width="200">
<button id="b1" type="button">获取图片信息</button>
</body>
</html>

在这里插入图片描述

查找节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找节点</title>
    <style type="text/css">
        div {
            width: 140px;
            height: 140px;
            margin: 20px;
            float: left;
            border: #000 1px solid;
        }

        .one {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取 class 和设置 class 都可以使用 attr() 方法来完成.(给id 为first添加 .one 样式)
            $("#b1").click(function (){
                $("#first").attr("class", "one");
            })
            //追加样式: addClass()
            $("#b2").click(function (){
                $("#first").addClass("one");
            })

            //移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
            $("#b3").click(function (){
                $("#first").removeClass();
            })

            //切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
            $("#b4").click(function (){
                $("#first").toggleClass("one");
            })

            //判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
            $("#b5").click(function (){
                alert($("#first").hasClass("one"));
            })
        });
    </script>
</head>
<body>
<input type="button" value="获取 class 和设置 class 都可以使用 attr() 方法来完成(给id 为first添加 .one 样式)" id="b1"/><br/><br/>
<input type="button" value="追加样式: addClass() (给id 为first添加 .one 样式)" id="b2"/><br/><br/>
<input type="button" value="移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给id 为first删除 .one 样式) " id="b3"/><br/><br/>
<input type="button"
       value="切换样式: toggleClass() (给id 为first切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它"
       id="b4"/><br/><br/>
<input type="button"
       value="判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false"
       id="b5"/><br/><br/>
<div id="first">first</div>
<div id="second">second</div>
</body>
</html>

在这里插入图片描述

节点遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用遍历节点方法-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 60px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //**查找所有子元素（class 为 one 的div的子元素)
            $("#b1").click(function () {

                //我们可以使用这样的方式$("div[class='one']") 来选择
                //class 为 one 的div
                $("div[class='one']").children().each(function () {
                    alert("子div的内容是~~~ " + $(this).text());
                })

                // $("div.one").children().each(function (){
                //     alert("子div的内容是= " + $(this).text());
                // })
                //指定获取到第几个子元素, eq(1) 表示得到第2个子元素
                //alert($("div.one").children().eq(1).text());

            })

            //***获取后面的同辈div元素（class 为 one 的div的)
            $("#b2").click(function () {
                //老师解读
                //1. $("div.one") 选择到 class = one 的 div
                //2. nextAll() 获取到后面所有的同辈元素
                //3. filter("div"), 获取到后面所有的同辈元素, 进行过滤，只得到div
                //4. each 遍历
                $("div.one").nextAll().filter("div").each(function () {
                    alert("后面同辈div的内容是= " + $(this).text());
                })

                //如果我们希望得到后面同辈元素的第几个，可以eq
                //获取到后面同辈div元素的第2个
                alert("后面同辈div元素的第2个的内容=" +
                    $("div.one").nextAll().filter("div").eq(1).text());//aaaa..

                //如果我们希望得到的是紧邻的面同辈元素
                alert("紧邻的面同辈元素=" +
                    $("div.one").next().text());//ttt...
            })

            //**获取前面的同辈div元素（class 为 one 的div的)
            $("#b3").click(function () {
                //遍历
                // $("div.one").prevAll().filter("div").each(function (){
                //     alert("div的内容= " + $(this).text());
                // })

                //得到前面的同辈元素第4个
                //$("div.one").prevAll().eq(3);
                //得到前面的紧邻同辈元素
                alert($("div.one").prev().text())//ccccc
            })
            //**获取所有的同辈div元素（class 为 one 的div的)
            $("#b4").click(function () {
                $("div.one").siblings().filter("div").each(function () {
                    alert("同辈div text= " + $(this).text())
                })
            })

        })
    </script>
</head>
<body>
<input type="button" value="查找所有子元素 (class 为 one 的div的)" id="b1"/><br/><br/>
<input type="button" value="获取后面的同辈元素 (class 为 one 的div的)" id="b2"/><br/><br/>
<input type="button" value="获取前面的同辈元素 (class 为 one 的div的)" id="b3"/><br/><br/>
<input type="button" value="获取所有的同辈元素 (class 为 one 的div的)" id="b4"/>
<hr/>
<div>
    ccccccc
</div>

<p class="one">
    ccccccc
</p>

<div class="one">
    <div id="one">
        XXXXXXXXX one
    </div>

    <div id="two">
        XXXXXXXXX two
    </div>

    <div id="three">
        XXXXXXXXX three
    </div>

    <div id="four">
        XXXXXXXXX four
    </div>
</div>
<div>
    tttttttttt
</div>
<div>
    aaaaaaa
</div>
<div>bbbbbb</div>
<p>hello, pp</p>
</body>
</html>

在这里插入图片描述

多选框应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选框应用</title>
    <style type="text/css">

        BODY {
            font-size: 12px;
            margin: 0px 0px 0px 0px;
            overflow-x: auto;
            overflow-y: auto;
            background-color: #B8D3F4;
        }

        .default_input {
            border: 1px solid #666666;
            height: 18px;
            font-size: 12px;
        }

        .default_input2 {
            border: 1px solid #666666;
            height: 18px;
            font-size: 12px;
        }

        .nowrite_input {
            border: 1px solid #849EB5;
            height: 18px;
            font-size: 12px;
            background-color: #EBEAE7;
            color: #9E9A9E;
        }

        .default_list {
            font-size: 12px;
            border: 1px solid #849EB5;
        }

        .default_textarea {
            font-size: 12px;
            border: 1px solid #849EB5;
        }

        .nowrite_textarea {
            border: 1px solid #849EB5;
            font-size: 12px;
            background-color: #EBEAE7;
            color: #9E9A9E;
        }

        .wordtd5 {
            font-size: 12px;
            text-align: center;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #b8c4f4;
        }

        .wordtd {
            font-size: 12px;
            text-align: left;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #b8c4f4;
        }

        .wordtd_1 {
            font-size: 12px;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #516CD6;
            color: #fff;
        }

        .wordtd_2 {
            font-size: 12px;
            text-align: right;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #64BDF9;
        }

        .wordtd_3 {
            font-size: 12px;
            text-align: right;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #F1DD34;
        }

        .inputtd {
            font-size: 12px;
            vertical-align: top;
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            padding-left: 3px;
        }

        .inputtd2 {
            text-align: center;
            font-size: 12px;
            vertical-align: top;
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            padding-left: 3px;
        }

        .tablebg {
            font-size: 12px;
        }

        .tb {
            border-collapse: collapse;
            border: 1px outset #999999;
            background-color: #FFFFFF;
        }

        .td2 {
            line-height: 22px;
            text-align: center;
            background-color: #F6F6F6;
        }

        .td3 {
            background-color: #B8D3F4;
            text-align: center;
            line-height: 20px;
            width: 100px;
        }

        .td4 {
            background-color: #F6F6F6;
            line-height: 20px;
        }

        .td5 {
            border: #000000 solid;
            border-right-width: 0px;
            border-left-width: 0px;
            border-top-width: 0px;
            border-bottom-width: 1px;
        }

        .tb td {
            font-size: 12px;
            border: 2px groove #ffffff;
        }


        .noborder {
            border: none;
        }

        .button {
            border: 1px ridge #ffffff;
            line-height: 18px;
            height: 20px;
            width: 45px;
            padding-top: 0px;
            background: #CBDAF7;
            color: #000000;
            font-size: 9pt;
        }

        .textarea {
            font-family: Arial, Helvetica, sans-serif, "??";
            font-size: 9pt;
            color: #000000;
            border-bottom-width: 1px;
            border-top-style: none;
            border-right-style: none;
            border-bottom-style: solid;
            border-left-style: none;
            border-bottom-color: #000000;
            background-color: transparent;
            text-align: left
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        //关于页面加载完毕后, 触发的方法 的几种写法
        //1. js 的原生方式
        // window.onload = function () {
        //     alert("页面加载完毕后。。")
        // }
        //2.方式 jquery方式
        // $(document).ready(function () {
        //     alert("页面加载完毕后。。方式2")
        // })
        //3. 上面的方式可以简化写法
        // $(function () {
        //     alert("页面加载完毕后。。方式3")
        // })

        $(function (){
            //全部移动右边 => 你的编程思维，编程体系 =》 不会自动生成 5,10
            //不思考-> 基础 -> 提升 level
            //(1) 绑定事件 (2) 选择对应的对象 (3) 处理 插入[内部插入/外部插入]
            $("#add_all").click(function () {
                //老韩解读: "#first > option" => 层级选择器
                //
                $("#first > option").appendTo($("#second"));
            })

            //选中的移到右边
            $("#add").click(function () {
                //选择对象
                $("#first > option:selected").appendTo($("#second"));
                //原生 js ->jquery[库, 锋利的js库]-> vue[封装度]
            })

            //双击移到右边
            $("#first").dblclick(function (){
                //选择对象 -> 隐式传入 this (dom) -> $(this)jquery.appendTo()
                //刚才的错误是因为 $(this) 表示的是 select
                $("#first > option:selected").appendTo($("#second"));
            })

            //全部移动左边
            //快速实现, 就是前面的一个反向操作
            $("#remove_all").click(function () {
                $("#second > option").appendTo($("#first"));
            })

            //选中的移到左边
            $("#remove").click(function () {
                //$("#second > option:selected") 层级选择器 > 可以省略
                $("#second option:selected").appendTo($("#first"));
            })

            //双击移到左边
            $("#second").dblclick(function () {
                $("#second option:selected").appendTo($("#first"));
            })

        })
    </script>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:50px 0px 0px 50px; width:350px; height:260px; background-color:#E6E6E6;">
    <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
           style="margin:15px 0px 0px 15px;">
        <tr>
            <td width="126">
                <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
                <select name="first" size="10" multiple="multiple" class="td3" id="first">
                    <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>
                </select>
            </td>
            <td width="69" valign="middle">
                <input name="add" id="add" type="button" class="button" value="-->"/>
                <input name="add_all" id="add_all" type="button" class="button" value="==>"/>
                <input name="remove" id="remove" type="button" class="button" value="&lt;--"/>
                <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;=="/>
            </td>
            <td width="127" align="left">
                <select name="second" size="10" multiple="multiple" class="td3" id="second">
                    <option value="选项9">选项9</option>
                </select>
            </td>
        </tr>
    </table>
</div>
</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. 选择对象
            //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>

在这里插入图片描述

作业2

<!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 () {
                //ctrl+b 可以看源码
                $("#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>

在这里插入图片描述

动态实现属性添加删除

<!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"/>&nbsp;&nbsp;
    email: <input type="text" name="email" id="email"/>&nbsp;&nbsp;
    电话: <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>&nbsp;</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>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/883543.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Spring】深入理解 Spring 事务及其传播机制

【Spring】深入理解 Spring 事务及其传播机制

文章目录 一、Spring 事务是什么二、Spring 中事务的实现方法2.1 Spring 编程式事务&#xff08;手动&#xff09;2.1.1 编程式事务的使用演示2.1.2 编程式事务存在的问题 2.2 Spring 声明式事务&#xff08;自动&#xff09;2.2.1 Transactional 作用范围2.2.2 Transactional …
阅读更多...
化繁为简，使用Hibernate Validator实现参数校验

化繁为简，使用Hibernate Validator实现参数校验

前言 在之前的悦享校园的开发中使用了SSM框架&#xff0c;由于当时并没有使用参数参数校验工具&#xff0c;方法的入参判断使用了大量的if else语句&#xff0c;代码十分臃肿&#xff0c;因此最近在重构代码时&#xff0c;将框架改为SpringBoot后&#xff0c;引入了Hibernate V…
阅读更多...
HCIP MPLS实验

HCIP MPLS实验

MPLS实验 拓扑MPLS VPN配置PE与PE间建立MP-BPG邻居关系R7访问R2,R3,R4环回 拓扑 MPLS VPN配置 首先可以用OSPF协议将R2,R3,R4跑通&#xff0c;然后配置MPLS [R2]mpls lsr-id 2.2.2.2 定义MPLS的router-id&#xff0c;要为本地设备的真实ip地址&#xff0c;且邻居可达&#…
阅读更多...
机器学习算法之-逻辑回归(2)

机器学习算法之-逻辑回归(2)

为什么需要逻辑回归 拟合效果太好 特征与标签之间的线性关系极强的数据&#xff0c;比如金融领域中的 信用卡欺诈&#xff0c;评分卡制作&#xff0c;电商中的营销预测等等相关的数据&#xff0c;都是逻辑回归的强项。虽然现在有了梯度提升树GDBT&#xff0c;比逻辑回归效果更…
阅读更多...
【学习FreeRTOS】第8章——FreeRTOS列表和列表项

【学习FreeRTOS】第8章——FreeRTOS列表和列表项

1.列表和列表项的简介 列表是 FreeRTOS 中的一个数据结构&#xff0c;概念上和链表有点类似&#xff0c;列表被用来跟踪 FreeRTOS中的任务。列表项就是存放在列表中的项目。 列表相当于链表&#xff0c;列表项相当于节点&#xff0c;FreeRTOS 中的列表是一个双向环形链表列表的…
阅读更多...
【大数据之Kafka】三、Kafka生产者之消息发送流程及同步异步发送API

【大数据之Kafka】三、Kafka生产者之消息发送流程及同步异步发送API

将外部传送给过来的数据发送到kafka集群。 1 发送原理 &#xff08;1&#xff09;创建main()线程&#xff0c;创建producer对象&#xff0c;调用send方法&#xff0c;经过拦截器&#xff08;可选&#xff09;、序列化器、分区器。 &#xff08;2&#xff09;分区器将数据发送…
阅读更多...
java面试题（16）：Mysql一致性视图是啥时候建立的

java面试题（16）：Mysql一致性视图是啥时候建立的

1 演示错误案例 先给大家来一个错误演示。 我们打开两个会话窗口&#xff0c;默认情况下隔离级别是可重复读&#xff0c;我们来看下&#xff1a; 首先在 A 会话中查看当前 user 表&#xff0c;查看完成后开启事务&#xff1a; 可以看到id3的数据sex是男。 接下来在 B 会话中…
阅读更多...
场景入门12----关卡切换和流送

场景入门12----关卡切换和流送

在游戏时往往需要切换关卡&#xff0c;有两种方法&#xff0c;关卡切换和推送。关卡切换的方法是进入了一个新的地图&#xff0c;这时人物的值都复原了&#xff0c;一般都是在一个地图上推送关卡。 关卡切换 首先&#xff0c;文件新建一个新关卡&#xff0c;命名。找到之前制…
阅读更多...
地址解析协议-ARP

地址解析协议-ARP

ARP协议 无论网络层使用何种协议&#xff0c;在实际网络的链路上传输数据帧时&#xff0c;最终必须使用硬件地址 地址解析协议&#xff08;Address Resolution Protocol&#xff0c;ARP&#xff09;&#xff1a;完成IP地址到MAC地址的映射&#xff0c;每个主机都有一个ARP高速缓…
阅读更多...
C语言刷题训练DAY.4

C语言刷题训练DAY.4

1.计算体重指数 解题思路&#xff1a; 这里我们只需要按照他的要求写出公式。 注意&#xff1a;身高要换算成米&#xff0c;打印的结构是个浮点数&#xff0c;打印的格式要相对应 解题代码&#xff1a; #include<stdio.h> int main() {int weight 0;int height 0;…
阅读更多...
Python自动化小技巧18——自动化资产月报(word设置字体表格样式，查找替换文字)

Python自动化小技巧18——自动化资产月报(word设置字体表格样式，查找替换文字)

案例背景 每月都要写各种月报&#xff0c;经营管理月报&#xff0c;资产月报.....这些报告文字目标都是高度相似的&#xff0c;只是需要替换为每个月的实际数据就行&#xff0c;如下&#xff1a; (打码是怕信息泄露.....) 可以看到&#xff0c;这个报告的都是高度模板化&…
阅读更多...
浏览器 - 事件循环机制详解

浏览器 - 事件循环机制详解

目录 1&#xff0c;浏览器进程模型进程线程浏览器的进程和线程1&#xff0c;浏览器进程2&#xff0c;网络进程3&#xff0c;渲染进程 2&#xff0c;渲染主线程事件循环异步同步 JS 为什么会阻塞渲染任务优先级 3&#xff0c;常见面试题1&#xff0c;如何理解 js 的异步2&#x…
阅读更多...
时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 基于KNN K近邻的时间序列预测-递归预测未来(多指标评价) …
阅读更多...
数据集成与流动优化：解锁企业数据的无限潜力

数据集成与流动优化：解锁企业数据的无限潜力

在当今数字化时代&#xff0c;企业拥有海量数据&#xff0c;这些数据散落在不同部门、系统和平台之间&#xff0c;形成了所谓的“数据孤岛”。要想实现数据的最大化价值&#xff0c;就必须解决数据集成与流动的挑战。本文将深入探讨数据集成与流动优化的重要性&#xff0c;以及…
阅读更多...
833-字符串中查找与替换

833-字符串中查找与替换

题目描述&#xff1a; 你会得到一个字符串 s (索引从 0 开始)&#xff0c;你必须对它执行 k 个替换操作。替换操作以三个长度均为 k 的并行数组给出&#xff1a;indices, sources, targets。 要完成第 i 个替换操作: 检查 子字符串 sources[i] 是否出现在 原字符串 s 的索…
阅读更多...
POSTGRESQL 关于安装中自动启动的问题 详解

POSTGRESQL 关于安装中自动启动的问题 详解

开头还是介绍一下群&#xff0c;如果感兴趣Polardb ,mongodb ,MySQL ,Postgresql ,redis &#xff0c;SQL SERVER ,ORACLE,Oceanbase 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请加 liuaustin3微信号 &…
阅读更多...
使用SpringBoot + Thymeleaf 完成简单的用户登录

使用SpringBoot + Thymeleaf 完成简单的用户登录

&#x1f600;前言 本篇博文是关于Thymeleaf 的综合案例&#xff0c; 使用SpringBoot Thymeleaf 完成简单的用户登录-列表功能&#xff0c;希望你能够喜欢&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨…
阅读更多...
数据结构--最短路径 Floyd算法

数据结构--最短路径 Floyd算法

数据结构–最短路径 Floyd算法 F l o y d 算法&#xff1a;求出每⼀对顶点之间的最短路径 \color{red}Floyd算法&#xff1a;求出每⼀对顶点之间的最短路径 Floyd算法&#xff1a;求出每⼀对顶点之间的最短路径 使⽤动态规划思想&#xff0c;将问题的求解分为多个阶段 对于n个顶…
阅读更多...
re学习（31）BUUCTF-xx（多层加密）

re学习（31）BUUCTF-xx（多层加密）

参考文章&#xff1a;【BUUCTF逆向 [2019红帽杯]xx】_nb_What_DG的博客-CSDN博客 re学习笔记&#xff08;26&#xff09;BUUCTF-re-[2019红帽杯]xx_Forgo7ten的博客-CSDN博客 还有B站 水番正文 IDA64位载入 shiftF12查看字符串 交叉引用找到关键代码 使用findcrypt插件找到…
阅读更多...
H13-922题库 HCIP-GaussDB-OLAP V1.5

H13-922题库 HCIP-GaussDB-OLAP V1.5

**H13-922 V1.5 GaussDB(DWS) OLAP题库 华为认证GaussDB OLAP数据库高级工程师HCIP-GaussDB-OLAP V1.0自2019年10月18日起&#xff0c;正式在中国区发布。当前版本V1.5 考试前提&#xff1a; 掌握基本的数据库基础知识、掌握数据仓库运维的基础知识、掌握基本Linux运维知识、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023