Java jQuery_2

最新推荐文章于 2024-10-06 20:16:20 发布

Wait Together

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量60

点赞数

分类专栏： Java 第二阶段文章标签： java jquery html5 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_65030141/article/details/129537459

版权

Java 第二阶段专栏收录该内容

17 篇文章 0 订阅

订阅专栏

零、复习昨日

JQuery功能: 文档操作,事件处理,动画设计,ajax交互
事件
jq中的事件 1）全部都是函数 2）事件名去掉on即可
dom操作
获得设置元素内容
html()
text()
val()
获得设置元素属性
attr(属性)
attr(属性,值)
attr({key:value,key:value,key:value})
removeAttr(属性)
获得设置元素样式
css(属性)
css(属性,值)
css({})
addCss()
removeClass(class)
toggleCss()

一、DOM

1.1 追加元素

内部追加,追加的元素变成子元素
append 追加,元素内部后面追加
prepend 追加,元素内部前面追加

外部追加,追加的元素变成了兄弟元素
after 追加,元素外部后面追加
before 追加,元素外部前面追加

  <body>
    <div id="box" style="width: 500px; height: 300px; border: 2px red solid">
      <div
        id="box-1"
        style="width: 100px; height: 100px; background-color: green"
      ></div>
    </div>
    <button id="btn-1">元素内部后面追加</button>
    <button id="btn-2">元素内部前面追加</button>
    <button id="btn-3">元素外部后面追加</button>
    <button id="btn-4">元素外部前面追加</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(() => {
        // 元素内部后面
        $("#box").append(
          "<div style='width: 100px; height: 100px; background-color: yellow'></div>"
        );
      });

      $("#btn-2").click(() => {
        // 元素内部,前面追加
        $("#box").prepend(
          "<div style='width: 100px; height: 100px; background-color: blue'></div>"
        );
      });

      $("#btn-3").click(() => {
        // 元素外部,后面追加
        $("#box").after(
          "<div style='width: 100px; height: 100px; background-color: pink'></div>"
        );
      });
      $("#btn-4").click(() => {
        // 元素外部,前面追加
        $("#box").before(
          "<div style='width: 100px; height: 100px; background-color: purple'></div>"
        );
      });
    </script>
  </body>

1.2 删除元素

删除元素
empty() 删除子元素及内容,保留自己
remove() 删除全部元素,包括自己
remove(选择器) 删除指定选择器选到的元素

  <body>
    <div id="box" style="width: 500px; height: 300px; border: 2px red solid">
      <div
        id="box-1"
        style="width: 100px; height: 100px; background-color: green"
      ></div>
    </div>
    <button id="btn-1">元素内部后面追加</button>
    <button id="btn-2">元素内部前面追加</button>
    <button id="btn-3">元素外部后面追加</button>
    <button id="btn-4">元素外部前面追加</button>
    <button id="btn-5">empty删除元素,删除子元素</button>
    <button id="btn-6">remove删除元素,删除所有元素</button>
    <button id="btn-7">remove(选择器)删除元素,删除指定元素</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(() => {
        // 元素内部后面
        $("#box").append(
          "<div style='width: 100px; height: 100px; background-color: yellow'></div>"
        );
      });

      $("#btn-2").click(() => {
        // 元素内部,前面追加
        $("#box").prepend(
          "<div style='width: 100px; height: 100px; background-color: blue'></div>"
        );
      });

      $("#btn-3").click(() => {
        // 元素外部,后面追加
        $("#box").after(
          "<div style='width: 100px; height: 100px; background-color: pink'></div>"
        );
      });
      $("#btn-4").click(() => {
        // 元素外部,前面追加
        $("#box").before(
          "<div style='width: 100px; height: 100px; background-color: purple'></div>"
        );
      });

      $("#btn-5").click(() => {
        // 删除子元素,保留自己
        $("#box").empty();
      });

      $("#btn-6").click(() => {
        // 删除所有元素,包括自己
        $("#box").remove();
      });

      $("#btn-7").click(() => {
        // 删除选中元素(选中元素必须是选择到多个)中再次选中的元素
        $("div").remove("#box-1");
      });
    </script>
  </body>

二、效果

2.1 隐藏显示

show 无动画直接显示
show(speed,[callback]) 以指定速度完成显示,动作完成会触发回调函数
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
hide 无动画直接隐藏
hide(speed,[callback]) 以指定速度完成隐藏,动作完成会触发回调函数
速度的写法
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

 <body>
    <div
      id="box-1"
      style="width: 200px; height: 200px; background-color: red"
    ></div>
    <button id="btn-1">无动画直接隐藏</button>
    <button id="btn-2">有动画隐藏</button>
    <button id="btn-3">无动画直接显示</button>
    <button id="btn-4">有动画显示</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(() => {
        $("#box-1").hide();
      });
      $("#btn-2").click(() => {
        // $("#box-1").hide(3000); // 毫秒值
        // $("#box-1").hide("fast");  // 固定速度单词
        $("#box-1").hide(3000, () => {
          alert("动作完成!");
        });
      });
      $("#btn-3").click(() => {
        $("#box-1").show();
      });

      $("#btn-4").click(() => {
        $("#box-1").show(3000);
      });
    </script>
  </body>

2.2 淡入淡出

fadeIn(speed,[callback]) 淡入
fadeOut(speed,[callback]) 淡出
fadeTo(speed,opacity,[callback]) 淡入/淡出到指定透明度
opacity 不透明,参数是数字,值是0-1之间
0是完全透明 1是完全不透明
fadeToggle(speed,[callback]) 淡入/淡出效果切换

  <body>
    <div
      id="box-1"
      style="width: 200px; height: 200px; background-color: red"
    ></div>
    <button id="btn-1">淡入-显示</button>
    <button id="btn-2">淡出-隐藏</button>
    <button id="btn-3">淡入/淡出到指定程度</button>
    <button id="btn-4">淡入/淡出切换</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(() => {
        $("#box-1").fadeIn(2000);
      });

      $("#btn-2").click(() => {
        $("#box-1").fadeOut(2000);
      });

      $("#btn-3").click(() => {
        // 参数2是透明度,0-1之间
        // 0完全透明 1完全不透明
        $("#box-1").fadeTo(2000, 0.33);
      });
      $("#btn-4").click(() => {
        $("#box-1").fadeToggle(2000);
      });
    </script>
  </body>

2.3 滑入滑出

slideDown(speed, [callback]) 从上至下滑入
slideUp(speed, [callback]) 从下至上滑出
slideToggle(speed, [callback]) 切换

  <body>
    <div
      id="box-1"
      style="width: 200px; height: 200px; background-color: red"
    ></div>
    <button id="btn-1">滑入-显示</button>
    <button id="btn-2">滑出-隐藏</button>
    <button id="btn-3">滑入/滑出切换</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(() => {
        $("#box-1").slideDown(2000);
      });

      $("#btn-2").click(() => {
        $("#box-1").slideUp(2000);
      });

      $("#btn-3").click(() => {
        $("#box-1").slideToggle(2000);
      });
    </script>
  </body>

2.4 动画

animate(参数1,参数2,参数3)
参数1 样式集合,用json形式写
参数2 速度,用速度单词,或者使用时间,毫秒
参数3 回调函数

  <body>
    <button id="go">Run</button>
    <div id="block">Hello!</div>
    <hr />
    <button id="left">«</button> <button id="right">»</button>
    <button id="change">变形</button>
    <div
      class="block"
      style="width: 100px; height: 100px; background-color: red"
    ></div>
    <script src="./js/jquery-2.1.0.js"></script>
    <script src="./js/jquery.color.js"></script>
    <script>
      $("#go").click(function () {
        $("#block").animate(
          {
            width: "90%",
            height: "100%",
            fontSize: "10em",
            borderWidth: 10,
          },
          2000
        );
      });

      $("#right").click(function () {
        $(".block").animate({ marginLeft: "50px" }, "slow");
      });

      $("#left").click(function () {
        $(".block").animate({ marginLeft: "0px" }, "slow");
      });

      /**
       * JQuery动画里面默认不支持颜色设置
       * 需要外部设置一个颜色js,再引入
       */
      $("#change").click(function () {
        $(".block").animate(
          {
            backgroundColor: "green",
            borderRadius: "50px",
            marginLeft: "100px",
          },
          2000
        );
      });
    </script>
  </body>

三、JQuery筛选查找

3.1 过滤

  <body>
    <div>
      <p>第一段</p>
      <p>第二段</p>
      <p class="p3">第三段</p>
      <p>第四段</p>
    </div>
    <button id="btn-1">eq(1)</button>
    <button id="btn-2">first</button>
    <button id="btn-3">last</button>
    <button id="btn-4">filter</button>
    <button id="btn-5">not</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(function () {
        // eq根据下标找到元素,下标从0开始
        console.log($("p").eq(1).text());
      });

      $("#btn-2").click(function () {
        // 返回第一个
        console.log($("p").first().text());
      });

      $("#btn-3").click(function () {
        console.log($("p").last().text());
      });

      $("#btn-4").click(function () {
        // filter是在前面选择器,再留下指定选择器的内容
        console.log($("p").filter(".p3").text());
      });

      $("#btn-5").click(function () {
        // not是在前面选择器,去掉指定选择器的内容
        console.log($("p").not(".p3").text());
      });
    </script>
  </body>

3.2 查找

查找祖先
parent() 直接父级
parents() 查找所有祖先,包括到html根标签
parentsUntil(元素) 返回所有父级,直到指定元素停止

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>查找</title>
    <style>
      div {
        border: 3px red solid;
      }
    </style>
  </head>
  <body>
    <button id="btn-1">找直接祖先</button>
    <button id="btn-2">找所有祖先</button>
    <button id="btn-3">找所有祖先,直到body停</button>
    <div id="box-1" style="width: 700px; height: 700px">
      box-1
      <div id="box-2" style="width: 400px; height: 400px">
        box-2
        <div id="box-3" style="width: 100px; height: 100px">box-3</div>
        <div id="box-4" style="width: 100px; height: 100px">box-4</div>
        <div id="box-5" style="width: 100px; height: 100px">box-5</div>
      </div>
    </div>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(() => {
        // 找到box-3的直接祖先,让其边框变黄
        $("#box-3").parent().css("border-color", "yellow");
      });

      $("#btn-2").click(() => {
        // 找到box-3的所有祖先,直到html
        // $("#box-3").parents().css("border-color", "yellow");
        console.log($("#box-3").parents());
      });

      $("#btn-3").click(() => {
        // 找到box-3的所有祖先,直到直到的元素停止,不包含该元素
        // $("#box-3").parentsUntil("body").css("border-color", "yellow");
        console.log($("#box-3").parentsUntil("body"));
      });
    </script>
  </body>
</html>

查找后代
children() 返回直接后代(子)
find(选择器) 返回所有后代,再跟进指定选择器过滤

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>查找</title>
    <style>
      div {
        border: 3px red solid;
      }
    </style>
  </head>
  <body>
    <button id="btn-4">找直接后代</button>
    <button id="btn-5">找所有后代再过滤</button>
    <div id="box-1" style="width: 700px; height: 700px">
      box-1
      <div id="box-2" style="width: 400px; height: 400px">
        box-2
        <div id="box-3" class="sunzi" style="width: 100px; height: 100px">
          box-3
        </div>
        <div id="box-4" class="sunzi" style="width: 100px; height: 100px">
          box-4
        </div>
        <div id="box-5" class="sunzi" style="width: 100px; height: 100px">
          box-5
        </div>
      </div>
    </div>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-4").click(() => {
        // 找box-1的直接后代
        $("#box-1").children().css("border-color", "yellow");
      });

      $("#btn-5").click(() => {
        // 找box-1的所有后代,再根据find中的选择器再过滤
        // $("#box-1").find("*").css("border-color", "yellow");
        $("#box-1").find(".sunzi").css("border-color", "yellow");
      });
    </script>
  </body>
</html>

查找兄弟
siblings() 所有兄弟
next() 下一个兄弟
prev() 上一个兄弟

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>查找</title>
    <style>
      div {
        border: 3px red solid;
      }
    </style>
  </head>
  <body>
    <button id="btn-1">找直接祖先</button>
    <button id="btn-2">找所有祖先</button>
    <button id="btn-3">找所有祖先,直到body停</button>
    <hr />
    <button id="btn-4">找直接后代</button>
    <button id="btn-5">找所有后代再过滤</button>
    <hr />
    <button id="btn-6">找box-4所有兄弟</button>
    <button id="btn-7">找box-4前一个兄弟</button>
    <button id="btn-8">找box-4后一个兄弟</button>
    <div id="box-1" style="width: 700px; height: 700px">
      box-1
      <div id="box-2" style="width: 400px; height: 400px">
        box-2
        <div id="box-3" class="sunzi" style="width: 100px; height: 100px">
          box-3
        </div>
        <div id="box-4" class="sunzi" style="width: 100px; height: 100px">
          box-4
        </div>
        <div id="box-5" class="sunzi" style="width: 100px; height: 100px">
          box-5
        </div>
      </div>
    </div>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-6").click(() => {
        // 找box-4的所有兄弟
        $("#box-4").siblings().css("border-color", "green");
        // console.log($("#box-4").siblings());
      });

      $("#btn-7").click(() => {
        // 找box-4的前一个兄弟
        $("#box-4").prev().css("border-color", "green");
      });
      $("#btn-8").click(() => {
        // 找box-4的后一个兄弟
        $("#box-4").next().css("border-color", "#007acc");
      });
    </script>
  </body>
</html>

四、Ajax

ajax 是异步JavaScript和XML(Asynchronous JavaScript and XML)
==异步==,页面中科院同时进行多个事情
经典案例: 注册框,输入完用户名直接提示"已注册"
这就是异步,也就是==局部刷新==

使用ajax与服务器进行异步交互,向服务器发送数据,接收服务器发来的数据
PS: 因为现在还没有学习服务器,所以今天的AJAX讲基础的使用,后续学完servlet服务器技术,再来使用ajax

4.1 FastMock网站

这个网站是用来模拟一个服务器地址,这个服务器可以提供一些数据,等会儿使用ajax请求这个服务器的数据

https://www.fastmock.site/mock/5c9f6e1ec0552bd6a3f2a62cb823edc0/qiushiju/users

4.2 $.get

get请求一般用来从服务器获得数据,一般就是用来查询数据

// $.get() 可以向服务器发送一个get请求
// $.get(url, [data], [callback], [type])
// url是服务器路径,必填
// data,是向服务器发送的数据,可选
// callback,请求完成后的回调函数,可选
// type,返回内容类型,可选

<!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>
  </head>
  <body>
    <button id="btn">$.get --> go</button>
    <table border="2" id="tb-users">
      <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>分数</td>
        <td>班号</td>
        <td>生日</td>
        <td>组号</td>
      </tr>
    </table>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn").click(function () {
        // 发送ajax的get请求
        // 回调函数是,请求完成后执行的函数
        // 回调函数中,设置一个参数,参数就是服务器返回的数据
   $.get("https://www.fastmock.site/mock/5c9f6e1ec0552bd6a3f2a62cb823edc0/qiushiju/users",
          function (ret) {
            alert("发送请求成功!");
            console.log(ret);
            if (ret.status == 200) {
              var dataArr = ret.data;
              for (var i = 0; i < dataArr.length; i++) {
                var user = dataArr[i];
                $("#tb-users").append("<tr>"+
                    "<td>"+user.sid+"</td>"+
                    "<td>"+user.sname+"</td>"+
                    "<td>"+user.score+"</td>"+
                    "<td>"+user.cid+"</td>"+
                    "<td>"+user.sbirthday+"</td>"+
                    "<td>"+user.zid+"</td>"+
                    "</tr>")
              }
            }
          }
        );
      });
    </script>
  </body>
</html>

4.3 $.post(暂时不讲)

post一般是向服务器发送数据的,一般是用来添加

4.4 $.ajax

$.ajax 向服务器发送请求,这种写法很灵活,可以设置请求中的任何参数

$.ajax({
	url:"",// 服务器路径
	type:"",// 请求是你的hi，默认是get
	data:"",// 向服务器发送的数据
    success:function() {
        // 成功的回调函数，参数就是服务器发送的数据
    },
    error:function() {
        // 失败的回调函数，
    }
})