• 【JavaWeb - 网页编程】四 jQuery 操作

    第四章 jQuery 操作

    创作日期：2021-12-22

    4.1 jQuery 的属性操作

    • html() 设置和获取起始标签和结束标签中的内容
    • text() 设置和获取起始标签和结束标签中的文本
    • val() 设置和获取表单项的 value 属性值
    • attr() 设置和获取属性的值
    • prop() 设置和获取属性的值
    2. <body>
    3. <div>我是div标签<span>我是div中的span标签span>div>
    4. 姓名：<input type="text" value="请输入...">
    5. <div style="border: red 2px solid">divReddiv>
    6. <div id="002" name="div02">divdiv>
    7. body>
    1. /* JS-jQuery */
    2. $(document).ready(function(){
    3.     alert($("div").html()); //我是div标签我是div中的span标签
    4.     alert($("div").text()); //我是div标签我是div中的span标签
    5.     alert($("input").val()); //请输入...
    6.     alert($("div").eq(1).attr("style")); //border: red 2px solid
    7.     alert($("#002").attr("name")); //div02
    8. });

    4.2 DOM 的增删改

    4.2.1 内部插入

    • a.appendTo(b)   把 a 标签插入到 b 标签中元素的末尾，成为最后一个子元素

    • a.prependTo(b)  把 a 标签插入到 b 标签中元素的前面，成为第一个子元素

    2. <body>
    3. <div>divdiv>
    4. body>
    5.  
    1. /* JS-jQuery */
    2. $(document).ready(function(){
    3.    $("
      h1
      "      ).appendTo("div");
    4.     $("
      h2
      "      ).prependTo("div");
    5. });

    4.2.2 外部插入

    • a.insertAfter(b)   将 b 标签插入 a 标签之后
    • a.insertBefore(b)   将 b 标签插入 a 标签之前
    1. /* JS-jQuery */
    2. $(document).ready(function(){
    3.    $("
      h1
      "      ).insertAfter("div");
    4.     $("
      h2
      "      ).insertBefore("div");
    5. });

    4.2.3 替换

    • a.replaceWith(b) 将 a 标签换成 b 标签
    • a.replaceAll(b) 将 a 标签换成 b 标签
    1. /* JS-jQuery */
    2. $(document).ready(function(){
    3.    $("div").replaceWith("
      h1
      "      );
    4.    $("
      h1
      "      ).replaceAll("div");
    5. });

    4.2.4 删除

    • a.remove() 删除 a 标签
    • a.empty() 清空 a 标签内的内容
    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>html1title>
    7.     <script src="https://code.jquery.com/jquery-1.7.2.min.js">script>
    8.     <script type="text/javascript" src="js/hello.js">script>
    9.     <link rel="stylesheet" type="text/css" href="css/hello.css">
    10. head>
    11. <body>
    12. <div id="div1">div1div>
    13. <div class="div2">div2div>
    14. body>
    15. html>
    1. /* JS-jQuery */
    2. $(document).ready(function(){
    3.    $("#div1").remove();
    4.    $(".div2").empty();
    5. });

    4.3 jQuery 操作练习

    4.3.1 从左到右，从右到左

    2. <body>
    3. <div id="left">
    4.     <select multiple="multiple" id="sel01">
    5.         <option value="opt01">选项1option>
    6.         <option value="opt01">选项2option>
    7.         <option value="opt01">选项3option>
    8.         <option value="opt01">选项4option>
    9.         <option value="opt01">选项5option>
    10.         <option value="opt01">选项6option>
    11.     select>
    12.     <button>选中添加到右边button>
    13.     <button>全部添加到右边button>
    14. div>
    15. <div id="right">
    16.     <select multiple="multiple" id="sel02">
    17.     select>
    18.     <button>选中添加到左边button>
    19.     <button>全部添加到左边button>
    20. div>
    21. body>
    1. /* CSS */
    2. select{
    3.     width: 100px;
    4.     height: 140px;
    5. }
    6. div{
    7.     width: 130px;
    8.     float: left;
    9.     text-align: center;
    10. }
    1. /* JS-jQuery */
    2. $(document).ready(function () {
    3.     //第一个按钮 选中添加到右边
    4.     $("button:eq(0)").click(function () {
    5.         $("#sel01 option:selected").appendTo($("#sel02"));
    6.     });
    7.  
    8.     //第二个按钮 全部添加到右边
    9.     $("button:eq(1)").click(function () {
    10.         $("#sel01 option").appendTo($("#sel02"));
    11.     });
    12.  
    13.     //第三个按钮 选中添加到左边
    14.     $("button:eq(2)").click(function () {
    15.         $("#sel02 option:selected").appendTo($("#sel01"));
    16.     });
    17.  
    18.    //第四个按钮 全部添加到右边
    19.    $("button:eq(3)").click(function () {
    20.       $("#sel02 option").appendTo($("#sel01"));
    21.    });
    22. });

    4.3.2 表格的动态添加与删除行记录

    2. <body>
    3. <table id="employeeTable" align="center" border="1" width="200" height="200" cellspacing="0">
    4.     <tr>
    5.         <th>Nameth>
    6.         <th>Emailth>
    7.         <th>Salaryth>
    8.         <th>Actionth>
    9.     tr>
    10.     <tr>
    11.         <td>Tomtd>
    12.         <td>tom@tom.comtd>
    13.         <td>5000td>
    14.         <td><a href="deleteEmp?id=001">Deletea>td>
    15.     tr>
    16.     <tr>
    17.         <td>Jerrytd>
    18.         <td>jerry@jerry.comtd>
    19.         <td>8000td>
    20.         <td><a href="deleteEmp?id=002">Deletea>td>
    21.     tr>
    22.     <tr>
    23.         <td>Bobtd>
    24.         <td>bob@bob.comtd>
    25.         <td>2000td>
    26.         <td><a href="deleteEmp?id=003">Deletea>td>
    27.     tr>
    28. table>
    29. <div id="formDiv" align="center"  >
    30.     <h4>添加新员工h4>
    31.     <table >
    32.         <tr>
    33.             <td class="word">name：td>
    34.             <td class="inp">
    35.                 <input type="text" name="empName" id="empName">
    36.             td>
    37.         tr>
    38.         <tr>
    39.             <td class="word">email：td>
    40.             <td class="inp">
    41.                 <input type="text" name="email" id="email">
    42.             td>
    43.         tr>
    44.         <tr>
    45.             <td class="word">salary：td>
    46.             <td class="inp">
    47.                 <input type="text" name="salary" id="salary">
    48.             td>
    49.         tr>
    50.         <tr>
    51.             <td colspan="2" align="center">
    52.                 <button id="addEmpButton" value="abc">
    53.                     Submit
    54.                 button>
    55.             td>
    56.         tr>
    57.     table>
    58. div>
    59. body>
    1. /* JS-jQuery */
    2. $(document).ready(function () {
    3.     //创建一个删除复用函数
    4.     var delFun = function (){
    5.         //this 表示当前调用函数的对象
    6.         var $reObj = $(this).parent().parent();
    7.         var name = $reObj.find("td:first").text();
    8.         if ( confirm("你确定要删除"+ name +"吗?")){
    9.             $reObj.remove();
    10.         }
    11.         //返回 false 页面不会进行跳转
    12.         return false;
    13.     }
    14.  
    15.     //给按钮绑定单击事件
    16.     $("#addEmpButton").click(function (){
    17.         //获取输入框输入的姓名 邮箱 和 薪资
    18.         var newName = $("#empName").val();
    19.         var newEmail = $("#email").val();
    20.         var newSalary = $("#salary").val();
    21.     //创建一个行标签对象添加到显示数据的表格中
    22.         var $trObj = $("\n" +
    23.             "        "+newName+"\n" +
    24.             "        "+newEmail+"\n" +
    25.             "        "+newSalary+"\n" +
    26.             "        Delete\n" +
    27.             "    ");
    28.         //添加到显示数据的表格中
    29.         $trObj.appendTo($("#employeeTable"));
    30.         $trObj.find("a").click(delFun);
    31.     });
    32.  
    33.     //给 a 标签绑定单击事件
    34.     $("a").click(delFun);
    35. });

    4.4 CSS 样式操作

    • addClass() 添加样式
    • removeClass() 删除样式
    • toggleClass() 有就删除，没有就添加样式
    • offset() 获取和设置元素的坐标
    2. <body>
    3. <table align="center">
    4.     <tr>
    5.         <td>
    6.             <div class="border">div>
    7.         td>
    8.         <td>
    9.             <div class="btn">
    10.                 <input type="button" value="addClass()" id="btn01">
    11.                 <input type="button" value="removeClass()" id="btn02">
    12.                 <input type="button" value="toggleClass()" id="btn03">
    13.                 <input type="button" value="offset()" id="btn04">
    14.             div>
    15.         td>
    16.     tr>
    17. table>
    18. body>
    1. /* CSS */
    2. div{
    3.     width: 100px;
    4.     height: 260px;
    5. }
    6. div.whiteborder{
    7.     border: 2px white solid;
    8. }
    9. div.redDiv{
    10.     background-color: red;
    11. }
    12. div.blueBorder{
    13.     border: 5px blue solid;
    14.  
    15. }
    1. /* JS-jQuery */
    2. $(document).ready(function () {
    3.     var $div = $("div:first");
    4.  
    5.     //添加样式/一次添加多个样式
    6.     $("#btn01").click(function () {
    7.         $div.addClass("redDiv blueBorder");
    8.     });
    9.  
    10.     //删除样式/一次删除多个样式
    11.     $("#btn02").click(function () {
    12.         $div.removeClass("redDiv blueBorder");
    13.     });
    14.  
    15.     //有就删除，没有就添加样式
    16.     $("#btn03").click(function () {
    17.         $div.toggleClass("redDiv blueBorder");
    18.     });
    19.  
    20.     //offset() 获取和设置元素的坐标
    21.     $("#btn04").click(function () {
    22.         var offset = $div.offset();
    23.        console.log(offset);
    24.     });
    25.      //offset() 设置元素的坐标
    26.     $("#btn04").click(function () {
    27.         $div.offset(
    28.             {
    29.                 top:100,
    30.                 left:100
    31.             }
    32.         );
    33.     });
    34. });

    4.5 jQuery 动画

    • 基本动画
      • show() 显示元素
      • hide() 隐藏元素
      • toggle() 元素未显示则进行显示，显示则进行隐藏
    • 淡入淡出动画
      • fadeIn() 淡入
      • fadeOut() 淡出
      • fadeTo() 在指定时长内将透明度修改到指定的值
      • fadeToggle() 淡入/淡出 切换
    1. <body>
    2. <img src="photo/JavaWeb.jpeg" >
    3. <button id="btn01">show()button>
    4. <button id="btn02">hide()button>
    5. <button id="btn03">toggle()button>
    6. body>
    1. /* CSS */
    2. img{
    3.     width: 500px;
    4.     height: 500px;
    5. }
    1. /* JS-jQuery */
    2. $(document).ready(function () {
    3.     var $img = $("img");
    4.     //显示
    5.     $("#btn01").click(function () {
    6.         $img.show(1000,function () {
    7.             alert("show动画完成");
    8.         });
    9.     });
    10.  
    11.     //隐藏
    12.     $("#btn02").click(function () {
    13.         $img.hide(1000,function () {
    14.             alert("hide动画完成");
    15.         });
    16.     });
    17.  
    18.     //隐藏就显示，显示就隐藏
    19.     $("#btn03").click(function () {
    20.         $img.toggle(1000,function () {
    21.             alert("toggle动画完成");
    22.         });
    23.     });
    24.  
    25.     //淡入
    26.     $("#btn04").click(function () {
    27.         $img.fadeIn(3000,function () {
    28.             alert("fadeIn动画完成");
    29.         });
    30.     });
    31.  
    32.     //淡出
    33.     $("#btn05").click(function () {
    34.         $img.fadeOut(3000,function () {
    35.             alert("fadeOut动画完成");
    36.         });
    37.     });
    38.  
    39.     //在指定时长内将透明度修改到指定的值
    40.     $("#btn06").click(function () {
    41.         $img.fadeTo(3000,0.5,function () {
    42.             alert("fadeTo动画完成");
    43.         });
    44.     });
    45.  
    46.     //淡入/淡出 切换
    47.     $("#btn07").click(function () {
    48.         $img.fadeToggle(3000,function () {
    49.             alert("fadeToggle动画完成");
    50.         });
    51.     });
    52. });

    4.6 jQuery 事件操作

    4.6.1 $(document).ready(function () {} 与 window.onload = function(){} 的区别

    • 触发时间：
      • jQuery 在浏览器解析完标签，创建好 DOM 对象之后执行
      • 原生 js 在浏览器解析完标签，创建好 DOM 对象，加载完成标签内容之后执行

    4.6.2 jQuery 中其他的事件处理方法

    • click() 绑定单击事件与触发单击事件
    • mouseover() 鼠标移入事件
    • mouseout() 鼠标移出事件
    • bind() 一次性可以绑定一个或多个事件
    • one() 一次性可以绑定一个或多个事件，但每次事件只能响应一次
    • unbind() 解除事件的绑定 可一次解除多个
    2. <body>
    3. <div id="panel" align="center">
    4.     <h5 class="head">什么是jQuery?h5>
    5.     <div class="content">
    6.         jQuery是一个优秀的JavaScript库
    7.     div><br>
    8.     <button>按钮button>
    9. div>
    10. body>
    1. /* CSS */
    2. #panel {
    3.     margin: auto;
    4.     width: 400px;
    5.     height: 200px;
    6.     border: blue 1px solid;
    7. }
    8.  
    9. div.red{
    10.     background-color: red;
    11. }
    12.  
    13. .content {
    14.     display: none;
    15. }
    1. /* JS-jQuery */
    2. $(document).ready(function () {
    3.     //click 单击事件
    4.     $("h5").click(function () { //click绑定事件
    5.        $(".content").show();
    6.     });
    7.     $("button").click(function () {
    8.         $("h5").click(); //click触发事件
    9.     });
    10.  
    11.     //mouseover 鼠标移入事件
    12.     $("div:first").mouseover(function () {
    13.         $("div:first").addClass("red");
    14.     });
    15.  
    16.     //mouseout 鼠标移入事件
    17.     $("div:first").mouseout(function () {
    18.         $("div:first").removeClass("red");
    19.     });
    20.  
    21.     //bind 一次性可以绑定一个或多个事件
    22.     $("button").bind("click mouseover mouseout",function () {
    23.         alert("禁止操作");
    24.     });
    25.  
    26.     //one 一次性可以绑定一个或多个事件，但每次事件只能响应一次
    27.     $("button").one("click mouseover mouseout",function () {
    28.         alert("禁止操作");
    29.     });
    30.  
    31.     //unbind 解除事件的绑定 可一次解除多个
    32.     $("div:first").unbind("mouseover mouseout");
    33. });

    4.6.3 事件的冒泡

            事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。在事件函数体内，return false；可以组织事件的冒泡传递

    2. <body>
    3. <div id="div01">
    4.     我是div(父)<span>   我是span(子)span>
    5. div>
    6. body>
    1. /* JS-jQuery */
    2. $(document).ready(function () {
    3.     $("#div01").click(function () {
    4.        alert("我是div(父)");
    5.     });
    6.     $("span").click(function () {
    7.         alert("我是span(子)");
    8.         return false;
    9.     });
    10. });

    4.6.4 javaScript 事件对象

    事件对象，是封装有触发的事件信息的一个 javaScript  对象

    1. //jQuery 代码获取事件对象
    2. $(document).ready(function () {
    3.     $("#div01").click(function (even) {
    4.       console.log(even);
    5.     });
    6. });
    1. // 当使用 bind 方法同时绑定多个事件时，获取获取事件对象来决定执行命令
    2. /* JS-jQuery */
    3. $(document).ready(function () {
    4.     //bind 一次性可以绑定一个或多个事件
    5.     $("#panel").bind("click mouseover mouseout",function (even) {
    6.        if(even.type == "mouseover"){
    7.            $("#panel").addClass("red");
    8.        }else if(even.type == "mouseout"){
    9.            $("#panel").removeClass("red");
    10.        }
    11.     });
    12. });

    上一节：

    下一节：

  • 相关阅读:
    HTML+CSS+JS静态网页设计【二十四节气】期末课程大作业
    面向对象基础
    ClickHouse(17)ClickHouse集成JDBC表引擎详细解析
    软件测试的一些心得和建议
    【论文笔记】Language Models are Few-Shot Learners
    专利申请流程细节问答（Q & A）
    spring-2.5.6升级为spring-4.3.13过程记录
    Creo 9.0 中几何对象的选取方法
    Java处理Excel：从POI到SPL
    【电源专题】LDO基础——热性能1
  • 原文地址：https://blog.csdn.net/woailuo8214/article/details/125868200