菜单 搜索
首页 前端知识 day37_jquery

day37_jquery

2024-02-27 11:02:07 前端知识 前端哥 875 600 我要收藏

今日内容

0 复习昨日
1 作业
2 JS和JQuery的互相转换【理解】
3 DOM
3.1 追加元素
3.2 删除元素
4 效果 【熟悉】
4.1 隐藏显示
4.2 淡入淡出
4.3 滑入滑出
4.4 动画
5 JQuery遍历【熟悉】
6 Ajax【重点】
6.1 FastMock网站
6.2 get
6.3 post(暂时不讲)
7 作业

0 复习昨日

1 css引入的三种方式

  1. css直接写在标签中
  2. 在html页面中使用style标签内写css
  3. 创建单独的css文件

2 js引入的三种方式

  1. js代码直接写在标签里面
  2. js代码放在页面中script标签中
  3. 创建单独js文件

3 jquery是啥,干啥的
jq是js框架,类库,封装js代码
jq操作BOM,DOM,动画,AJAX

4 jquery的三种基本选择器
id --> $("#id")
class --> $(".class")
element --> $("element")

5 jquery获得输入框的值
$(“input”).val()
6 获得/设置内容
val()
text()
html()
7 获得/设置属性
attr(name)
attr(name,value)
attr({name:value,name:value,…})
removeAttr(name)
8 获得/设置样式
addClass(classname)
removeClass(classname)
toggleClass(classname)
css(name)
css(name,value)
css({k1:v1,k2:v2,…})

1 作业

2 JS和JQuery的互相转换

JS操作是原生js操作,都是对象.属性操作

var ele = document.getElementById(id);
var val = ele.value;
ele.value = "";
ele.style = "";

JQuery是封装js操作,全是函数操作

$("#id").val();
$("#id").val("值");
$("#id").css("color","red");

JS和JQuery是不同的

  <body>
    <button id="btn">按钮</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      // js获得btn对象
      var jsBtn = document.getElementById("btn");
      // 原生js对象
      console.log(jsBtn);

      var jqBtn = $("#btn");
      // 这是一个JQuery对象,虽然是通过id获得的一个btn对象
      // 但是jq是将元素对象封装到jquery的数组中
      console.log(jqBtn);
    </script>
  </body>

2.1 将JQuery对象转换成JS对象

      // jquery转成js对象,只需要从jq数组中取出即可
      var jsObj = jqBtn[0];
      console.log(jsObj);

2.2 将JS对象转成JQuery对象

      // js转成jq对象,只需要将js对象装进jq数组中
      var jqObj = $(jsObj);
      console.log(jqObj);

3 DOM

3.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>

3.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>

4 效果

4.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>

4.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>

4.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>

4.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>

5 JQuery筛选查找

5.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>

5.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>

6 Ajax

ajax 是异步JavaScript和XML(Asynchronous JavaScript and XML)

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

使用ajax与服务器进行异步交互,向服务器发送数据,接收服务器发来的数据

PS: 因为现在还没有学习服务器,所以今天的AJAX讲基础的使用,后续学完servlet服务器技术,再来使用ajax

6.1 FastMock网站

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

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

6.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>

6.3 $.post(暂时不讲)

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

6.4 $.ajax

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

7 作业

关于前端重点

  • HTML 会一些标签
  • CSS 会样式(盒子,定位)
  • 原生js后续用的比较少
  • jquery是重点, 选择器,和dom操作,ajax
0 昨天没有全部完成，补全
0 重复一遍代码
1 jq实现图书管理
2 使用jq+正则完成表单校验
检验规则：
 • 帐号：不能为空，长度6~10之间，只能包含数字和字母
 • 密码：不能为空，长度6~10
 • 确认密码：要与密码一致
 • 手机号：不能为空，满足手机号码规则
 • 邮箱：不能为空，满足邮箱格式规则
3 预习mysql

r.sname+“”+
“”+user.score+“”+
“”+user.cid+“”+
“”+user.sbirthday+“”+
“”+user.zid+“”+
“”)
}
}
}
);
});


## 6.3 $.post(暂时不讲)

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

## 6.4 $.ajax

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

# 7 作业

> 关于前端重点
>
> - HTML 会一些标签
> - CSS 会样式(盒子,定位)
> - 原生js后续用的比较少
> - jquery是重点, 选择器,和dom操作,ajax

0 昨天没有全部完成，补全
0 重复一遍代码
1 jq实现图书管理
2 使用jq+正则完成表单校验
检验规则：
• 帐号：不能为空，长度6~10之间，只能包含数字和字母
• 密码：不能为空，长度6~10
• 确认密码：要与密码一致
• 手机号：不能为空，满足手机号码规则
• 邮箱：不能为空，满足邮箱格式规则
3 预习mysql
转载请注明出处或者链接地址：https://www.qianduange.cn//article/2833.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

【华为OD机试真题 JS语言】423、项目排期 、最快完成所有工作的天数 | 机试真题 思路参考 代码解析（最新C卷抽中）（通过率较高，但遇大数时间复杂度高，需优化）

2024-03-14 00:03:50

JQ效果—展开和收起

2024-03-13 00:03:45

【web前端技术】响应式画廊Gallery插件-Justified-Gallery

2024-03-13 00:03:44

jQuery怎样获得内容和属性？

2024-03-13 00:03:39

如何在正则表达式里加入变量

2024-03-13 00:03:39

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery简介及起步

2024-03-13 00:03:38

html css jquery实现轮播图自动切换、左右切换、点击切换

2024-03-13 00:03:36

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
1

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

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

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

2024-02-04 11:02:521000
6

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

2024-01-27 01:01:181000
7

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

2024-03-13 00:03:28999
8

jQuery事件处理

2024-03-12 01:03:32999
9

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999
10

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

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

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

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

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

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