jQuery

16

jQuery

概述：

  • jQuery是一个快速、简洁的JavaScript代码库。
  • jQuery设计宗旨是“Write Less，Do More”。
  • 提供一种简便的JavaScript操作方式。
  • 优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery特点

  • 具有独特的链式语法。
  • 支持高效灵活的CSS选择器。
  • 拥有丰富的插件。
  • 兼容各种主流浏览器。
  • IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery安装

jQuery 安装 | 菜鸟教程 (runoob.com)

Releases · jquery/jquery (github.com)

  <body>
    <!-- 安装jQuery引入本服务器jQuuery代码库 -->
    <!--1. 下载并引入jQuery代码库
        开发版：Production version：用于实际的网站中，已被精简和压缩。
        发布版：Development version：用于测试和开发，未压缩，便于可读。
       -->
    <script src="js/jquery-3.6.0.js"></script>
    <!--2. 使用CDN关联别的服务器的资源
        CDN的全称是Content Delivery Network，即内容分发网络。
        使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度。
    -->
    <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
    <script>
      // 自执行匿名函数
      $(function () {
        alert("测试代码");
      });
    </script>
  </body>

jQuery基本语法

$(匿名函数)：

  • 表示页面DOM加载完毕，则执行，比onload事件执行早。
  • 并且可以写多个，$是jQuery函数的简写。
  <body onload="pageLoad()">
    <script>
      $(function () {
        alert("1");
      });
      $(function () {
        alert("2");
      });
      jQuery(function () {
        alert("2");
      });
      function pageLoad() {
        alert("3");
      }
      // 执行顺序1 2 3
    </script>
  </body>

$(selector).action()：

  • 选取HTML 元素，并对选取的元素执行某些操作。
  • selector（选择符）表示"查找" HTML 元素。
  • action() 执行对元素的操作。
    <ul>
      <li>123</li>
      <li>456</li>
    </ul>
    <input type="button" value="执行" onclick="click1()" />

    <script>
      function click1() {
        $("li").css("background-color", "red");
        // $("li").toggle();
        // $("li").hide();
      }
    </script>

基本选择器

标签选择器：

  • jQuery 标签选择器基于标签名选取元素。

id选择器：

  • id选择器通过HTML 元素的id 属性选取指定的元素。

class选择器：

  • 类选择器可以通过指定的class 查找元素。
    <p id="pTag" class="pTag2">内容测试</p>
    <input type="button" value="标签选择器" onclick="click1()" />
    <input type="button" value="标签选择器" onclick="click2()" />
    <input type="button" value="标签选择器" onclick="click3()" />
    <script>
      // 标签选择器
      function click1() {
        $("p").css("background-color", "red");
      }
      // id选择器
      function click2() {
        $("#pTag").css("background-color", "yellow");
      }
      // class选择器
      function click3() {
        $(".pTag2").css("background-color", "green");
      }
    </script>

[wppay]

层次选择器

  • 通过DOM元素间的层次关系来获取元素。
  • 主要层次关系包括后代、子代、相邻、兄弟关系。
    <div>
      <span> span1 </span>
      <p>
        <span id="span"> span2 </span><br />
        <span> span2 </span>
      </p>
    </div>
    <input type="button" value="子代选择器" onclick="click1()" />
    <input type="button" value="后代选择器" onclick="click2()" />
    <input type="button" value="相邻选择器" onclick="click3()" />
    <input type="button" value="兄弟选择器" onclick="click4()" />
    <script>
      // 子代选择器
      function click1() {
        $("div>span").css("color", "red");
      }
      // 后代选择器
      function click2() {
        $("div span").css("color", "yellow");
      }
      // 相邻选择器：元素后的相邻元素
      function click3() {
        $("span + p").css("color", "green");
      }
      // 兄弟选择器:元素后的所有兄弟元素
      function click4() {
        $("#span ~").css("color", "red");
      }
    </script>

属性选择器

属性选择器

  • 根据元素某个属性获取元素，如ID或匹配属性值内容并以"[“号开始，以”]"号结束。
    <form id="myform" action="" method="POST">
      <input type="text" name="username" /><br />
      <input type="password" name="pwd" /><br />
    </form>
    <input type="button" value="更改" onclick="click1()" />

    <script>
      //   属性选择器
      function click1() {
        // 包含给定属性的元素
        $("#myform [type]").css("background-color", "red");
        // 给定属性是某个特定的值的元素
        $("#myform [type=text]").css("background-color", "red");
        // 不等于给定属性的某个值的特定元素
        $("#myform [type!=text]").css("background-color", "red");
        // 给定属性以某些值开始的元素
        $("#myform [type^=text]").css("background-color", "red");
        // 给定属性以某些值结束的元素
        $("#myform [type$=text]").css("background-color", "red");
        // 给定属性包含某些值的元素
        $("#myform [type*=text]").css("background-color", "red");
      }
    </script>

表单选择器

专门处理表单的选择器：

  <body>
    <p>表1</p>
    <form id="myform" action="" method="POST">
      <input type="text" name="username" /><br />
      <input type="password" name="pwd" /><br />
      <input type="radio" value="单选框" /><br />
      <input type="checkbox" value="选项1" />
      <input type="checkbox" value="选项1" />
    </form>
    <p>表2</p>
    <form id="myform2" action="" method="POST">
      <input type="text" name="username" /><br />
      <input type="password" name="pwd" /><br />
      <input type="submit" value="提交" />
    </form>

    <input type="button" value="表单选择器" onclick="click1()" />
    <script>
      //   jquery表单选择器
      function click1() {
        // 获取所有input、textarea、select和button元素
        $("#myform :input").css("background-color", "red");
        // 选择所有单行文本框，即type=text的元素
        $("#myform :text").css("background-color", "green");
        // 选择所有密码框，即type=password的元素
        $("#myform :password").css("background-color", "yellow");
        // 选择所有单选框，即type=radio的元素
        $("#myform :radio").hide();
        // 选择所有复选框，即type=checkbox的元素
        $("#myform :checkbox").hide();
        // 获取所有可用元素
        var list = $("#myform :enabled");
        console.log("所有可用元素：" + list[1]);
        // 获取所有不可用元素
        var list2 = $("#myform :disabled");
        console.log("所有不可用元素：" + list2[1]);
        // 获取单选、复选框中被选中的元素
        var list3 = $("#myform :checked");
        console.log(list3);
        // 选取下拉列表中被选中的元素
        var list4 = $("#myform :selected");
        console.log(list4);
      }
    </script>
  </body>

过滤选择器

简单过滤选择器：

  • 书写时都以(:)开头；简单过滤是使用最广泛的一种。
    <h2>简单过滤</h2>
    <ul>
      <li>:first:获取第一个元素</li>
      <li>:last:获取最后一个元素</li>
      <li>:even:获取偶数元素</li>
      <li>:odd:获取奇数元素</li>
    </ul>

    <input type="button" value="简单过滤" onclick="click1()" />
    <script type="text/javascript">
      function click1() {
        $("li:odd").css("background-color", "green");
        $("li:even").css("background-color", "green");
        $("li:first").css("background-color", "red");
        $("li:last").css("background-color", "red");
      }
    </script>

可见性过滤选择器：

  • 根据元素是否可见的特征来获取元素。
  <body>
    <h1>jQuery过滤选择器</h1>
    <h2>简单过滤</h2>
    <ul>
      <li>:first:获取第一个元素</li>
      <li>:last:获取最后一个元素</li>
      <li>:even:获取偶数元素</li>
      <li>:odd:获取奇数元素</li>
      <li>:hidden:获取所有不可见元素，或者type=hidden的元素</li>
      <li>:visible:获取所有的元素</li>
    </ul>

    <input type="button" value="简单过滤" onclick="click1()" />
    <script type="text/javascript">
      function click1() {
        $("li:odd").css("background-color", "green");
        $("li:even").css("background-color", "green");
        $("li:first").css("background-color", "red");
        $("li:last").css("background-color", "red");
        var list = $("input:hidden");
        console.log(list[0]);
        var list2 = $("input:visible");
        console.log(list2[0]);
      }
    </script>
  </body>

案例:表格隔行换色

  <body>
    <h1>案例：实现表格的隔行换色</h1>
    <table id="tab" border="1" width="500">
      <tr>
        <th>编号</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版时间</th>
        <th>出版社</th>
        <th>isbn</th>
      </tr>
      <tr>
        <td>101</td>
        <td>java开发</td>
        <td>灿灿</td>
        <td>2021-4-30</td>
        <td>北京出版社</td>
        <td>1412314</td>
      </tr>
      <tr>
        <td>102</td>
        <td>java开发</td>
        <td>灿灿</td>
        <td>2021-4-30</td>
        <td>北京出版社</td>
        <td>1412314</td>
      </tr>
      <tr>
        <td>103</td>
        <td>java开发</td>
        <td>灿灿</td>
        <td>2021-4-30</td>
        <td>北京出版社</td>
        <td>1412314</td>
      </tr>
    </table>
    <script type="text/javascript">
      $(function () {
        $("#tab tr:odd").css("background-color", "skyblue");
        $("#tab tr:even").css("background-color", "gainsboro");
      });
    </script>
  </body>

jQuery事件操作

• jQuery提供了一套处理DOM事件的方法：

注意：

  • 带参数设置事件。
  • 不带参数触发事件。
  <body>
    <input type="button" id="btn1" value="点击" />
    <script>
      $(function () {
        $("#btn1").click(function () {
          alert("点击1");
        });
        $("#btn1").click(function () {
          alert("点击2");
        });
        // 相当于你点击了一下按钮
        // $("btn1").click();
      });
    </script>
  </body>

案例2:鼠标经过表格变色，全选

  <body>
    <table id="tab" border="1">
      <caption>
        鼠标经过表格换色
      </caption>
      <tr>
        <th><input type="checkbox" value="全选" id="selAll" />全选</th>
        <th>书名</th>
        <th>价钱</th>
      </tr>
      <tr>
        <td><input type="checkbox" class="sel" /></td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="sel" /></td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="sel" /></td>
        <td>3</td>
        <td>3</td>
      </tr>
    </table>
    <script>
      $(function () {
        $("#tab tr")
          .mouseover(function () {
            $(this).css("background-color", "yellow");
          })
          .mouseout(function () {
            $(this).css("background-color", "green");
          });
      });

      $(function () {
        $("#selAll").click(function () {
          var b = $(this).prop("checked");
          $(".sel").prop("checked", b);
        });
      });
    </script>
  </body>

jQuery效果

隐藏显示：

  • hide()：隐藏元素。
  • show()： 显示元素。
  • toggle()：使用toggle() 方法来切换hide() 和show() 方法。

淡入淡出：

  • fadeIn()：淡入已隐藏的元素。
  • fadeOut()：淡出可见元素。
  • fadeToggle()：可以在fadeIn() 与fadeOut() 方法之间进行切换。
  • fadeTo()：允许渐变为给定的不透明度，值介于0 与1 之间。

滑动：

  • slideDown()：用于向下滑动元素。
  • slideUp()：用于向上滑动元素。
  • slideToggle()：可以在slideDown() 与slideUp() 方法之间进行切换。
  <body>
    <h1>jQuery效果</h1>
    <ul>
      <li>隐藏显示：show()显示 hide()隐藏 toggle()切换</li>
      <li>
        淡入淡出: fadeIn 淡入 fadeOut淡出 fadeToggle 切换 fadeTo 透明度,值介于0
        与1 之间。
      </li>
      <li>滑入滑出: slideDown 下滑 slideUp 上滑 slideToggle 切换</li>
    </ul>

    <img id="img1" src="img/001.jpg" width="200" />
    <br />
    <input id="btn1" type="button" value="隐藏" />
    <input id="btn2" type="button" value="显示" />
    <input id="btn3" type="button" value="隐藏显示" />
    <br />
    <input id="btn4" type="button" value="淡出" />
    <input id="btn5" type="button" value="淡入" />
    <input id="btn6" type="button" value="淡入淡出" />
    <input id="btn7" type="button" value="透明度" />
    <br />
    <input id="btn8" type="button" value="下滑" />
    <input id="btn9" type="button" value="上滑" />
    <input id="btn10" type="button" value="下滑上滑" />
    <script type="text/javascript">
      $(function () {
        $("#btn1").click(function () {
          $("#img1").hide("slow");
        });
        $("#btn2").click(function () {
          $("#img1").show("slow");
        });
        $("#btn3").click(function () {
          $("#img1").toggle("slow");
        });
        $("#btn4").click(function () {
          $("#img1").fadeOut();
        });
        $("#btn5").click(function () {
          $("#img1").fadeIn();
        });
        $("#btn6").click(function () {
          $("#img1").fadeToggle();
        });
        $("#btn6").click(function () {
          $("#img1").fadeToggle();
        });
        $("#btn7").click(function () {
          $("#img1").fadeTo(3000, 0.5);
        });
        $("#btn8").click(function () {
          $("#img1").slideDown(3000);
        });
        $("#btn9").click(function () {
          $("#img1").slideUp(3000);
        });
        $("#btn10").click(function () {
          $("#img1").slideToggle(3000);
        });
      });
    </script>
  </body>

获取、设置内容

jQuery设置获取内容方法：

  • html()：设置或返回所选元素的文本内容。（innerHTML）
  • text()：设置或返回所选元素的内容（包括HTML 标记）。(innerText)
  • val()：设置或返回表单字段的value属性值。

注意：带参相当于设置，不带参数获取。

    <h2>1.获取、设置内容</h2>
    <h3 id="poem">春晓</h3>
    <p>春眠不觉晓</p>
    <p>处处闻啼鸟</p>
    <p>夜来风雨声</p>
    <p>花落知多少</p>
    <input type="text" id="username" />
    <input type="button" value="html设置内容" onclick="click1()" />
    <input type="button" value="text设置内容" onclick="click2()" />
    <input type="button" value="获取或设置val值" onclick="click3()" />
    <script>
      //   html() 设置获取标签内容，解析标签 innerHTML
      function click1() {
        $("#poem").html("<h4>孟浩然</h4>");
      }
      //   text() 设置获取标签内容，不解析标签 innerText
      function click2() {
        $("#poem").text("<h4>孟浩然</h4>");
      }
      //   val() 设置获取val属性
      function click3() {
        // 赋值
        $("#username").val("测试");
        //   获取
        alert($("#username").val());
      }
    </script>

获取、设置属性

jQuery设置获取属性方法：

  • attr(属性名，[属性值])：设置或返回所选元素的常规属性。
  • prop(属性名，[属性值])：设置或返回所选元素的某个属性。
    <h2>2.获取设置属性</h2>
    <img src="/jQuery/day48/123.png" width="100" id="img1" alt="img" />
    <input type="button" value="attr获取属性" onclick="click4()" />
    <input type="button" value="prop获取属性" onclick="click5()" />
    <input type="button" value="设置属性" onclick="click6()" />
    <!-- 2.获取设置属性 -->
    <script>
      // attr():获取设置属性，获取一般的属性 width height src
      function click4() {
        alert($("#img1").attr("src"));
      }
      // prop():获取设置属性 获取不要常用的属性  如果attr()不能获取就用这个
      function click5() {
        alert($("#img1").prop("src"));
      }
      //   设置属性
      function click6() {
        $("#img1").prop("width", "200");
      }
    </script>

创建元素

添加新内容的四个jQuery方法：

  • append()：在被选元素的结尾插入内容。
  • prepend()：在被选元素的开头插入内容。
  • after()：在被选元素之后插入内容。
  • before()：在被选元素之前插入内容。
    <h2>DOM操作：创建元素</h2>
    <div id="box">内容</div>
    <input type="button" value="append" onclick="click1()" />
    <input type="button" value="prepend" onclick="click2()" />
    <input type="button" value="after" onclick="click3()" />
    <input type="button" value="before" onclick="click4()" />
    <script>
      // append() 后面追加内容
      function click1() {
        $("#box").append(
          '<img src="/jQuery/day48/123.png" width="100" id="img1" alt="img"/>'
        );
      }
      // prepend()：在被选元素的开头插入内容
      function click2() {
        $("#box").prepend(
          '<img src="/jQuery/day48/123.png" width="100" id="img1" alt="img"/>'
        );
      }
      // after()：在被选元素之后插入内容
      function click3() {
        $("#box").after(
          '<img src="/jQuery/day48/123.png" width="100" id="img1" alt="img"/>'
        );
      }
      // before()：在被选元素之前插入内容
      function click4() {
        $("#box").before(
          '<img src="/jQuery/day48/123.png" width="100" id="img1" alt="img"/>'
        );
      }
    </script>

删除元素

删除元素和内容，可使用以下两个jQuery 方法：

  • remove()：删除被选元素（及其子元素）。
  • empty()：从被选元素中删除子元素。
    <h2>2.删除元素</h2>
    <div id="div">
      <h3 id="poem">春晓</h3>
      <p>春眠不觉晓</p>
      <p>处处闻啼鸟</p>
      <p>夜来风雨声</p>
      <p>花落知多少</p>
    </div>
    <input type="button" value="remove()删除元素" onclick="click5()" />
    <input type="button" value="empty()删除元素" onclick="click6()" />
    <script>
      // remove()：删除被选元素（及其子元素) 删除div
      function click5() {
        $("#div").remove();
      }
      // empty()：从被选元素中删除子元素。 不删除div
      function click6() {
        $("#div ").empty();
      }
    </script>

案例：实现省市级联

省下拉框改变，市级联动改变。

  <body>
    <select name="province" id="province">
      <option value="0">----请选择----</option>
    </select>
    <select name="city" id="city">
      <option value="0">----请选择----</option>
    </select>
    <script>
      var cites = new Array();
      cites["sd"] = ["1", "2", "3"];
      cites["lz"] = ["1", "2", "3"];
      cites["wl"] = ["1", "2", "3"];
      cites["sa"] = ["1", "2", "3"];
      //   覆盖
      cites["wl"] = ["3", "2", "1"];

      // 1.绑定省份
      for (var i in cites) {
        $("#province").append("<option value='" + i + "'>" + i + "</option>");
      }
      // 2.省份添加onchange()事件
      $("#province").change(function () {
        var pro = $("#province").val();
        var selectCites = cites[pro];
        // 清除
        $("#city").empty();
        $("#city").append('<option value="0">----请选择----</option>');
        for (var j in selectCites) {
          $("#city").append(
            "<option value='" +
              selectCites[j] +
              "'>" +
              selectCites[j] +
              "</option>"
          );
        }
      });
    </script>
  </body>

CSS操作

jQuery提供若干进行CSS操作的方法：
• addClass()：向被选元素添加一个或多个类。
• removeClass()：从被选元素删除一个或多个类。
• toggleClass()：对被选元素进行添加/删除类的切换操作。
• 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="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
      .class1 {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <h3 id="poem">春晓</h3>
    <p>春眠不觉晓</p>
    <p>处处闻啼鸟</p>
    <p>夜来风雨声</p>
    <p>花落知多少</p>
    <input type="button" value="设置样式" onclick="click1()" />
    <input type="button" value="获取样式" onclick="click2()" />
    <input type="button" value="addClass()" onclick="click3()" />
    <input type="button" value="removeClass()" onclick="click4()" />
    <input type="button" value="toggleClass()" onclick="click5()" />
    <script>
      // 设置样式
      function click1() {
        // $("p").css("color", "red");
        // 隐式迭代
        $("P").css({ color: "red", "font-size": "20px" });
      }
      // 获取样式
      function click2() {
        alert($("P").css("color"));
      }
      // 向被选元素添加一个或多个类
      function click3() {
        $("#poem").addClass("class1");
      }
      // 从被选元素删除一个或多个类。
      function click4() {
        $("#poem").removeClass("class1");
      }
      // 对被选元素进行添加/删除类的切换操作。
      function click5() {
        $("#poem").toggleClass("class1");
      }
    </script>
  </body>
</html>

尺寸操作

jQuery提供多个处理尺寸的重要方法：
• width()：设置或返回元素的宽度（不包括内边距、边框或外边距）。
• height()：设置或返回元素的高度（不包括内边距、边框或外边距）。
• innerWidth()：设置返回元素的宽度（包括内边距）。
• innerHeight()：设置返回元素的高度（包括内边距）。
• outerWidth()：设置返回元素的宽度（包括内边距，边框）。
• outerHeight()：设置返回元素的高度（包括内边距，边框）

    <div
      id="div2"
      style="width: 100px; height: 100px; border: 5px solid red"
    ></div>
    <script>
      alert($("#div2").width());
      alert($("#div2").height());
    </script>

jQuery查找元素

jQuery遍历根据其相对于其他元素的关系来"查找"HTML 元素。
• parent()：返回被选元素的直接父元素。
• children()：返回被选元素的所有直接子元素。
• siblings()：返回被选元素的所有同胞元素。
• first()：返回被选元素的首个元素。
• last()：返回被选元素的最后元素。

    <div id="div">
      <h3 id="poem">春晓</h3>
      <p>春眠不觉晓</p>
      <p>处处闻啼鸟</p>
      <p>夜来风雨声</p>
      <p>花落知多少</p>
    </div>
    <input type="button" value="查找元素" onclick="click1()" />
    <script>
      function click1() {
        alert($("#poem").text());
        // parent 获取父元素
        alert($("#poem").parent().html());
        // siblings() 获取兄弟元素
        alert($("#poem").siblings().html());
        // children() 获取子元素
        alert($("#div").children().html());
        // fist()  获取第一个元素
        alert($("p").first().html());
        // last()  获取最后一个元素
        alert($("p").last().html());
      }
    </script>


遍历：

  • for
  • each();

get()方法和eq()方法的区别

  • get():返回的对象是DOM对象
  • eq():返回的对象是jQuery对象
      function click2() {
        var ps = $("p");
        //   for循环
        for (var i = 0; i < ps.size(); i++) {
          // var dom = ps.get(i);
          // alert($(dom).html());

          var jq_p = ps.eq(i);
          var dom = jq_p.get(0);
          alert(jq_p.html());
        }

        // foreach
        ps.each(function (i, n) {
          // alert(i + "...." + n.innerHTML);
          alert($(n).html());
        });
      }
    </script>

jQuery AJAX

  • 使用原生AJAX可以实现异步请求比较繁琐。
  • jQuery封装了一套实现异步请求的方法。
<body>
<h1>jQuery实现AJAX操作</h1>
<ul>
	<li>$.get():发送get请求</li>
	<li>$.post();发送post请求</li>
	<li>$.ajax();发送get或post请求，参数较多，使用较少，灵活</li>
</ul>

<input type="button" value="get请求" onclick="click1()" />
<input type="button" value="post请求" onclick="click2()" />
<input type="button" value="ajax请求" onclick="click3()" />
<script type="text/javascript">
	function click1(){
		//url:ajax请求的地址
		//data:发送的数据
		//success:成功后的回调函数
		//dateType:服务器返回的数据类型
		$.get("http://localhost:8080/day46json/login",{"username":"admin","pwd":"888"},function(data){
			alert(data);
		})
	}
	function click2(){
		//url:ajax请求的地址
		//data:发送的数据
		//success:成功后的回调函数
		//dateType:服务器返回的数据类型
		$.post("http://localhost:8080/day46json/login",{"username":"admin","pwd":"888"},function(data){
			alert(data);
		})
	}
	function click3(){
		$.ajax({
			url:"http://localhost:8080/day46json/login2",// url 请求的地址
			type:"post",                                 // type 请求方式 get post
			data:{"username":"admin","pwd":"888"},      // data: 发送数据
			contentType:"application/x-www-form-urlencoded", //content-Type 发送内容类型
			dataType:"html",                                   //服务器返回的数据类型
			success:function(data){
				alert(data);
			},
			error:function(xhr,status){  // error
				alert("请求失败"+status);
			}
		});
	}
</script>
</body>

[/wppay]