菜单 搜索
首页 前端知识 从零玩转jQuery（基础篇）

从零玩转jQuery（基础篇）

2024-08-27 21:08:09 前端知识 前端哥 578 330 我要收藏

1.前言 （window.onload和jQuery的相关介绍）

 

分析一下，元素js的缺点:
1.不能添加多个入口函数（window.onload),如果添加了多个，后面的会把前面的给覆盖。

2.原生js的api名字都太长太难记。
3.原生js有的时候代码冗余。
4.原生js中有些属性或者方法，有浏览器兼容问题。
5.原生js容错率比较低，前面的代码出了问题，后面的代码执行不了。|

注释：（jQuery的官网解释）

 2.如何使用jQuery？（3步）

 如：

一共有两种方法：（第二种用的会多一些）

 3.安装相关的环境

1.下载文件

jQuery下载官网

2.版本问题

 4.jQuery的详细介绍

原生js选择器获取的对象

 jQuery对象

注意：jQuery其实是一个伪数组

5.dom对象和jQuery对象之间互相转化

1.dom---->jquery

 有钱可使鬼推磨？？？？

2.jquery---->dom

前面说jQuery是一个伪数组，所以可以利用下标的方式去转化

 第二种方法就是get（）

6.jQuery获取文本内容 

7.设置文本用text（），参数为设置的文本

 

8.css方法设置 / 获取样式

1.获取样式: css()方法设置参数为要获取值的样式名.

2.设置样式 css（样式名，样式值）

设置的样式是行内样式 

如何一次性设置多样式？

效果： 

 9.jQuery基本选择器

  10.jQuery层级选择器

  11.jQuery过滤选择器

  12.jQuery筛选选择器

 13.下拉菜单案例

 可用其来写一个下拉菜单案例：

 代码为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
  </head>
  <body>
    <div class="wrap">
      <ul>
        <li>
          <a href="javascript:void(0)">一级菜单1</a>
          <ul>
            <li><a href="javascript:void(0)">二级菜单1</a></li>
            <li><a href="javascript:void(0)">二级菜单2</a></li>
            <li><a href="javascript:void(0)">二级菜单3</a></li>
          </ul>
        </li>
        <li>
          <a href="javascript:void(0)">一级菜单2</a>
          <ul>
            <li><a href="javascript:void(0)">二级菜单1</a></li>
            <li><a href="javascript:void(0)">二级菜单2</a></li>
            <li><a href="javascript:void(0)">二级菜单3</a></li>
          </ul>
        </li>
        <li>
          <a href="javascript:void(0)">一级菜单3</a>
          <ul>
            <li><a href="javascript:void(0)">二级菜单1</a></li>
            <li><a href="javascript:void(0)">二级菜单2</a></li>
            <li><a href="javascript:void(0)">二级菜单3</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <script>
      $(function () {
        $(".wrap ul>li").mouseover(function () {
          $(this).children("ul").css("display", "block");
          //或者
          //$(this).children("ul").show();
        });
        $(".wrap ul>li").mouseout(function () {
          $(this).children("ul").css("display", "none");
          // 或者
          // $(this).children("ul").hide();
        });
      });
    </script>
  </body>
</html>

注意：

所以有： 

 14.突出展示案例

 源代码;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style>
      body {
        background-color: black;
      }
      .wrap {
        width: 250px;
        height: 450px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <ul>
        <li>
          <img src="./img/632ce09aa0ec826ba1186b2e340cd309.jpeg" alt="" />
        </li>
        <li>
          <img src="./img/f8f00f19e1575daa806863941711b487.jpeg" alt="" />
        </li>
      </ul>
    </div>
    <script>
      $(function () {
        $(".wrap li").mouseenter(function () {
          $(this).css("opacity", 1).siblings("li").css("opacity", 0.4);
        });
        $(".wrap").mouseleave(function () {
          $(this).find("li").css("opacity", 1);
        });
      });
    </script>
  </body>
</html>

拓展：

15.手风琴案例

源代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style>
      ul {
        list-style: none;
      }
      li div {
        display: none;
      }
      span {
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <ul>
        <li>
          <span>标题1</span>
          <div>我是弹出来的div1</div>
        </li>
        <li>
          <span>标题2</span>
          <div>我是弹出来的div2</div>
        </li>
        <li>
          <span>标题3</span>
          <div>我是弹出来的div3</div>
        </li>
      </ul>
    </div>
    <script>
      $(function () {
        $("li").click(function () {
          $(this)
            .children("div")
            .show()
            .parent()
            .siblings("li")
            .children("div")
            .hide();
        });
      });
    </script>
  </body>
</html>

 我们可以得出：

 16.淘宝服饰精品

17.Class类操作

添加类

移除类

判断类

切换类

 源代码为;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .findSize30 {
        font-size: 30px;
      }
      .width300 {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <input type="button" value="添加类" id="addClass" />
    <input type="button" value="移除类" id="removeClass" />
    <input type="button" value="判断类" id="hasClass" />
    <input type="button" value="切换类" id="toggleClass" />
    <div>刘家奕</div>
    <script>
      $(function () {
        //添加类
        $("#addClass").click(function () {
          // $("div").addClass("findSize30");
          //也可以添加多个类
          $("div").addClass("findSize30 width300");
        });

        //移除类
        $("#removeClass").click(function () {
          $("div").removeClass("findSize30");
        });

        //判断类
        $("#hasClass").click(function () {
          console.log($("div").hasClass("findSize30"));
        });

        //切换类
        $("#toggleClass").click(function () {
          $("div").toggleClass("findSize30");
        });
      });
    </script>
  </body>
</html>

注释：

（1）案例写一个tab栏切换（css乞丐版）

源代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      .tab {
        width: 320px;
        height: 36px;
        border: 1px solid #ddd;
      }
      .tab-item {
        float: left;
        width: 80px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        border-top: 4px solid #fff;
        cursor: pointer;
      }
      .tab-item.active {
        border-color: red;
        border-bottom: 0;
      }
      .main.select {
        display: block;
      }
      .main {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        float: left;
        display: none;
      }
      .product {
        width: 500px;
        height: 500px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <ul class="tab">
        <li class="tab-item active">国际大牌</li>
        <li class="tab-item">男士精品</li>
        <li class="tab-item">清洁用品</li>
      </ul>
    </div>
    <div class="product">
      <div class="main select"></div>
      <div class="main">男士精品</div>
      <div class="main">清洁用品</div>
    </div>
    <script>
      $(function () {
        $(".tab>.tab-item").mouseenter(function () {
          $(this).addClass("active").siblings("li").removeClass("active");

          //获取当前的li标签的索引
          var idx = $(this).index();

          // 对product进行相关操作
          $(".product>.main")
            .eq(idx)
            .addClass("select")
            .siblings("div")
            .removeClass("select");
        });
      });
    </script>
  </body>
</html>

18.jQuery动画（show，hide，toggle）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: red;
        display: none;
      }
    </style>
  </head>
  <body>
    <input type="button" value="显示" id="show" />
    <input type="button" value="隐藏" id="hide" />
    <input type="button" value="切换" id="toggle" /><br /><br />
    <div></div>
    <script>
      $(function () {
        //显示
        $("#show").click(function () {
          $("div").show(200);
        });

        //隐藏
        $("#hide").click(function () {
          $("div").hide(200);
        });

        //切换
        $("#toggle").click(function () {
          $("div").toggle(200);
        });
      });
    </script>
  </body>
</html>

 注释：

其他的以此类推~~~ 

19.滑入和滑出效果和切换效果

还有两种情况就是滑入和滑出效果和切换效果

slideDown和slideUp和slideToggle,用法和上面的差不多

20.淡入和淡出

fadeIn 和 fadeOut 和 fadeToggle fadeTo

主要介绍fadeTo这个，

0.5是透明度 

21.自定义动画animate()

源代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style>
      div {
        width: 150px;
        height: 150px;
        background-color: red;
        position: absolute;
        left: 0px;
      }
      .div1 {
        top: 50px;
      }
    </style>
  </head>
  <body>
    <input type="button" value="从左到右800" id="lr800" />
    <div class="div1"></div>
    <script>
      $(function () {
        $("#lr800").click(function () {
          $(".div1").animate(
            {
              left: 800,
            },
            2000,
            "swing",
            function () {
              console.log("7");
            }
          );
        });
      });
    </script>
  </body>
</html>

注释: 

22.动画队类以及stop参数的含义

源代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style>
      div {
        width: 150px;
        height: 150px;
        background-color: red;
        position: fixed;
        display: none;
        left: 0px;
      }
    </style>
  </head>
  <body>
    <input type="button" value="开始动画" id="start" />
    <input type="button" value="停止动画" id="stop" /><br /><br />
    <div></div>
    <script>
      $(function () {
        $("#start").click(function () {
          $("div").slideDown(1000).slideUp(1000);
        });

        //第一个参数是否清除队列
        //第二个参数是否跳转到最终效果
        $("#stop").click(function () {
          // $("div").stop(true, true);
          // $("div").stop(true, false);
          $("div").stop(false, true);
          // $("div").stop(false, false);
        });
      });
    </script>
  </body>
</html>

 注释：

23.动态创建元素---html()和$() 

（1）html()

 (2)$()

24.案例-生成表格

 1.html()方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style>
      div {
        width: 150px;
        height: 150px;
        background-color: red;
        position: fixed;
        display: none;
        left: 0px;
      }
    </style>
  </head>
  <body>
    <input type="button" value="获取数据" id="id1" />
    <table>
      <thead>
        <tr>
          <th>标题</th>
          <th>地址</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody id="id2"></tbody>
    </table>
    <script>
      $(function () {
        //模拟后端拿取数据
        var data = [
          {
            name: "刘家奕",
            url: "https://mp.csdn.net/mp_blog/creation/editor/127022852",
            type: "帅哥",
          },
          {
            name: "家奕",
            url: "https://mp.csdn.net/mp_blog/creation/editor/127022852",
            type: "帅",
          },
        ];
        $("#id1").click(function () {
          //1.html方法
          var list = [];
          for (var i = 0; i < data.length; i++) {
            //生成tr
            list.push("<tr>");
            //生成td
            for (var key in data[i]) {
              list.push("<td>");
              list.push(data[i][key]);
              list.push("</td>");
            }
            list.push("</tr>");
          }
          // console.log(list.join(""));
          $("#id2").html(list.join(""));
        });
      });
    </script>
  </body>
</html>

 2.$()方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style>
      div {
        width: 150px;
        height: 150px;
        background-color: red;
        position: fixed;
        display: none;
        left: 0px;
      }
    </style>
  </head>
  <body>
    <input type="button" value="获取数据" id="id1" />
    <table>
      <thead>
        <tr>
          <th>标题</th>
          <th>地址</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody id="id2"></tbody>
    </table>
    <script>
      $(function () {
        //模拟后端拿取数据
        var data = [
          {
            name: "刘家奕",
            url: "https://mp.csdn.net/mp_blog/creation/editor/127022852",
            type: "帅哥",
          },
          {
            name: "家奕",
            url: "https://mp.csdn.net/mp_blog/creation/editor/127022852",
            type: "帅",
          },
        ];
        $("#id1").click(function () {
          for (var i = 0; i < data.length; i++) {
            var $Tr = $(
              "<tr><td>" +
                data[i]["name"] +
                "</td><td>" +
                data[i]["url"] +
                "</td><td>" +
                data[i]["type"] +
                "</td></tr>"
            );
            // console.log($Tr);
            $("#id2").append($Tr);
          }
        });
      });
    </script>
  </body>
</html>


25.jQuery添加结点的几种方式

（1）append方法

（1）新建一个li标签，添加到ul1中去.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style></style>
  </head>
  <body>
    <input type="button" value="append" id="btnAppend" />
    <input type="button" value="prepend" id="btnPrepend" />
    <input type="button" value="after" id="btnAfter" />
    <input type="button" value="before" id="btnBefore" />
    <input type="button" value="appendTo" id="btnAppendTo" />
    <ul id="ul1">
      <li>我是第1个li标签</li>
      <li>我是第2个li标签</li>
      <li id="li3">我是第3个1i标签</li>
      <li>我是第4个li标签</li>
      <li>我是第5个li标签</li>
    </ul>
    <ul id="ul2">
      <li>我是第1个li标签2</li>
      <li>我是第2个li标签2</li>
      <li id="li32">我是第3个li标签2</li>
      <li>我是第4个li标签2</li>
      <li>我是第5个li标签2</li>
    </ul>

    <script>
      $(function () {
        //append
        $("#btnAppend").click(function () {
          var $liNew = $("<li>我是新创建的li标签</li>");
          $("#ul1").append($liNew);
        });
      });
    </script>
  </body>
</html>

(2)把ul1中已经存在的li标签添加到ul中去．剪切后作为最后一个子元素添加.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style></style>
  </head>
  <body>
    <input type="button" value="append" id="btnAppend" />
    <input type="button" value="prepend" id="btnPrepend" />
    <input type="button" value="after" id="btnAfter" />
    <input type="button" value="before" id="btnBefore" />
    <input type="button" value="appendTo" id="btnAppendTo" />
    <ul id="ul1">
      <li>我是第1个li标签</li>
      <li>我是第2个li标签</li>
      <li id="li3">我是第3个1i标签</li>
      <li>我是第4个li标签</li>
      <li>我是第5个li标签</li>
    </ul>
    <ul id="ul2">
      <li>我是第1个li标签2</li>
      <li>我是第2个li标签2</li>
      <li id="li32">我是第3个li标签2</li>
      <li>我是第4个li标签2</li>
      <li>我是第5个li标签2</li>
    </ul>

    <script>
      $(function () {
        //append
        $("#btnAppend").click(function () {
          var $li3 = $("#li3");
          $("#ul1").append($li3);
        });
      });
    </script>
  </body>
</html>

(3)把ul2中已经存在的li标签添加到ul1中去.剪切后作为最后一个子元素添加.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style></style>
  </head>
  <body>
    <input type="button" value="append" id="btnAppend" />
    <input type="button" value="prepend" id="btnPrepend" />
    <input type="button" value="after" id="btnAfter" />
    <input type="button" value="before" id="btnBefore" />
    <input type="button" value="appendTo" id="btnAppendTo" />
    <ul id="ul1">
      <li>我是第1个li标签</li>
      <li>我是第2个li标签</li>
      <li id="li3">我是第3个1i标签</li>
      <li>我是第4个li标签</li>
      <li>我是第5个li标签</li>
    </ul>
    <ul id="ul2">
      <li>我是第1个li标签2</li>
      <li>我是第2个li标签2</li>
      <li id="li32">我是第3个li标签2</li>
      <li>我是第4个li标签2</li>
      <li>我是第5个li标签2</li>
    </ul>

    <script>
      $(function () {
        //append
        $("#btnAppend").click(function () {
          var $li32 = $("#li32");
          $("#ul1").append($li32);
        });
      });
    </script>
  </body>
</html>

(2)prepend方法

（1）新建一个li标签，添加到ul1中去.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style></style>
  </head>
  <body>
    <input type="button" value="append" id="btnAppend" />
    <input type="button" value="prepend" id="btnPrepend" />
    <input type="button" value="after" id="btnAfter" />
    <input type="button" value="before" id="btnBefore" />
    <input type="button" value="appendTo" id="btnAppendTo" />
    <ul id="ul1">
      <li>我是第1个li标签</li>
      <li>我是第2个li标签</li>
      <li id="li3">我是第3个1i标签</li>
      <li>我是第4个li标签</li>
      <li>我是第5个li标签</li>
    </ul>
    <ul id="ul2">
      <li>我是第1个li标签2</li>
      <li>我是第2个li标签2</li>
      <li id="li32">我是第3个li标签2</li>
      <li>我是第4个li标签2</li>
      <li>我是第5个li标签2</li>
    </ul>

    <script>
      $(function () {
        //prepend
        $("#btnPrepend").click(function () {
          var $liNew = $("<li>我是新li标签</li>");
          $("#ul1").prepend($liNew);
        });
      });
    </script>
  </body>
</html>

其他的可以以此类推，以append为标准

(3)before

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style></style>
  </head>
  <body>
    <input type="button" value="append" id="btnAppend" />
    <input type="button" value="prepend" id="btnPrepend" />
    <input type="button" value="after" id="btnAfter" />
    <input type="button" value="before" id="btnBefore" />
    <input type="button" value="appendTo" id="btnAppendTo" />
    <ul id="ul1">
      <li>我是第1个li标签</li>
      <li>我是第2个li标签</li>
      <li id="li3">我是第3个1i标签</li>
      <li>我是第4个li标签</li>
      <li>我是第5个li标签</li>
    </ul>
    <ul id="ul2">
      <li>我是第1个li标签2</li>
      <li>我是第2个li标签2</li>
      <li id="li32">我是第3个li标签2</li>
      <li>我是第4个li标签2</li>
      <li>我是第5个li标签2</li>
    </ul>

    <script>
      $(function () {
        //before
        $("#btnBefore").click(function () {
          var $liNew = $("<li>我是新li标签</li>");
          $("#ul1").beforeb($liNew);
        });
      });
    </script>
  </body>
</html>

 作为兄弟元素添加

（4）after

和before一样


（5）appendTo

和append一样，就是appendTo是由子元素.出来的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style></style>
  </head>
  <body>
    <input type="button" value="append" id="btnAppend" />
    <input type="button" value="prepend" id="btnPrepend" />
    <input type="button" value="after" id="btnAfter" />
    <input type="button" value="before" id="btnBefore" />
    <input type="button" value="appendTo" id="btnAppendTo" />
    <ul id="ul1">
      <li>我是第1个li标签</li>
      <li>我是第2个li标签</li>
      <li id="li3">我是第3个1i标签</li>
      <li>我是第4个li标签</li>
      <li>我是第5个li标签</li>
    </ul>
    <ul id="ul2">
      <li>我是第1个li标签2</li>
      <li>我是第2个li标签2</li>
      <li id="li32">我是第3个li标签2</li>
      <li>我是第4个li标签2</li>
      <li>我是第5个li标签2</li>
    </ul>

    <script>
      $(function () {
        //appendTo
        $("#btnAppendTo").click(function () {
          var $liNew = $("<li>我是新li标签</li>");
          $liNew.appendTo("#ul1");
        });
      });
    </script>
  </body>
</html>

(27)案例-城市选择

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style></style>
  </head>
  <body>
    <h1>城市选择:</h1>
    <select id="src-city" name="src-city" multiple>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">深圳</option>
      <option value="4">广州</option>
      <option value="5">西红柿</option>
    </select>
    <div class="btn-box">
      <!--实体字符-->
      <button id="btn-sel-all">&gt;&gt;</button>
      <button id="btn-sel-none">&lt;&lt;</button>
      <button id="btn-sel">&gt;</button>
      <button id="btn-back">&lt;</button>
    </div>
    <select id="tar-city" name="tar-city" multiple></select>

    <script>
      $(function () {
        //找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中去
        $("#btn-sel-all").click(function () {
          $("#src-city>option").appendTo("#tar-city");
        });

        //找到右边select下拉菜单的所有option项,把这些option项都添加到左边的select下拉菜单中去
        $("#btn-sel-none").click(function () {
          $("#tar-city>option").appendTo("#src-city");
        });

        //选中的到右边
        $("#btn-sel").click(function () {
          $("#src-city>option:selected").appendTo("#tar-city");
        });

        //选中的到左边
        $("#btn-back").click(function () {
          $("#tar-city>option:selected").appendTo("#src-city");
        });
      });
    </script>
  </body>
</html>

（28）清空结点empty（）和移除结点remove（）

empty 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style></style>
  </head>
  <body>
    <input type="button" value="按钮" id="btn" />
    <ul id="ul1">
      <li>我是第1个1i标签</li>
      <li>我是第2个li标签</li>
      <li id="li3">我是第3个li标签</li>
      <li>我是第4个li标签</li>
      <li>我是第5个li标签</li>
    </ul>

    <script>
      $(function () {
        $("#btn").click(function () {
          $("#ul1").empty();
        });
      });
    </script>
  </body>
</html>

remove

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style></style>
  </head>
  <body>
    <input type="button" value="按钮" id="btn" />
    <ul id="ul1">
      <li>我是第1个1i标签</li>
      <li>我是第2个li标签</li>
      <li id="li3">我是第3个li标签</li>
      <li>我是第4个li标签</li>
      <li>我是第5个li标签</li>
    </ul>

    <script>
      $(function () {
        $("#btn").click(function () {
          $("#li3").remove(); //自杀
        });
      });
    </script>
  </body>
</html>

 

（29）克隆结点clone（）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <style></style>
  </head>
  <body>
    <input type="button" value="克隆" id="clone" />
    <div id="div1">
      <span>span1</span>
      <p>p1 <b>b1</b></p>
    </div>
    <br /><br />

    <script>
      $(function () {
        $("#clone").click(function () {
          var $cloneDiv = $("#div1").clone();
          $("body").append($cloneDiv);
        });
      });
    </script>
  </body>
</html>

（30）val()设置或获取表单元素

 （31）操作属性

（1）单属性设置

（2）多属性设置 

(32)动态数据的添加和删除

 

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .wrap {
        width: 410px;
        margin: 100px auto 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
      }

      th,
      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
      }

      td {
        font: 14px "微软雅黑";
      }

      td a.get {
        text-decoration: none;
      }

      a.del:hover {
        text-decoration: underline;
      }

      tbody tr {
        background-color: #f0f0f0;
      }

      tbody tr:hover {
        cursor: pointer;
        background-color: #fafafa;
      }

      .btnAdd {
        width: 110px;
        height: 30px;
        font-size: 20px;
        font-weight: bold;
      }

      .form-item {
        height: 100%;
        position: relative;
        padding-left: 100px;
        padding-right: 20px;
        margin-bottom: 34px;
        line-height: 36px;
      }

      .form-item > .lb {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100px;
        text-align: right;
      }

      .form-item > .txt {
        width: 300px;
        height: 32px;
      }

      .mask {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.6;
        display: none;
      }

      #j_hideFormAdd {
        width: 22px;
        height: 22px;
        cursor: pointer;
        text-align: center;
        line-height: 22px;
        font-size: 18px;
      }
      #j_hideFormAdd:hover {
        background-color: skyblue;
      }
      .form-add {
        position: fixed;
        top: 30%;
        left: 50%;
        margin-left: -197px;
        padding-bottom: 20px;
        background: #fff;
        display: none;
      }

      .form-add-title {
        background-color: #f7f7f7;
        border-width: 1px 1px 0 1px;
        border-bottom: 0;
        margin-bottom: 15px;
        position: relative;
      }

      .form-add-title span {
        width: auto;
        height: 18px;
        font-size: 16px;
        font-family: 宋体;
        font-weight: bold;
        color: rgb(102, 102, 102);
        text-indent: 12px;
        padding: 8px 0px 10px;
        margin-right: 10px;
        display: block;
        overflow: hidden;
        text-align: left;
      }

      .form-add-title div {
        width: 16px;
        height: 20px;
        position: absolute;
        right: 10px;
        top: 6px;
        font-size: 30px;
        line-height: 16px;
        cursor: pointer;
      }

      .form-submit {
        text-align: center;
      }

      .form-submit input {
        width: 170px;
        height: 32px;
      }
    </style>
  </head>
  <body>
    <!--按钮和表单-->
    <div class="wrap">
      <div>
        <input
          type="button"
          value="添加数据"
          id="j_btnAddData"
          class="btnAdd"
        />
      </div>
      <table>
        <thead>
          <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
          </tr>
        </thead>
        <tbody id="j_tb">
          <tr>
            <td>JavaScript</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
          </tr>
          <tr>
            <td>css</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
          </tr>
          <tr>
            <td>html</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
          </tr>
          <tr>
            <td>jQuery</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">delete</a></td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--遮罩层-->
    <div id="j_mask" class="mask"></div>
    <!--添加数据的表单-->
    <div id="j_formAdd" class="form-add">
      <div class="form-add-title">
        <span>添加数据</span>

        <div id="j_hideFormAdd">×</div>
      </div>
      <div class="form-item">
        <label class="lb" for="j_txtLesson">课程名称：</label>
        <input
          class="txt"
          type="text"
          id="j_txtLesson"
          placeholder="请输入课程名称"
        />
      </div>
      <div class="form-item">
        <label class="lb" for="j_txtBelSch">所属学院：</label>
        <input
          class="txt"
          type="text"
          id="j_txtBelSch"
          value="传智播客-前端与移动开发学院"
        />
      </div>
      <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd" />
      </div>
    </div>
  </body>
</html>

<script src="./jquery-3.6.1.min.js"></script>
<script>
  $(function () {
    //需求1:点击 添加数据 按钮,显示添加面板和遮罩层.
    //需求2:点击添加面板里的关闭按钮,隐藏添加面板和遮罩层.
    //需求3:点击添加面板里的添加按钮,会把输入的内容生成一个tr,这个tr添加到tbody中
    //需求4:点击delete这些a标签,删除对应的tr.

    //需求1:
    $("#j_btnAddData").click(function () {
      $("#j_formAdd").show();
      $("#j_mask").show();
    });

    //需求2:
    $("#j_hideFormAdd").click(function () {
      $("#j_formAdd").hide();
      $("#j_mask").hide();
    });

    //需求3:
    $("#j_btnAdd").click(function () {
      //3.1 获取到用户输入的所属学院和课程名称.
      var txtLesson = $("#j_txtLesson").val(); //获取用户输入的课程名称
      var txtBelSch = $("#j_txtBelSch").val(); //获取用户输入的所属学院
      //3.2 把用户输入的课程名称和所属学院 ,创建出一个tr.
      var $trNew = $(
        "<tr>" +
          "<td>" +
          txtLesson +
          "</td>" +
          "<td>" +
          txtBelSch +
          "</td>" +
          '<td><a href="javascrip:;" class="get">delete</a></td>' +
          "</tr>"
      );

      //给新创建的这个$trNew里面的a标签添加一个事件.
      $trNew.find(".get").click(function () {
        //$(this).parent().parent().remove();
        $trNew.remove();
      });

      //3.3 把新创建的tr标签添加到tbody中.
      $("#j_tb").append($trNew);
      //3.4 把添加数据面板和遮罩层影藏起来.
      $("#j_hideFormAdd").click();
    });

    //4.需求
    $("#j_tb .get").click(function () {
      $(this).parent().parent().remove();
    });

    //页面出现了哈哈二字,说明上面的代码,包括需求4这个注册事件,都已经完成了.
    //说明原来的那4个tr已经注册了事件了.
    console.log("哈哈");
  });
</script>

（33）

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

前端哥

前端哥

发布的文章

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

jQuery 小技巧教程

2024-09-08 02:09:07

jQuery HashChange 插件指南

2024-09-08 02:09:07

jQuery-HAML 使用教程

2024-09-08 02:09:06

jquery.datetimepicker无法添加清除按钮的问题

2024-06-13 21:06:58

初识Jquery

2024-05-10 08:05:00

jQuery PJAX 使用教程

2024-09-08 02:09:03

大家推荐的文章
1

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

2024-03-03 11:03:011001
2

vue使用datav echarts

2024-09-06 00:09:381000
3

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
4

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
5

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
6

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
7

npm的使用

2024-08-18 00:08:131000
8

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
9

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
10

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

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

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

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

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

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