jQuery 练习

最新推荐文章于 2022-11-11 19:58:14 发布

扎克风暴

最新推荐文章于 2022-11-11 19:58:14 发布

阅读量132

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_44788518/article/details/108234927

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

dom增删改

从左到右，从右到左

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #left {
        float: left;
        width: 120px;
      }
      #left #select1 {
        float: left;
        width: 100px;
        height: 150px;
      }
      #left button {
        float: left;
        margin-top: 10px;
      }
      #right {
        float: left;
        width: 120px;
      }
      #right #select2 {
        float: left;
        width: 100px;
        height: 150px;
      }
      #right button {
        float: left;
        margin-top: 10px;
      }
    </style>
    <script src="./js/jquery-1.7.2.js"></script>
    <script>
      $(function () {
        //选中添加到右边
        $("button")
          .eq(0)
          .click(function () {
            $("#select1 option:selected").appendTo("#select2");
          });
        //全部添加到右边
        $("button")
          .eq(1)
          .click(function () {
            $("#select1 option").appendTo("#select2");
          });
        //选中添加到左边
        $("button")
          .eq(2)
          .click(function () {
            $("#select2 option:selected").appendTo("#select1");
          });
        // //全部添加到左边
        $("button")
          .eq(3)
          .click(function () {
            $("#select2 option").appendTo("#select1");
          });
      });
    </script>
  </head>
  <body>
    <div id="left">
      <select id="select1" name="sel01" multiple="multiple" size="8">
        <option value="op1">选项1</option>
        <option value="op2">选项2</option>
        <option value="op3">选项3</option>
        <option value="op4">选项4</option>
        <option value="op5">选项5</option>
        <option value="op5">选项6</option>
        <option value="op5">选项7</option>
        <option value="op5">选项8</option>
      </select>
      <button>选中添加到右边</button>
      <button>全部添加到右边</button>
    </div>
    <div id="right">
      <select
        id="select2"
        name="sel02"
        style="height=100px"
        multiple="multiple"
        size="8"
      >
      </select>
      <button>选中添加到左边</button>
      <button>全部添加到左边</button>
    </div>
  </body>
</html>

动态添加和删除记录

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style>
      #employeeTable {
        border-collapse: separate;
        border-spacing: 1px;
        background-color: black;
        margin: 80px auto 10px auto;
      }
      th,
      td {
        background-color: white;
      }
      #formDiv {
        width: 250px;
        border-style: solid;
        border-width: 1px;
        margin: 50px auto 10px auto;
        padding: 10px;
      }

      #formDiv input {
        width: 100%;
      }
    </style>
    <script src="./js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
      let delectFun = function () {
        let result = confirm(
          "确认删除！" + $(this).parent().parent().find("td:first").text()
        );
        if (result) {
          //响应事件中的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
          $(this).parent().parent().remove();
        }

        //return false 阻止标签默认行为
        return false;
      };
      $(function () {
        $("#addEmpBtn").click(function () {
          let name = $("#empName").val();
          let email = $("#email").val();
          let salary = $("#salary").val();
          if (typeof name == undefined || name == null || name == "") {
            alert("name不能为空");
            return;
          }
          if (typeof email == undefined || email == null || email == "") {
            alert("email不能为空");
            return;
          }
          if (typeof salary == undefined || salary == null || salary == "") {
            alert("salary");
            return;
          }
          var temp = $(
            "<tr><td>" +
              name +
              "</td><td>" +
              email +
              "</td> <td>" +
              salary +
              '</td><td><a href="deleteEmp?id=004">Delete</a></td></tr>'
          ).appendTo("#employeeTable");
          temp.find("a").click(delectFun);
        });
        //给删除的a标签添加点击事件
        $("a").click(delectFun);
      });
    </script>
  </head>
  <body>
    <table id="employeeTable">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
      </tr>
      <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
      </tr>
    </table>

    <div id="formDiv">
      <h4>添加新员工</h4>

      <table>
        <tr>
          <td class="word">name:</td>
          <td class="inp">
            <input type="text" name="empName" id="empName" />
          </td>
        </tr>
        <tr>
          <td class="word">email:</td>
          <td class="inp">
            <input type="text" name="email" id="email" />
          </td>
        </tr>
        <tr>
          <td class="word">salary:</td>
          <td class="inp">
            <input type="text" name="salary" id="salary" />
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button id="addEmpBtn" value="abc">Submit</button>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

图片跟随

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Insert title here</title>
    <style type="text/css">
      body {
        text-align: center;
      }
      #small {
        margin-top: 150px;
      }
      #showBig {
        position: absolute;
        display: none;
      }
    </style>
    <script src="./js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
      $(function () {
        $("#small").bind("mouseover mouseout mousemove", function (event) {
          if (event.type == "mouseover") {
            $("#showBig").show();
            $("#showBig").offset({
              left: event.pageX,
              top: event.pageY,
            });
          } else if (event.type == "mouseout") {
            $("#showBig").hide();
          } else if (event.type == "mousemove") {
            $("#showBig").offset({
              left: event.pageX + 10,
              top: event.pageY + 10,
            });
          }
        });
      });
    </script>
  </head>
  <body>
    <img id="small" src="img/small.jpg" />

    <div id="showBig">
      <img src="img/big.jpg" />
    </div>
  </body>
</html>

扎克风暴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 练习

dom增删改从左到右，从右到左<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>
复制链接

扫一扫