菜单 搜索
首页 前端知识 jQuery(二)

jQuery(二)

2024-04-09 23:04:45 前端知识 前端哥 988 983 我要收藏

文章目录

    • 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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/4723.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

HTML5学习笔记（二）

2024-04-21 10:04:45

html5基础入门教程之canvas绘制图形，2024年最新前端面试相关文章及Github学习资料

2024-04-21 10:04:24

HTML5七夕情人节表白网页制作【JS烟花表白】HTML CSS JavaScript 烟花表白代码 html烟花告白源码

2024-04-21 10:04:22

【HTML5】浏览器不能显示字体报错Failed to decode downloaded font问题解决

2024-04-21 10:04:16

HTML5标签 CSS盒模型 响应式布局 前端性能优化 实现一个元素上下左右居中 块标签，行标签，行内块标签的区别

2024-04-21 10:04:16

飘扬的爱意--花费三天用HTML5做三个告白气球

2024-01-24 15:01:25

ECharts--中国地图（无敌详细）

2024-01-24 15:01:28

HTML5中Web Components技术如何扩展自定义元素？

2024-04-21 10:04:54

前端提高篇(六十五)：HTML5练习1：个性音乐播放器

2024-04-21 10:04:39

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！