第三章 jQuery

最新推荐文章于 2024-10-15 09:29:39 发布

万有引力_LH

最新推荐文章于 2024-10-15 09:29:39 发布

阅读量303

点赞数

分类专栏：前端文章标签： jquery css 前端

本文链接：https://blog.csdn.net/weixin_43352648/article/details/128025359

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

内容来源于蓝桥杯竞赛，自己根据这个题纲重新巩固下前端的知识

第三章 jQuery

基本选择器

元素选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>元素选择器</title>
    <script>
      $(function () {
        $("div").css("color", "blue"); // 设置 div 标签中的字体颜色为蓝色
        $("div").css("text-align", "center"); // 设置 div 标签中的字居中
        $("div").css("width", "100px"); // 设置 div 元素的宽度为 100 个像素
        $("div").css("height", "50px"); // 设置 div 元素的高度为 50 个像素
        $("div").css("border", "1px solid yellow"); // 设置 div 元素的边框样式
      });
    </script>
  </head>
  <body>
    <div>蓝桥云课</div>
  </body>
</html>

ID 选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>id 选择器</title>
    <script>
      $(function () {
        $("#test").css("color", "blue");
      });
    </script>
  </head>
  <body>
    <span id="test">蓝桥云课</span>
    <span>是国内领先的 IT 在线编程及在线实训学习平台。</span>
  </body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>类选择器</title>
    <script>
      $(function () {
        $(".test").css({    // $("div.test").css({
          color: "blue",
          width: "200px",
          height: "80px",
          border: "2px solid yellow",
        });
      });
    </script>
  </head>
  <body>
    <div class="test">
      <span>蓝桥云课是国内领先的 IT 在线编程及在线实训学习平台。</span>
    </div>
  </body>
</html>

群组选择器

群组选择器可以让我们同时定义多个选择器，多个选择器之间用 ,号隔开，最终返回一个 jQuery 对象，该对象中包含了这些选择器选中的全部元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>群组选择器</title>
    <script>
      $(function () {
        $("h3,span").css("color", "blue");
      });
    </script>
  </head>
  <body>
    <h3>欢迎选择蓝桥云课</h3>
    <span>蓝桥云课是国内领先的 IT 在线编程及在线实训学习平台。</span>
  </body>
</html>

通配符选择器

通配符选择器就是可以设置全局样式的选择器，通俗来讲就是文档中的所有元素都要接受该规则。

我们使用 $("*").css({"list-style":"none","color":"#b6c967"}) 给页面设置通用样式：去掉列表样式和设置字体颜色为绿色。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>通配符选择器</title>
    <style>
      div {
        width: 200px;
        height: 150px;
        border: 1px solid;
        margin-top: 10px;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("*").css({ "list-style": "none", color: "#b6c967" });
      });
    </script>
  </head>
  <body>
    <div id="list1">
      <ul>
        水果：
        <li>苹果</li>
        <li>李子</li>
        <li>西瓜</li>
      </ul>
    </div>
    <div id="list2">
      <ul>
        蔬菜：
        <li>西红柿</li>
        <li>大白菜</li>
        <li>小米辣</li>
      </ul>
    </div>
  </body>
</html>

层次选择器

后代选择器

$("M N");

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>后代选择器</title>
    <script>
      $(function () {
        $("#father p").css("color", "blue");
      });
    </script>
  </head>
  <body>
    <div id="father">
      <p>Hello</p>
      <p>lan qiao</p>
      <div id="child">
        <p>我是蓝桥云课</p>
      </div>
    </div>
  </body>
</html>

如上例中 father div中所有的 p 标签都会被应用

子代选择器

$("M>N");

如上例中此时只用 father中的p标签被应用，child中不会被应用

兄弟选择器

兄弟选择器是查找元素的兄弟节点（即同级节点）从而进行操作

$("M~N");
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>兄弟选择器</title>
    <script>
      $(function () {
        $("#child~p").css("color", "blue");
      });
    </script>
  </head>
  <body>
    <div id="father">
      <p>Hello</p>
      <p>lan qiao</p>
      <div id="child"></div>
      <p>我是蓝桥云课</p>
      <p>我是蓝桥云课</p>
      <p>我是蓝桥云课</p>
    </div>
  </body>
</html>

如上例中id=child后的p标签被应用指定样式

相邻选择器

$("M+N"); // 选择下一个兄弟节点 N

只设置相邻的，即之后一个

属性选择器

属性选择器就是根据属性来选择元素，其中我们可以使用正则表达式中的一些符号来选择带有某些属性值的元素

选择器	说明
`E[attr]`	对带有 attr 属性的 E 元素进行操作。
`E[attr="value"]`	对 attr 值等于 value 的 E 元素进行操作。
`E[attr !="value"]`	对 attr 值不等于 value 的 E 元素进行操作。
`E[attr ^="value"]`	对带有 attr 属性，其属性值以 value 字符串开头的 E 元素进行操作。
`E[attr $="value"]`	对带有 attr 属性，其属性值以 value 字符串结尾的 E 元素进行操作。
`E[attr *="value"]`	对带有 attr 属性，其属性值包含 value 字符串的 E 元素进行操作。
`E[attr ~="value"]`	对带有 attr 属性，其属性值为 value 或者包含 value 的 E 元素进行操作。
`E[attr	=“value”]`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>属性选择器</title>
    <script>
      $(function () {
        $("div[id]").css("font-size", "30px"); // 选择了带有 ID 选择器的元素。
        $("div[id='item2']").css("color", "blue");// 选择了 id 名为 item2 的元素
        $("div[id !='item2']").css("text-shadow", "2px 2px 2px #78c4d4");
        $("body[class ^='c']").css("text-align", "center");//选择了 class 名以 c 开头的元素
      });
    </script>
  </head>
  <body class="content">
    <div id="item1">蓝桥云课</div>
    <div id="item2">蓝桥云课</div>
    <div class="test1">蓝桥云课</div>
    <div class="test2">蓝桥云课</div>
  </body>
</html>

伪类选择器

位置伪类选择器

选择器	说明
:first	选取指定元素的第一个该元素。
:last	选取指定元素的最后一个该元素。
:odd	选取指定元素序号为奇数的所有该元素。
:even	选取指定元素序号为偶数的所有该元素。
:eq(n)	选取指定元素的第 n 个该元素。
:lt(n)	选择指定元素中小于 n 的所有该元素。
:gt(n)	选取指定元素中大于 n 的所有该元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>位置伪类选择器</title>
    <script>
      $(function () {
        $("li:first").css("color", "#a7c5eb");
        $("li:last").css("color", "#ffc478");
        $("li:odd").css("color", "#c1a1d3");
        $("li:even").css("font-size", "25px");
        $("li:eq(4)").css("text-shadow", "2px 2px 2px #96bb7c");  // 选择了下标为 4 的列表项元素。（下标从 0 开始）
        // $("li:lt(4)").css("text-shadow","2px 2px 2px #96bb7c");// 选择了索引下标小于 4 的列表项元素
        // $("li:gt(4)").css("text-shadow","2px 2px 2px #96bb7c");// 选择了索引下标大于 4 的列表项元素
      });
    </script>
  </head>
  <body>
    水果清单：
    <ul>
      <li>苹果</li>
      <li>梨子</li>
      <li>葡萄</li>
      <li>西瓜</li>
      <li>樱桃</li>
      <li>草莓</li>
      <li>桑葚</li>
    </ul>
  </body>
</html>

可见性伪类选择器

选择器	说明
:visible	选取所有可见元素。
:hidden	选取所有不可见元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>可见性伪类选择器</title>
    <style>
      /*不可见元素*/
      .select1 {
        display: none; /*元素隐藏*/
      }
    </style>
    <script>
      $(function () {
        $("#btn1").click(function () {
          $("div:hidden").css("display", "block"); /*让隐藏元素显示到页面上*/
        });
        $("#btn2").click(function () {
          $("div:visible").css("color", "blue"); /*改变显示元素的字体颜色*/
        });
      });
    </script>
  </head>
  <body>
    <div class="select1">&#127773;</div>
    <div class="select2">Hello</div>
    <input id="btn1" type="button" value="显示" />
    <input id="btn2" type="button" value="变色" />
  </body>
</html>

内容伪类选择器

选择器	说明
:contains(text)	对包含指定 text 文本的元素进行操作。
:has(selector)	对包含指定选择器的元素进行操作。
:parent	对含有文本或者子元素的元素进行操作。
:empty	对空元素进行操作。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>内容伪类选择器</title>
    <style>
      table,
      tr,
      td {
        border: 3px solid rgb(123, 145, 29);
      }
      td {
        width: 50px;
        height: 50px;
        text-align: center;
      }
    </style>
    <script>
      $(function () {
        $("td:contains('1')").css("color", "#ade498"); //  td 元素中包含内容 1 的元素设置绿色字体。
        $("tr:has(td)").css("background-color", "#e1ffc2");// 包含 td 元素的 tr 元素设置背景颜色。
        $("td:empty").append("10"); // 在指定元素里添加内容
        //$("td:parent").append("❤")//是父亲的 td 元素添加文字内容。
      });
    </script>
  </head>
  <body>
    <table>
      <tr> // 行
        <td>123</td> // 列
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>213</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td></td>
        <td>321</td>
      </tr>
    </table>
  </body>
</html>

表单伪类选择器

表单伪类选择器是专用给表单元素设计的

选择器	说明
:input	选取所有 input 元素。
:button	选取所有 input 类型为 button 的元素。
:submit	选取所有 input 类型为 submit 的元素。
:reset	选取所有 input 类型为 reset 的元素。
:text	选取所有 input 类型为 text 的元素。
:textarea	选取所有多行文本框。
:password	选取所有 input 类型为 password 的元素。
:radio	选取所有 input 类型为 radio 的元素。
:checkbox	选取所有 input 类型为 checkbox 的元素。
:image	选取所有图片域。
:file	选取所有 input 类型为 file 的元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>表单伪类选择器</title>
    <style>
      body {
        width: 240px;
        height: 320px;
        border: 2px solid rgb(19, 37, 206);
      }
    </style>
    <script>
      $(function () {
        $(":text").css("background-color", "blue");
        $(":password").css("background-color", "pink");
        $(":radio[value='male']").attr(
          "checked",
          "true"
        ); /*匹配单选按钮并选中*/
        $(':checkbox[value="reading"],:checkbox[value="programming"]').attr(
          "checked",
          "true"
        );

        $(":file").css("color", "#aeefac");
        $(":submit").css("border-radius", "30%"); /*给按钮设置圆角边框*/
        $(":reset").css("border-radius", "30%");
      });
    </script>
  </head>
  <body>
    <form>
      姓名：<input type="text" /><br /><br />
      密码：<input type="password" /><br /><br />
      男：<input type="radio" value="male" /> 女：<input
        type="radio"
        value="female"
      /><br />
      <br />
      爱好：
      <input type="checkbox" value="reading" />阅读
      <input type="checkbox" value="programming" />编程
      <input type="checkbox" value="others" />其他<br /><br />
      <input type="file" /><br /><br />
      <input type="submit" />
      <input type="reset" />
    </form>
  </body>
</html>

表单对象属性选择器

选择器	说明
:checked	选取所有被选中的表单元素。
:selected	选取被选中的表单元素项。
:enabled	选取所有可用的表单元素。
:disabled	选取所有不可用的表单元素。
:read-only	选取只读权限的表单元素。
:focus	选取所有获得焦点的表单元素

事件

页面事件

$(document).ready(function () {});
// 简写成
$(function () {});

页面事件用 ready 表示，它类似于 JavaScript 中的 onload 事件。但是 ready 要高级一点点，因为 ready 事件只等 dom 元素加载完毕即可执行内部代码，也就是说文档中引入的外部图片、 css 或者 js 文件就算没完成加载，该事件也可以执行

鼠标事件

事件	说明
click	单击左键事件。
mouseover	鼠标移入事件。
mouseout	鼠标移出事件。
mousedown	鼠标按下事件。
mouseup	鼠标松开事件。
mousemove	鼠标移动事件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>鼠标事件</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin-top: 20px;
        border-radius: 100%;
        border: 1px solid;
      }
    </style>
    <script>
      $(function () {
        // 鼠标点击事件
        $("#btn").click(function () {
          alert("嘻嘻！欢迎到来");
        });

        // 鼠标移入
        $("div")
          .mouseover(function () {
            $(this).css("background-color", "blue");
            // 鼠标移除
          })
          .mouseout(function () {
            $(this).css("background-color", "pink");
          });

        // 鼠标按下事件
        $("p")
          .mousedown(function () {
            $(this).css("color", "blue"); // this 是指定的当前元素
          })
          .mouseup(function () {
            $(this).css("color", "pink"); // this 是指定的当前元素
          });
      });
    </script>
  </head>
  <body>
    <div></div>
    <input type="button" value="点我" id="btn" />
    <p>鼠标按下和抬起时会变色</p>
  </body>
</html>

键盘事件

事件	说明
keydown	键盘按下时触发。
keyup	键盘松开时触发。
keypress	事件会在键盘按键被按下并释放一个键时触发。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>键盘事件</title>
    <style>
      div {
        color: coral;
      }
    </style>
    <script>
      $(function () {
        // 键盘松开
        $("#num").keyup(function () {
          var limit = /^1[0-9]{10}$/; // 正则表达式，只能输入 11 位 0-9 之间的整数
          var value = $(this).val(); // 获取当前值
          if (limit.test(value)) {
            // test 方法用来检查当前输入是否符合 limit 中正则表达式的要求
            $("#div1").text("输入的手机号码符合要求!");
          } else {
            $("#div1").text("手机号码格式不正确");
          }
        });
        // 键盘按下
        $("#num").keydown(function () {
          // 注意如果这里获取内容是获取的上一次文本框的内容 因为键盘并没有弹起 本次输入的内容还没有加入到文本框中
          console.log("正在输入"); // 同学们可以加入 + $(this).val() 进行测试
        });
      });
    </script>
  </head>
  <body>
    电话号码：<input id="num" type="text" />
    <div id="div1"></div>
  </body>
</html>

表单事件

事件	说明
focus	获得焦点时触发的事件。
blur	失去焦点时触发的事件。
select	选中单行或多行文本框会触发的事件。
change	单选框、复选框、下拉列表框等选中项发生改变触发的事件。

文本框获得焦点后清空，如果是用户输入的内容则不会清空）。移除焦点后如果文本框是空，则恢复成 “搜索一下，喜欢的课”。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>focus 与 blur 事件</title>
    <style>
      body {
        text-align: center;
        background-color: rgba(128, 128, 128, 0.05);
      }
      #search {
        color: gray;
      }
    </style>
    <script>
      $(function () {
        // 输入框获得焦点，让输入框的内容为空
        $("#search").focus(function () {
          if ($(this).val() === "搜索一下，喜欢的课程") {
            $(this).val("");
          }
        });
        // 输入框失去焦点，恢复原状
        $("#search").blur(function () {
          if ($(this).val().trim() == "") {
            $(this).val("搜索一下，喜欢的课程");
          }
        });
      });
    </script>
  </head>
  <body>
    <img
      src="https://labfile.oss.aliyuncs.com/courses/3774/lanqiao.png"
    /><br />
    <input id="search" type="text" value="搜索一下，喜欢的课程" />
    <input type="button" value="搜索" /><br />
    <img src="https://labfile.oss.aliyuncs.com/courses/3774/courses.png" />
  </body>
</html>

滚动事件

  jQuery对象.scroll(事件处理函数);


   <script>
      $(function () {
        $("div").scroll(function () {
          $("strong").css("color", "blue");
          $("div").css({
            "border-color": "blue",
            "box-shadow": "3px 3px 10px #D1D9D9",
          });
        });

        // 给文档对象绑定滚动事件
        $(document).scroll(function () {
          var r = Math.random() * 255;
          var g = Math.random() * 255;
          var b = Math.random() * 255;

          $("pre").css("color", `rgb(${r},${g},${b})`);
        });
      });
    </script>

绑定事件

jQuery对象.on(事件类型, 事件处理函数);
jQuery对象.bind(事件类型, 事件处理函数);

    <script>
      $(function () {
        // 需求: 单击 div 显示 "欢迎来到蓝桥云课！"
        // 改为bind 绑定事件效果一样
        $("div").on("click", function () {
          alert("欢迎来到蓝桥云课！");
        });
      });
    </script>

合成事件

jQuery对象.hover(mouseover的事件处理函数, mouseout的事件处理函数);

    <script>
      $(function () {
        $("div").hover(
          function () {
            $(this).css("transform", "rotate(60deg)");
          },
          function () {
            $(this).css("transform", "rotate(360deg)");
          }
        );
      });
    </script>

自定义事件

自定义事件就是用户可以自己定义一个事件。在 jQuery 中，我们使用 on 方法来定义事件，然后通过 trigger 方法来触发该事件。

jQuery对象.on(事件类型, 处理函数); // bind 也可以

jQuery对象.trigger(事件类型);

事件对象

当事件发生时，我们会把该事件的详细信息记录在事件对象中，然后通过事件对象的属性来了解事件的相关信息。

属性	说明
type	获取事件的类型。
target	获取触发事件的元素。
which	获取单击事件中鼠标的左、中、右键。
clientX、clientY	获取鼠标相对于页面左上角的坐标。
pageX、pageY	获取鼠标相对于页面左上角的坐标。（包括滚动条滚动的 x、y 轴距离）
shiftKey	判断是否按下 shift 键。
ctrlKey	判断是否按下 ctrl 键。
altKey	判断是否按下 alt 键。
keyCode	获取按下键盘的键码值。

DOM 操作

节点的创建

直接创建元素节点。

    <script>
      $(function () {
        $("input").on("click", function () {
          var div = $("<div></div>"); // 创建一个 div 元素
          $("body").append(div); // 将创建的 div 元素放入 body 中
        });
      });
    </script>

创建带有文本的元素节点。

    <script>
      $(function () {
        $("input").on("click", function () {
          var div = $("<div>元素宝宝</div>"); // 创建带有文本的元素节点
          $("body").append(div); // 将创建的 div 元素放入 body 中
        });
      });
    </script>

创建带有属性的元素节点

    <script>
      $(function () {
        $("input").on("click", function () {
          var div = $(
            "<div style='width:50px; height:50px; background-color: #ddffbc'>嗨</div>"
          ); // 创建带有属性的元素节点
          $("body").append(div); // 将创建的 div 元素放入 body 中
        });
      });
    </script>

元素的插入

子级插入方法，包括 prepend()、prependTo()、append()、appendTo()。

用div来说比较明显，子级插入可以将插入的信息放置到div内部内容之后

prepend() 与 prependTo() 是在元素子级的开头插入元素。
```
// 在 A 元素的子级最前面的位置插入B
$(A).prepend(B);
// 在 A 元素的子级最前面的位置插入B
$(B).prependTo(A);
```
append() 与 appendTo() 是在元素子级的尾部插入元素。
```
// 在 A 元素子级的最后面位置追加 B
$(A).append(B);
// 在 A 元素子级的最后面位置追加 B
$(B).appendTo(A);
```
同级插入方法，包括 before()、insertBefore()、after()、insertAfter()。

用div来说比较明显，同级插入可以将插入的信息放置到div整体内容之后

before() 与 insertBefore() 是在该元素的前面插入元素。
```
// 在 A 的前面插入 B
$(A).before(B);
// 在 A 的前面插入 B
$(B).insertBefore(A);
```
after() 与 insertAfter() 是在元素的后面插入元素。
```
// 在 A 的后面插入 B
$(A).after(B);
// 在 A 的后面插入 B
$(B).insertAfter(A);
```

元素的删除

remove()

remove 方法可以将指定的元素及其子元素删除。

    <script>
      $(function () {
        $("input").click(function () {
          $("div").remove();
        });
      });
    </script>

empty()

empty 方法是用来清空指定元素的后代元素和内容的。

    <script>
      $(function () {
        $("div").click(function () {
          $(this).empty();
        });
      });
    </script>

元素的替换

replaceWith 方法和 replaceAll 方法都可以用来把指定元素替换成其他元素，只是在使用格式上有些差别。

// 将 A 替换为 B
$(A).replaceWith(B);
// 将 A 替换为 B
$(B).replaceAll(A);

    <script>
      $(function () {
        $("div").click(function () {
          var $poem1 = $("<p>柳花深巷午鸡声，桑叶尖新绿未成。</p>");
          var $poem2 = $("<p>坐睡觉来无一事，满窗晴日看蚕生。</p>");
          $("#poem1").replaceWith($poem1);
          $($poem2).replaceAll("#poem2");
        });
      });
    </script>

元素的遍历

each用于元素遍历

    <script>
      $(function () {
        var colors = ["#ffc478", "#d3e0dc", "#fce2e1", "#aee1e1"];
        $("div").click(function () {
          $("div").each(function (index, element) {
            $(this).css("background-color", colors[index]);
          });
        });
      });
    </script>

属性操作

获取指定元素的属性

attr 方法可以用来获取指定元素的属性值，也可以用来设置指定属性的属性值。

jQuery对象.attr("属性名"); // 获取属性
jQuery对象.attr("属性名", "属性值"); // 修改属性

删除指定元素的属性

removeAttr 方法可以删除指定元素的某个属性。

jQuery对象.removeAttr("属性名");

样式操作

css 方法

css 方法可以用来获取指定属性的属性值，也可以用来设置属性值。

// 获取指定属性的属性值
$().css("属性名");
// 设置属性值
$().css("属性名", "属性值");

addClass 方法

addClass 方法是用来添加类选择器的。

        <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        border: 1px solid #c7ffd8;
      }
      .circle {
        background-image: radial-gradient(#ffe6e6, #c6c9ff, #8ad7c1);
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
	<script>
      $(function () {
        $("div").click(function () {
          $(this).addClass("circle"); // 给 div 添加一个 circle 选择器
        });
      });
    </script>

removeClass 方法

removeClass 方法可以用来移除已有的类选择器。

    <script>
      $(function () {
        $("div").click(function () {
          $(this).removeClass("circle"); // 移除类选择器
        });
      });
    </script>

toggleClass 方法

toggleClass 方法是用来切换类选择器的。

    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        border: 1px solid #c7ffd8;
      }
      .circle {
        background-image: radial-gradient(#ffe6e6, #c6c9ff, #8ad7c1);
      }
      .circle1 {
        background-image: linear-gradient(#1687a7, #583d72, #b8de6f);
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("div").click(function () {
          $(this).toggleClass("circle1");
        });
      });
    </script>
  </head>
  <body>
    <div class="circle"></div>
  </body>

内容操作

html 方法

html 方法可用来获取 HTML 文档中指定元素内部的元素标签和标签中的内容，也可以给元素添加内容。

// 获取元素内容
$().html();
// 设置元素内容
$().html("内容");

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html 方法的使用</title>
    <style>
      div {
        width: 300px;
        height: 150px;
        margin-top: 10px;
        text-align: center;
        border: 1px solid rgb(27, 179, 128);
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("#poem1").click(function () {
          alert($(this).html());
        });
        $("#poem2").click(function () {
          $(this).html(
            "<h3>客中行</h3><p>兰陵美酒郁金香，玉碗盛来琥珀光。</p><p>但使主人能醉客，不知何处是他乡。</p>"
          );
        });
      });
    </script>
  </head>
  <body>
    <div id="poem1">
      <h3>山中问答</h3>
      <p>问余何意栖碧山，笑而不答心自闲。</p>
      <p>桃花流水窅然去，别有天地非人间。</p>
    </div>
    <div id="poem2"></div>
  </body>
</html>

text 方法

text 方法可以获取指定标签里的文本，也可以为指定标签添加文本。

注意：html 方法和 text 方法的区别在于，html 方法是带着标签一起操作，而 text 方法操作的是标签里的文本。

// 获取指定标签中的文本
$().text();
// 给指定标签设置文本
$().text("内容");

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text 方法的使用</title>
    <style>
      div {
        width: 300px;
        height: 150px;
        margin: 10px 0 10px 0;
        text-align: center;
        border: 1px solid rgb(27, 179, 128);
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("#poem1").click(function () {
          alert($(this).text());
        });
        $("input").click(function () {
          $("h3").text("山中问答");
        });
      });
    </script>
  </head>
  <body>
    <div id="poem1">
      <h3></h3>
      <p>问余何意栖碧山，笑而不答心自闲。</p>
      <p>桃花流水窅然去，别有天地非人间。</p>
    </div>
    <input type="button" value="添加标题" />
  </body>
</html>

val 方法

val 方法用于获取表单元素的值，也可以给表单元素设置值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>val 方法的使用</title>
    <style>
      div {
        width: 300px;
        height: 150px;
        margin: 10px 0 10px 0;
        text-align: center;
        border: 1px solid rgb(27, 179, 128);
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("#get").click(function () {
          alert($("#name").val());
        });
        $("#set").click(function () {
          $("#phone").val("1234567");
        });
      });
    </script>
  </head>
  <body>
    <div>
      <input type="text" value="请输入你的名字" id="name" />
      <input type="phone" id="phone" />
    </div>
    <input type="button" value="获取名字" id="get" />
    <input type="button" value="设置电话" id="set" />
  </body>
</html>

动画

隐藏与显示

$().show(speed, easing, callback);
$().hide(speed, easing, callback);

speed 可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、normal、fast 等值。
easing 可选参数，用于设置动画在不同点上元素的速度，其默认值是 swing，表示开头和结尾的速度慢，中间的速度快。
callback 可选参数，是方法执行完成后，执行的一个函数。

淡入与淡出

// 淡入
$().fadeIn(speed, easing, callback);
// 淡出
$().fadeOut(speed, easing, callback);

自定义动画

默认情况下，所有 HTML 元素的定位方式都是静态定位（即 position: static），且无法移动。如需对位置进行操作，比如使用 “top”，“right”，“bottom”，“left” 属性要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

$().animate({ style }, speed, callback);
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animate 方法</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin-top: 20px;
        /*默认情况下，元素是 static 不能被移动，所以这里设置为 relative*/
        position: relative;
        background-color: lightskyblue;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $(".btn1").click(function () {
          // 以元素本身的宽度为基点加 100 个像素
          $("div").animate({ left: "+=100px" });
        });
        $(".btn2").click(function () {
          // 元素的宽度变为 300 个像素
          $("div").animate({ width: "300px" });
        });
      });
    </script>
  </head>
  <body>
    <button class="btn1">向右移动</button>
    <button class="btn2">元素变长</button>
    <div></div>
  </body>
</html>

队列动画

让动画按照一定的顺序去执行多个动画效果呢

$().animate().animate()....animate();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>队列动画</title>
    <style>
      div {
        width: 300px;
        height: 150px;
        margin-top: 20px;
        text-align: center;
        position: absolute;
        border: 1px solid;
      }
      p {
        position: relative;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <!--导入 jQuery 的颜色库-->
    <script src="jquery.color-2.1.2.min.js"></script>
    <script>
      $(function () {
        $(".btn1").click(function () {
          // 改变标题中字的间距和字的大小
          $("#title")
            .animate({ letterSpacing: "5px" })
            .animate({ fontSize: "25px" });
        });
        $(".btn2").click(function () {
          $(".text").animate({ top: "5px" }).animate({ color: "#3252988" });
        });
        $(".btn3").click(function () {
          $("div").animate({ width: "400px", height: "200px" });
        });
      });
    </script>
  </head>
  <body>
    <button class="btn1">改变标题样式</button>
    <button class="btn2">改变内容样式</button>
    <button class="btn3">改变边框大小</button>
    <div>
      <p id="title">军行</p>
      <p class="text">骝马新跨白玉鞍，战罢沙场月色寒。</p>
      <p class="text">城头铁鼓声犹震，匣里金刀血未干。</p>
    </div>
  </body>
</html>

回调函数

//... 省略其他代码
<script>
    $(function(){
        $(".btn1").click(function(){
            $("#title").animate({letterSpacing:"5px"},1000).animate({fontSize:"25px"},1000,function(){
              $("#title").css({"background-color":"yellow"})
            });

        });
    });
  </script>

停止动画

$().stop(stopAll, goToEnd);

第一个参数 stopAll 代表是否停止所有动画，其取值为 true 或者 false，当为 true 时代表停止当前及后面的所有动画，当为 false 时代表只停止当前动画。
第二个参数 goToEnd 代表停止动画后是否跳转到最后的动画效果，其取值也是布尔类型，当为 true 时，代表停止动画后会跳转到最后的动画效果，为 false 时则不跳转。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>停止动画</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin-top: 10px;
        background-color: #8fe6d1;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="https://labfile.oss.aliyuncs.com/courses/3774/jquery.color-2.1.2.min.js"></script>
    <script>
      $(function () {
        $(".btn1").click(function () {
          $("div")
            .animate({ "background-color": "#ffc288" }, 2000)
            .animate({ width: "150px" }, 2000)
            .animate({ height: "150px" }, 2000);
        });
        $(".btn2").click(function () {
          $("div").stop();
        });
      });
    </script>
  </head>
  <body>
    <button class="btn1">开始</button>
    <button class="btn2">停止</button>
    <div></div>
  </body>
</html>

延迟动画

$().delay(speed);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>延迟动画</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin-top: 20px;
        position: absolute;
        border: 1px solid;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="jquery.color-2.1.2.min.js"></script>
    <script>
      $(function () {
        $(".btn1").click(function () {
          $("div").animate({ width: "100px" });
          $("div").animate({ height: "100px" });
          $("div").delay(3000).animate({ "background-color": "#ddffbc" });
        });
      });
    </script>
  </head>
  <body>
    <button class="btn1">开始</button>
    <div></div>
  </body>
</html>

遍历

遍历祖先元素

parent 方法是用来查找指定元素的父元素的。

parents 方法是用来查找指定元素的所有祖先元素的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 祖先</title>
    <style>
      div {
        width: 300px;
        height: 200px;
        border: 2px solid;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="jquery.color-2.1.2.min.js"></script>
    <script>
      $(function () {
        $("div").hover(
          function () {
            // 当鼠标放在元素上时，给整个列表添加一个背景颜色
            $("li").parent().css("background-color", "#edffec");
          },
          function () {
            // 当鼠标移出元素时，所有父辈的字体颜色都会发生改变
            $("li").parents().css("color", "#f2a154");
          }
        );
      });
    </script>
  </head>
  <body>
    <div>
      <h4>任务清单</h4>
      <ul>
        <li>晨读</li>
        <li>练字</li>
        <li>画画</li>
      </ul>
    </div>
  </body>
</html>

遍历兄弟元素

前向兄弟元素查找

$().prev(); // 查找指定元素前向第一个元素

$().preAll(); // 查找指定元素前向所有元素

后向兄弟元素查找

$().next(); // 查找指定元素的第一个后向兄弟元素

$().nextAll(); // 查找指定元素的所有后向兄弟元素

所有兄弟元素查找

$().siblings();

遍历后代元素

children 方法

children 方法和 find 方法都是用来查找元素的子元素的，区别是 children 只能获取元素的儿子节点，而 find 方法可以获取元素的所有符合条件的后代节点。

jQuery对象.children();

find 方法

ind 方法也是查找指定元素的后代元素，但不同的是，find 方法可以查找到指定元素的所有后代元素。

jQuery对象.find(selector);

过滤元素

类名过滤

hasClass 方法可以用来判断指定元素是否包含该类名的元素。

$().hasClass("类名");

下标过滤

在 jQuery 中使用 eq 方法可以实现下标过滤

$().eq(n);

判断过滤

在 jQuery 中可以使用 is 方法来判断指定元素中是否有符合条件的存在。

$().is(selector);

反向过滤

在 jQuery 中使用 not 方法可以选择不符合条件的元素。

$().not(selector|function)

AJAX

load 方法

load() 方法让 AJAX 去请求服务器，并从中获得数据，最后将获得的数据放入到指定的元素中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>加载一个 txt 文件</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $(".text").load("text.txt", function (response, status, xhr) {
          $("p").text(
            "请求结果为：" + response + "；" + "请求状态为：" + status
          );
        });
      });
    </script>
  </head>
  <body>
    <div class="text"></div>
    <p></p>
  </body>
</html>

get 方法

$.get(url, data, callback(data, status, xhr), dataType);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>get</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("input").click(function () {
          $.get("food.html", function (data, status) {
            $("div").html(data);
            $("p").append(status);
          });
        });
      });
    </script>
  </head>
  <body>
    <input type="button" value="加载数据" />
    <p>请求状态为：</p>
    <div></div>
  </body>
</html>

post 方法

$.post(url, data, callback(data, textStatus, jqXHR), dataType);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>post 方法</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("input").click(function () {
          // 如果链接失效，可以试试 https://labfile.oss.aliyuncs.com/courses/3774/posts.json
          $.post(
            "https://jsonplaceholder.typicode.com/posts",
            function (data, textStatus) {
              $("p").append(textStatus);
            }
          );
        });
      });
    </script>
  </head>
  <body>
    <input type="button" value="请求数据" />
    <p>请求状态：</p>
  </body>
</html>

post 和 get 有个明显的区别，使用 POST 请求，提交的数据不会显示到 URL 上，查看历史记录不会看到提交的数据。而 GET 请求，则相反，它提交的数据会显示在 URL 上，并且查看历史记录可以看到提交的数据。

ajax 方法

$.ajax({ 配置项 });

参数	类型	描述
url	String	发送请求地址，默认为当前页面地址。
type	String	请求数据的方式（POST 或 GET），默认为 GET。
timeout	Number	设置请求超时的时间，其单位为毫秒。
data	Object 或 String	发送到服务器的数据。
dataType	String	服务器返回的数据类型。
beforeSend	Function	发送请求前可以修改的 XMLHttpRequest 对象的函数。
complete	Function	请求完成后的回调函数，这里的回调函数无论请求成功或者失败都会被调用。
success	Function	请求成功后的回调函数。
error	Function	请求失败后被调用的函数。
contentType	String	发送信息至服务器时内容的编码形式。
async	Boolean	设置请求方式，当值为 true 时，所有请求为异步请求；当值为 false 时，所有请求为同步请求，默认值为 true。
cache	Boolean	设置浏览器是否缓存当前页面，当值为 true 时浏览器会缓存该页面，反之不会，默认值为 false。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax 方法</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        // 请求页面原始数据
        $.ajax({
          type: "GET",
          url: "https://jsonplaceholder.typicode.com/users",
          // 如地址失效，可以使用 https://labfile.oss.aliyuncs.com/courses/3774/users.json
          success: function (users) {
            $.each(users, function (i, order) {
              $("#results").append("<li>" + order.name + "</li>");
            });
          },
          error: function () {
            alert("数据请求失败");
          },
        });
        // 添加新数据
        $("#addName").click(function () {
          $.ajax({
            type: "POST",
            url: "https://jsonplaceholder.typicode.com/users",
            // 如地址失效，可以使用 https://labfile.oss.aliyuncs.com/courses/3774/users.json
            data: { name: $("#name").val() },
            success: function (data) {
              $("#results").append("<li>" + data.name + "</li>");
            },
            error: function () {
              alert("数据请求失败");
            },
          });
        });
      });
    </script>
  </head>
  <body>
    <div id="results"></div>
    <!--当前添加的所有名字-->
    名字：<input type="text" id="name" /><!--名字输入框-->
    <button id="addName">添加</button
    ><!--添加名字的按钮-->
  </body>
</html>

getJSON

$.getJSON(url [,data] [,success(data, textStatus, jqXHR)])

参数	类型	描述
url	String	包含发送请求的 URL 字符串。
data	PlainObject	发送给服务器的字符串或 Key/value 键值对。
success(data, textStatus, jqXHR)	Function	当请求成功后执行的回调函数。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>getJSON 方法</title>
    <style>
      ul {
        list-style: none;
      }
      body {
        text-align: center;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        // 如地址失效，可以使用 https://labfile.oss.aliyuncs.com/courses/3774/users.json
        $("input").click(function () {
          $.getJSON(
            "https://jsonplaceholder.typicode.com/users",
            function (data, textStatus) {
              alert(textStatus);
              $.each(data, function (i, val) {
                $("ul").append("<li>" + val.name + "<li>");
              });
            }
          );
        });
      });
    </script>
  </head>
  <body>
    <input type="button" value="按照JSON格式加载数据" />
    <ul></ul>
  </body>
</html>

getScript

getScript 也很容易理解，拆分成 get 和 Script 来看，get 是 GET 请求，Script 是 JavaSctip 文件，所以合在一起就是使用一个 GET 请求从服务器加载并执行一个 JavaScript 文件。

$.getScript( url [, success(script, textStatus, jqXHR) ] )

参数	类型	说明
url	String	包含发送请求的 URL 字符串。
success(script, textStatus, jqXHR)	Function	当请求成功后执行的回调函数。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>getScript</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        background-color: #b6c9f0;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("div").click(function () {
          $.getScript("index7.js", function (script, textStatus) {
            $("p").text("请求状态为：" + textStatus);
          });
        });
      });
    </script>
  </head>
  <body>
    <div></div>
    <p></p>
  </body>
</html>

虽然已经前端干了一段时间了，但是都停留在了使用工具的层面，了解工具的原理还是挺有趣但又费事的，不过还好有一种柳暗花明的感觉。希望自己能坚持下去吧，多了解一点，菜但不想一直都菜☹