jQuery(二)

文章目录

    • 1.jQuery操作节点
        • 1.查找节点，修改属性
          • 1.基本介绍
          • 2.切换图片案例
        • 2.创建节点
          • 1.基本介绍
          • 2.内部插入
          • 3.外部插入
          • 4.小结
            • 1.插入方法说明
            • 2.两种插入方法的区别
          • 5.插入元素实例
          • 6.移动元素实例
        • 3.删除节点
          • 1.基本介绍
          • 2.代码实例
        • 4.复制节点
          • 1.基本介绍
          • 2.代码实例
        • 5.替换节点
          • 1.基本介绍
          • 2.代码实例
    • 2.属性操作
    • 3.`.class`样式操作
        • 1.基本介绍
        • 2.代码实例
    • 4.获取HTML文本和值
        • 1.基本介绍
        • 2.案例
    • 5.常用遍历节点方法
        • 1.基本介绍
        • 2. 代码实例
    • 6.CSS-DOM操作
        • 1.基本介绍
        • 2.代码实例
    • 7.多选框应用案例
        • 1.题目
        • 2.代码
    • 8.页面加载完毕触发方式
    • 9.作业
        • 1.作业一
        • 2.作业二
        • 3.作业三（处理布尔属性使用prop）
        • 4.作业四
          • 1.添加
          • 2.删除

1.jQuery操作节点

1.查找节点，修改属性
1.基本介绍

image-20240201150315931

2.切换图片案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作节点的属性</title>
    <script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
          //为按钮绑定事件
          $("button").click(function () {
            //修改图片属性
            $("img").attr("src", "./image/1.png")
          })
        });
    </script>
</head>
<body>
<img src="./image/2.png" height="300"/>
<br/>
<button>点击切换图片</button>
</body>
</html>

image-20240201152300099

image-20240201152320845

2.创建节点
1.基本介绍

image-20240201152815899

2.内部插入

image-20240201153436036

image-20240201153455623

3.外部插入

image-20240201154047893

image-20240201154139591

4.小结
1.插入方法说明
  1. **A.append(B)：**A内部的最后添加B
  2. **A.prepend(B)：**A内部的最前面添加B
  3. **A.after(B)：**A的后面添加B
  4. **A.before(B)：**A的前面添加B
2.两种插入方法的区别
  1. 在直接可以找到子元素的情况下，内部插入和外部插入的作用是相同的，建议使用外部插入
  2. 如果只能找到父元素，插入子元素只能使用内部插入法
5.插入元素实例
<!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 () {
        //创建重庆li
        var cq_li = document.createElement("li");
        //添加内容
        cq_li.setAttribute("id", "cq")
        cq_li.setAttribute("name", "chongqing")
        cq_li.innerText = "重庆";
        //拿到上海
        var elementById = document.getElementById("sh");
        //上海的下面添加节点
        elementById.append(cq_li);
      })

      //*****添加重庆li到 上海下-jquery完成添加节点
      $("#b2").click(function () {
        //创建重庆节点
        var $li = $("<li id=\"cq\" name=\"chongqing\">重庆</li>");
        //添加节点
        //内部插入
        // $("ul li[id='sh']").append($li);
        //外部插入
        $("ul li[id='sh']").after($li);
      })


      //*** 添加成都li到 北京前
      $("#b3").click(function () {
        //设置成都li
        var $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>");
        $("#bj").before($cd)
      })

      //*** 添加成都li到 北京和上海之间
      $("#b4").click(function () {
        //设置成都li
        var $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>");
        $("#bj").after($cd)
      })

      //*** 添加成都li到 吉林前面
      $("#b5").click(function () {
        //设置成都li
        var $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>");
        $("#jl").before($cd)
      })

    })
  </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>

image-20240201162359073

6.移动元素实例
<!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 () {
              //找到city这个父元素，将反恐添加到内部的最后
              $("#city").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>

image-20240201162415546

3.删除节点
1.基本介绍

image-20240201162100904

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 () {
            //*****删除所有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>

image-20240201162758912

4.复制节点
1.基本介绍

image-20240201162850760

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>
        $(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>

image-20240201163259184

5.替换节点
1.基本介绍

image-20240201163644682

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").click(function () {
        //将p使用超链接替换
        $("p").replaceWith("<a href=\"www.baidu.com\">点击跳转到百度</a><br>")
      })
      $("#2").click(function () {
        //将p使用dom对象替换
        var $button = $("<button>dom对象按钮</button><br>");
        $("p").replaceWith($button)
      })
    });
  </script>
</head>
<body>
<h1>节点替换</h1>
<p>Hello</p>
<p>jquery</p>
<p>World</p>
<button id="1">点击使用超链接替换</button>
<button id="2">点击使用dom对象替换</button>
</body>
</html>

image-20240201164906428

2.属性操作

image-20240201164959921

3..class样式操作

1.基本介绍

image-20240201165715836

2.代码实例
<!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;
      background: red;
    }

    .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("one");
      })

      //切换样式: 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>

image-20240201170913079

4.获取HTML文本和值

1.基本介绍

image-20240201171024297

2.案例

image-20240201171224122

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- 确保添加了jQuery库 -->
  <script>
    $(function () {
      //input绑定失去焦点事件，检查用户是否填写信息了
      $("input").blur(function () {
        if ($(this).val() == "") { //没有信息则填入value="请输入用户名"
          $(this).val("请输入用户名");
        }
      })

      //input绑定获取焦点事件，清空value
      $("input").focus(function () {
        if ($(this).val() == "请输入用户名") {//清空val
          $(this).val("");
        }
      })
    })
  </script>
</head>
<body>
<input type="text" value="请输入用户名">
<button>登录</button>
</body>
</html>

image-20240201183942237

5.常用遍历节点方法

1.基本介绍

image-20240201184059784

2. 代码实例
<!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 () {
              var $children = $("div[class='one']").children().eq(1);
              //这里的$children是方法返回的，不是自己遍历的，所以返回的是jquery对象而不是dom对象
              alert($children.text())
            })

            //***获取后面的同辈div元素（class 为 two 的div的)
            $("#b2").click(function () {
              var nextAll = $("div[class='one']").nextAll();
              //自己遍历一下，返回的就是dom对象了$(this)转化成jquery对象
              nextAll.each(function () {
                console.log($(this).text())
              })
            })

            //**获取前面的同辈div元素（class 为 one 的div的)
            $("#b3").click(function () {
              var prevAll = $("div[class='one']").prevAll();
              //获取紧邻前面的一个同辈元素
              var prev = $("div[class='one']").prev();
              alert(prev.text())
              prevAll.each(function () {
                console.log($(this).text())
              })
            })
            //**获取所有的同辈div元素（class 为 one 的div的)
            $("#b4").click(function () {
              $("div[class='one']").siblings().filter("div").each(function () { //filter可以过滤
                console.log($(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">
  dfsd
    <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>

image-20240201191516843

6.CSS-DOM操作

1.基本介绍

image-20240201191848054

2.代码实例
<!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 () {
        //获取图片width
        var width = $("img").width();
        alert(width)
        //获取偏移对象，从而获取偏移量
        var offset = $("img").offset();
        alert("top=" + offset.top)
        alert("left=" + offset.left)
      })
    })
  </script>
</head>
<body>
<br/><br/><br/>
hello,world~<img src="../image/1.png" width="200">
<button id="b1" type="button">获取图片信息</button>
</body>
</html>

image-20240201192951088

7.多选框应用案例

1.题目

image-20240201193416182

2.代码
<!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">
    $(function () {
      //为所有option绑定双击事件
      $("select option").dblclick(function () {
        //根据父元素决定插入到哪个地方
        var attr = $(this).parent().attr("id");
        if (attr == "first") {
          $("#second").append($(this))
        }
        if (attr == "second") {
          $("#first").append($(this))
        }
      });

      //绑定第一个按钮
      $("#add").click(function () {
        //找到被选中的按钮，内部插入到右边
        var $first = $("#first option:checked");
        $first.each(function () {
          //找到右边的下拉框，内部插入
          $("#second").append($(this))
        })
      })
      //绑定第二个按钮
      $("#add_all").click(function () {
        //找到左边的所有子元素
        var $children = $("#first").children()
        //遍历插入到右边的下拉框
        $children.each(function () {
          $("#second").append($(this))
        })
      })
      //绑定第三个按钮
      $("#remove").click(function () {
        //找到右边被选中的按钮，内部插入到左边
        var $second = $("#second option:checked");
        $second.each(function () {
          $("#first").append($(this))
        })
      })
      //绑定第四个按钮
      $("#remove_all").click(function () {
        //找到所有右边的元素，遍历内部插入左边
        var $children = $("#second").children();
        $children.each(function () {
          $("#first").append($(this))
        })
      })
    })
  </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>

image-20240201202827625

8.页面加载完毕触发方式

image-20240201203322334

9.作业

1.作业一

image-20240201203443652

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
  <script>
    $(function () {
      //为按钮绑定点击事件
      $("button").click(function () {
        //返回选中的个数以及选中的信息
        var $input = $("input[name='sport']:checked");
        var res = "您选中的信息是："; //将信息存储在这个String里
        //遍历选中的信息
        if ($input) { //只要不是空就遍历
          $input.each(function () {
            res += $(this).val();
          })
          res += "，个数是：" + $input.length;
          alert(res)
        }

      })
    })
  </script>

</head>
<body>
<input type="checkbox" name="sport" value="篮球">篮球<br>
<input type="checkbox" name="sport" value="排球">排球<br>
<input type="checkbox" name="sport" value="羽毛球">羽毛球<br>
<input type="checkbox" name="sport" value="乒乓球">乒乓球<br>
<button>选中的个数</button>
</body>
</html>

image-20240201205547900

2.作业二

image-20240201203708941

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
  <script>
    $(function () {
      //绑定第一个按钮
      $("button").eq(0).click(function () {
        //使单选下拉框的2号被选中
        $("select[name='sel1'] option[value='se2']").attr("selected", true);
      })
      //绑定第二个按钮
      $("button").eq(1).click(function () {
        //使多选下拉框的2号和5号被选中
        $("select[name='sel2'] option").eq(1).attr("selected", true)
        $("select[name='sel2'] option").eq(4).attr("selected", true)
      })
      //绑定第三个按钮
      $("button").eq(2).click(function () {
        //使复选框的复选2和复选4被选中
        $(":checkbox:odd").attr("checked", true) //过滤checkbox和偶数
      })
      //绑定第四个按钮
      $("button").eq(3).click(function () {
        //使单选框的单选2被选中
        $(":radio:eq(1)").attr("checked", true)
      })
      //绑定第五个按钮
      $("button").eq(4).click(function () {
        //打印已经选中的值
        var $selected = $(":selected");
        $selected.each(function () {
          console.log($(this).text())
        })
        var $checked = $("input:checked");
        $checked.each(function () {
          console.log($(this).val())
        })
      })
    })
  </script>
</head>
<body>
<button>使单选下拉框的2号被选中</button>
<br>
<button>使多选下拉框的2号和5号被选中</button>
<br>
<button>使复选框的复选2和复选4被选中</button>
<br>
<button>使单选框的单选2被选中</button>
<br>
<button>打印已经选中的值</button>
<br><br>
<select name="sel1">
  <option value="se1">1号</option>
  <option value="se2">2号</option>
  <option value="se3">3号</option>
  <option value="se4">4号</option>
  <option value="se5">5号</option>
</select><br><br>
<select name="sel2" multiple="multiple" style="height: 100px">
  <option value="sem1">1号</option>
  <option value="sem2">2号</option>
  <option value="sem3">3号</option>
  <option value="sem4">4号</option>
  <option value="sem5">5号</option>
</select><br><br>
<input type="checkbox" value="复选1" name="ch">复选1
<input type="checkbox" value="复选2" name="ch">复选2
<input type="checkbox" value="复选3" name="ch">复选3
<input type="checkbox" value="复选4" name="ch">复选4<br><br>
<input type="radio" name="ra" value="单选1">单选1
<input type="radio" name="ra" value="单选2">单选2
<input type="radio" name="ra" value="单选3">单选3
</body>
</html>

image-20240202095345366

3.作业三（处理布尔属性使用prop）

image-20240201203754930

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
  <script>
    $(function () {
      //绑定第一个按钮
      $("button:eq(0)").click(function () {
        $("input").prop("checked", true)
      })
      //绑定第二个按钮
      $("button:eq(1)").click(function () {
        $("input").prop("checked", false)
      })
      //绑定第三个按钮
      $("button:eq(2)").click(function () {
        //遍历按钮，反选
        $("input").each(function () {
          if ($(this).prop("checked")) {
            $(this).prop("checked", false)
          }
          else {
            $(this).prop("checked", true)
          }
        })
      })
    })
  </script>
</head>
<body>
<h4>请选择您的爱好</h4>
<input type="checkbox" name="ch" value="ch1">足球
<input type="checkbox" name="ch" value="ch2">篮球
<input type="checkbox" name="ch" value="ch3">游泳
<input type="checkbox" name="ch" value="ch4">唱歌<br>
<button>全选</button>&nbsp;&nbsp;
<button>全不选</button>&nbsp;&nbsp;
<button>反选</button>
</body>
</html>

image-20240202101225805

4.作业四

image-20240201203856999

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
  <script>
    $(function () {
      //绑定提交按钮
      $("input[type='submit']").click(function () {
        //获取三个按钮信息
        var name = $("input:eq(0)").val();
        var email = $("input:eq(1)").val();
        var num = $("input:eq(2)").val();
        //创建一个table记录
        var $tr = $("<tr><td>" + name + "</td><td>" + email + "</td><td>" + num + "</td><td><a href='#'>delete</a></td></tr>");
        //内部插入
        $("table").append($tr);
      })
      // 使用事件委托绑定动态生成的超链接点击事件
      $("table").on("click", "a", function () {
        var $name = $(this).closest("tr").find("td:first").text();//找到名字
        var isConfirmed = confirm("是否要删除名字为 " + $name + " 的行？");
        if(isConfirmed) {
          // 执行删除操作，例如移除当前行
          $(this).closest("tr").remove();
        }
      });
    })
  </script>
</head>
<body>
<h4>用户前台管理系统</h4>
姓名：<input type="text">
email：<input type="text">
电话：<input type="text">
<input type="submit" value="提交">
<hr>
<table width="700" border="2px" style="background: #b3d4fc;">
  <tr>
    <th>姓名</th>
    <th>email</th>
    <th>电话</th>
    <th>删除操作</th>
  </tr>
</table>
</body>
</html>
1.添加

image-20240202105353914

2.删除

image-20240202105412136

image-20240202105423532

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot整合ELK8.1.x实现日志中心教程

SpringBoot整合ELK8.1.x实现日志中心教程

目录 背景 环境准备 环境安装 1.JDK安装 2.安装Elasticsearch 3.安装zookeeper 4.安装Kafka 5.安装logstash 6.安装file beat 解决方案场景 1.日志采集 1.1 应用日志配置 1.1.1 创建logback-spring.xml文件 1.1.2 创建LoggerFactory 1.1.3 trace日志的记录用法 …
阅读更多...
【realme x2手机解锁BootLoader（简称BL）】

【realme x2手机解锁BootLoader（简称BL）】

realme手机解锁常识 https://www.realme.com/cn/support/kw/doc/2031665 realme手机解锁支持型号 https://www.realmebbs.com/post-details/1275426081138028544 realme x2手机解锁实践 参考&#xff1a;https://www.realmebbs.com/post-details/1255473809142591488 1 下载apk…
阅读更多...
vue3数据库中存头像图片相对路径在前端用prop只能显示路径或无法显示图片只能显示alt中内容的问题的解决

vue3数据库中存头像图片相对路径在前端用prop只能显示路径或无法显示图片只能显示alt中内容的问题的解决

不想看前情可以直接跳到头像部分代码 前情&#xff1a; 首先我们是在数据库中存图片相对路径&#xff0c;这里我们是在vue的src下的assets专门建一个文件夹img存头像图片。 然后我们如果用prop"avatar" label"头像"是只能显示图片路径的&#xff0c;即lo…
阅读更多...
python的pip如何升级

python的pip如何升级

升级pip的方法如下&#xff1a; 打开命令行工具。在Windows系统中&#xff0c;可以通过按下WinR键&#xff0c;然后输入"cmd"来打开命令提示符&#xff1b;在Mac或Linux系统中&#xff0c;可以直接打开终端。检查当前pip版本。在终端或命令行中输入以下命令&#…
阅读更多...
v-text 和v-html

v-text 和v-html

接下来&#xff0c;我讲介绍一下v-text和v-html的使用方式以及它们之间的区别。 使用方法 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-widt…
阅读更多...
RUST语言变量与数据类型使用

RUST语言变量与数据类型使用

使用之前了解: fn main() 表示程序入口点 println!("要输出的内容"); 表示格式化输出 变量与常量声明: let 变量:变量类型 变量值;let mut 变量:变量类型 变量值; const 常量:常量类型 常量值 如果 声明时不指定类型,将根据赋值类型自动推导 变量类型参与下…
阅读更多...
Regression算法

Regression算法

文章目录 用线性回归找到最佳拟合直线标准回归函数局部加权线性回归函数 用线性回归找到最佳拟合直线 from google.colab import drive drive.mount("/content/drive")Mounted at /content/drivefrom numpy import *def loadDataSet(fileName):numFeat len(open(fi…
阅读更多...
ideaSSM 校园兼职招聘平台bootstrap开发mysql数据库web结构java编程计算机网页源码maven项目

ideaSSM 校园兼职招聘平台bootstrap开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 idea 开发 SSM 校园兼职招聘平台是一套完善的信息管理系统&#xff0c;结合SSM框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff…
阅读更多...
图的应用解析

图的应用解析

01&#xff0e;任何一个无向连通图的最小生成树(B )。 A.有一棵或多棵 B.只有一棵 C.一定有多棵 D.可能不存在 02.用Prim算法和Kruskal算法构造图的最小生成树&#xff0c…
阅读更多...
windows@软件显示模糊@屏幕显示器分辨率和精细度

windows@软件显示模糊@屏幕显示器分辨率和精细度

文章目录 refsDPIPPIPPI (Pixels Per Inch)DPI (Dots Per Inch) 屏幕尺寸数windows中DPI设置对单个应用设置DPI兼容性设置使用系统全局设置 获取屏幕(监视器)信息&#x1f47a;获取监视器的型号pnp 监视器windows 获取屏幕分辨率 高分辨率屏幕高分辨率和高精细度屏幕&#x1f4…
阅读更多...
基于Python的微博旅游情感分析、微博舆论可视化系统

基于Python的微博旅游情感分析、微博舆论可视化系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
基于深度学习的吸烟检测系统（网页版+YOLOv8/v7/v6/v5代码+训练数据集）

基于深度学习的吸烟检测系统（网页版+YOLOv8/v7/v6/v5代码+训练数据集）

摘要&#xff1a;本文深入研究了基于YOLOv8/v7/v6/v5等深度学习模型的吸烟行为检测系统&#xff0c;核心采用YOLOv8并整合了YOLOv7、YOLOv6、YOLOv5算法&#xff0c;进行性能指标对比&#xff1b;详述了国内外研究现状、数据集处理、算法原理、模型构建与训练代码&#xff0c;及…
阅读更多...
Android配置抓包证书的原理

Android配置抓包证书的原理

一、数字证书的常见格式 数字证书有多种格式&#xff0c;其中一些常见的格式包括&#xff1a; X.509证书&#xff1a; X.509是最常见的数字证书标准&#xff0c;它定义了公钥证书的格式和相关的验证流程。X.509证书通常使用DER编码或PEM编码。 DER (Distinguished Encoding …
阅读更多...
Linux进程概念（一）：冯诺依曼体系结构和操作系统的基本概念

Linux进程概念（一）：冯诺依曼体系结构和操作系统的基本概念

目录 冯诺依曼体系结构 操作系统 理解操作系统的“管理” 操作系统的六层结构 冯诺依曼体系结构 输入设备&#xff1a;键盘、鼠标、摄像头、话筒、磁盘、网卡输出设备&#xff1a;显示器、声卡、磁盘、网卡、显示器等......CPU&#xff1a;运算器、控制器存储器&#xff1a…
阅读更多...
js表达式

js表达式

js 数据&#xff1a; 字面量 1 123 变量 a 表达式 12 2*2 a&&b 表达式都会有一个返回结果。表达式仍然是数据&#xff0c;所有可以写字面量&#xff0c;变量的地方都可以写表达式 在JavaScript中&#xff0c;表达式中的运算符具有不同的优先级&#xff0c;这决定…
阅读更多...
C++语言学习（二）——⭐缺省参数、函数重载、引用

C++语言学习（二）——⭐缺省参数、函数重载、引用

1.⭐缺省参数 &#xff08;1&#xff09;缺省参数概念 缺省参数是声明或定义函数时为函数的参数指定一个缺省值。在调用该函数时&#xff0c;如果没有指定实参则采用该形参的缺省值&#xff0c;否则使用指定的实参。 void Func(int a 0) {cout<<a<<endl; } int…
阅读更多...
什么是「第一性原理」？

什么是「第一性原理」？

生活中的诸多原则&#xff0c;宛如无形的锁链&#xff0c;束缚着我们的价值观、认知、信仰体系及学习推理的方式。 我们的观点&#xff0c;犹如被锁链牵引的风筝&#xff0c;随风飘摇&#xff0c;却始终无法挣脱这些原则的束缚。 我们的大脑&#xff0c;在思考的瞬间&#xf…
阅读更多...
Redis 的主从复制、哨兵

Redis 的主从复制、哨兵

目录 一. Redis 主从复制 1. 介绍 2. 作用 3. 流程 4. 搭建 Redis 主从复制 安装redis 修改 master 的Redis配置文件 修改 slave 的Redis配置文件 验证主从效果 二. Redis 哨兵模式 1. 介绍 2. 原理 3. 哨兵模式的作用 4. 工作流程 4.1 故障转移机制 4.2 主节…
阅读更多...
创业成功三要素：定位、追求与舍得

创业成功三要素：定位、追求与舍得

一、引言 在这个充满挑战与机遇的商业世界里&#xff0c;每一位创业者都怀揣着梦想&#xff0c;期望能在商海中开辟一片属于自己的天地。然而&#xff0c;成功的创业并非易事&#xff0c;它需要我们深思熟虑&#xff0c;明确自己的方向&#xff0c;并做出明智的决策。马云&…
阅读更多...
学习鸿蒙基础（12）

学习鸿蒙基础（12）

目录 一、网络json-server配置 &#xff08;1&#xff09;然后输入&#xff1a; &#xff08;2&#xff09;显示下载成功。但是输入json-server -v的时候。报错。 &#xff08;3&#xff09;此时卸载默认的json-server &#xff08;4&#xff09;安装和nodejs匹配版本的js…
阅读更多...
最新文章

Copyright @ 2022~2023