Skip to content

前端框架 - jQuery

jQuery简介

https://jquery.com/

https://www.w3cschool.cn/jquery/

jQuery v3.6.1

什么是jQuery

jQuery是一个快速、简洁的JavaScript框架，2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More” 。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery库包主要功能：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

jQuery语法

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

基础语法： 

1
$(selector).action()
  1. 美元符号定义 jQuery
  2. 选择符(selector)"查询"和"查找" HTML 元素
  3. jQuery 的 action() 执行对元素的操作
DOM操作
1
2
3
4
$(this).hide() //隐藏当前元素
$("p").hide() //隐藏所有段落
$("p .test").hide() //隐藏所有 class="test" 的段落
$("#test").hide() 、、隐藏所有 id="test" 的元素
事件处理
1
2
3
4
5
<script lang="javascript">
  $(document).ready(function() {
    // 开始写 jQuery 代码...
  }); 
</script>

选择器

jQuery 选择器允许通过元素名称、ID、类、属性等方式来选取 HTML 元素。

常见选择器

选择器 语法
元素选择器 $("元素名")
#id 选择器 $("#id")
.class选择器 $(".类名")
CSS选择器 $("选择器")

  • 效果

  • 源代码

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    <button onclick="$('p').show()">显示段落</button>
<button onclick="$('p').hide()">隐藏段落</button>

<h3>#id选择器</h3>
<button onclick="$('#p1').show()">显示段落1</button>
<button onclick="$('#p1').hide()">隐藏段落1</button>

<h3>.class选择器</h3>
<button onclick="$('.my_class').show()">显示段落my_class</button>
<button onclick="$('.my_class').hide()">隐藏段落my_class</button>

<h3>CSS选择器</h3>
<button onclick="$('p').css('background-color', 'red')">修改段落背景为红色</button>
<button onclick="$('p').css('background-color', 'blue')">修改段落背景为蓝色</button>
源代码
选择器.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>选择器示例</title>
  <script src="jquery-3.6.1.min.js"></script>
</head>

<body>
  <h3>元素选择器</h3>
  <p id="p1" class="my_class" style="background-color: green;">这是一个段落。</p>
  <button onclick="$('p').show()">显示段落</button>
  <button onclick="$('p').hide()">隐藏段落</button>

  <h3>#id选择器</h3>
  <button onclick="$('#p1').show()">显示段落1</button>
  <button onclick="$('#p1').hide()">隐藏段落1</button>

  <h3>.class选择器</h3>
  <button onclick="$('.my_class').show()">显示段落my_class</button>
  <button onclick="$('.my_class').hide()">隐藏段落my_class</button>

  <h3>CSS选择器</h3>
  <button onclick="$('p').css('background-color', 'red')">修改段落背景为红色</button>
  <button onclick="$('p').css('background-color', 'blue')">修改段落背景为蓝色</button>
</body>

</html>

事件处理

jQuery封装了事件处理方法，方便开发人员处理事件。

常见事件

事件 方法
鼠标事件 click、dblclick、mouseenter、mouseleave、hover
键盘事件 keypress、keydown、keyup
表单事件 submit、change、blur、focus
文档/窗口事件 load、unload、resize、scroll

  • 效果

  • 源代码

    事件.html
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
    <script>
  $(document).ready(function () {
    $action_docment = $("#action_docment")
    $("#p1").click(function () {
      $("#action_mouse").text("click事件");
    });
    $("#k1").keypress(function () {
      $("#action_key").text("keypress事件");
    });
    $("#f1").submit(function () {
      $("#action_form").text("submit事件");
      return false;
    });
    $(window).resize(function () {
      $("#action_docment").text("resize事件")
    })
  });
</script>
源代码
事件.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>事件示例</title>
  <script src="jquery-3.6.1.min.js"></script>
  <script>
    $(document).ready(function () {
      $action_docment = $("#action_docment")
      $("#p1").click(function () {
        $("#action_mouse").text("click事件");
      });
      $("#k1").keypress(function () {
        $("#action_key").text("keypress事件");
      });
      $("#f1").submit(function () {
        $("#action_form").text("submit事件");
        return false;
      });
      $(window).resize(function () {
        $("#action_docment").text("resize事件")
      })
    });
  </script>
</head>

<body>

  <h3>鼠标事件</h3>
  <span>当前动作：</span><span id="action_mouse"></span>
  <p id="p1">这是一个段落。</p>

  <h3>键盘事件</h3>
  <span>当前动作：</span><span id="action_key"></span>
  <p><input id="k1" type="text"></input></p>

  <h3>表单事件</h3>
  <span>当前动作：</span><span id="action_form"></span>
  <form id="f1">
    <input type="text"></input>
    <input type="submit"></input>
  </form>

  <h3>文档/窗口事件</h3>
  <span>当前动作：</span><span id="action_docment"></span>
</body>

</html>

动画效果

jQuery 提供了一些简单的动画方法，例如 show()、hide()、fadeIn()、fadeOut() 等。

常见动画效果

效果 方法
隐藏和显示 hide()、show()、toggle()
淡入淡出 fadeIn()、fadeOut() 、fadeToggle()、fadeTo()
滑动 slideDown()、slideUp()、slideToggle()
动画 animate()、stop()、queue()
方法链接 在相同的元素上运行多条jQuery命令，一条接着另一条

  • 效果

  • 源代码

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    <h3>显示/隐藏</h3>
<button onclick="$('p').show()">显示</button>
<button onclick="$('p').hide()">隐藏</button>
<button onclick="$('p').toggle()">隐藏/显示</button>

<h3>淡入/淡出</h3>
<button onclick="$('p').fadeIn()">淡入</button>
<button onclick="$('p').fadeOut()">淡出</button>
<button onclick="$('p').fadeToggle()">淡入/淡出</button>

<h3>滑动方法</h3>
<button onclick="$('p').slideDown()">向下滑动</button>
<button onclick="$('p').slideUp()">向上滑动</button>
<button onclick="$('p').slideToggle()">向下滑动/向上滑动</button>

<h3>动画</h3>
<button onclick="$('p').animate({height:'300px',opacity:'0.4'}, 'slow')">动画</button>
源代码
效果.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>效果示例</title>
  <script src="jquery-3.6.1.min.js"></script>
</head>

<body>
  <p>这是一个段落。</p>
  <h3>显示/隐藏</h3>
  <button onclick="$('p').show()">显示</button>
  <button onclick="$('p').hide()">隐藏</button>
  <button onclick="$('p').toggle()">隐藏/显示</button>

  <h3>淡入/淡出</h3>
  <button onclick="$('p').fadeIn()">淡入</button>
  <button onclick="$('p').fadeOut()">淡出</button>
  <button onclick="$('p').fadeToggle()">淡入/淡出</button>

  <h3>滑动方法</h3>
  <button onclick="$('p').slideDown()">向下滑动</button>
  <button onclick="$('p').slideUp()">向上滑动</button>
  <button onclick="$('p').slideToggle()">向下滑动/向上滑动</button>

  <h3>动画</h3>
  <button onclick="$('p').animate({height:'300px',opacity:'0.4'}, 'slow')">动画</button>
</body>

</html>

jQuery Html

jQuery 提供了一些方法来操作 HTML 元素，例如 text()、html()、val()、attr() 等。

常见操作

操作 方法
获取/设置内容和属性 text()、html() 、 val()、attr()
添加元素 append() 、prepend() 、after() 、before()
删除元素/内容 remove()、empty()
操作CSS addClass() 、removeClass() 、toggleClass、css()
尺寸方法 width() 、height() 、 innerWidth() 、 innerHeight() 、outerWidth() 、 outerHeight()

示例：

<script>
  $(document).ready(function () {
    $("span").parent().css({ "color": "red", "border": "2px solid red" });
 });
</script>

  • 效果

  • 源代码

    Html.html
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    <h3>获取内容和属性</h3>
<button onclick="alert($('#p1').text())">text</button>
<button onclick="alert($('#p1').html())">html</button>
<button onclick="alert($('#p1').val())">val</button>
<button onclick="alert($('#p1').attr('class'))">attr</button>

<h3>设置内容和属性</h3>
<button onclick="$('#p1').text('hello paragraph!')">text</button>
<button onclick="$('#p1').text('<button>hello paragraph!</button>')">html</button>
<button onclick="$('#p1').val('hello val!')">val</button>
<button onclick="$('#p1').attr('class', 'fail_class')">attr</button>

<h3>添加元素</h3>
<button onclick="$('#p1').append('Some appended text.')">append</button>
<button onclick="$('#p1').prepend('Some prepended text.')">prepended</button>
<button onclick="$('#p1').after('<p>Some after text.</p>')">after</button>
<button onclick="$('#p1').before('<p>Some before text.</p>')">before</button>

<h3>删除元素</h3>
<button onclick="$('#p1').remove()">remove</button>
<button onclick="$('#p1').empty()">remove</button>

<h3>CSS类</h3>
<button onclick="$('#p1').addClass('blue')">addClass</button>
<button onclick="$('#p1').removeClass('blue')">removeClass</button>
<button onclick="$('#p1').toggleClass('blue')">toggleClass</button>
源代码
Html.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Html示例</title>
  <script src="jquery-3.6.1.min.js"></script>
  <style>
    .ok_class {
      background-color: green;
    }
    .fail_class {
      background-color: red;
    }
    .blue {
      color: blue;
    }
  </style>
</head>

<body>
  <p id="p1" class="ok_class">这是一个段落。</p>
  <h3>获取内容和属性</h3>
  <button onclick="alert($('#p1').text())">text</button>
  <button onclick="alert($('#p1').html())">html</button>
  <button onclick="alert($('#p1').val())">val</button>
  <button onclick="alert($('#p1').attr('class'))">attr</button>

  <h3>设置内容和属性</h3>
  <button onclick="$('#p1').text('hello paragraph!')">text</button>
  <button onclick="$('#p1').text('<button>hello paragraph!</button>')">html</button>
  <button onclick="$('#p1').val('hello val!')">val</button>
  <button onclick="$('#p1').attr('class', 'fail_class')">attr</button>

  <h3>添加元素</h3>
  <button onclick="$('#p1').append('Some appended text.')">append</button>
  <button onclick="$('#p1').prepend('Some prepended text.')">prepended</button>
  <button onclick="$('#p1').after('<p>Some after text.</p>')">after</button>
  <button onclick="$('#p1').before('<p>Some before text.</p>')">before</button>

  <h3>删除元素</h3>
  <button onclick="$('#p1').remove()">remove</button>
  <button onclick="$('#p1').empty()">remove</button>

  <h3>CSS类</h3>
  <button onclick="$('#p1').addClass('blue')">addClass</button>
  <button onclick="$('#p1').removeClass('blue')">removeClass</button>
  <button onclick="$('#p1').toggleClass('blue')">toggleClass</button>
</body>

</html>

jQuery遍历

jQuery 提供了一些方法来遍历 HTML 元素，例如 parent()、parents()、parentsUntil() 等。

常见遍历

类型 方法
祖先 parent()、parents()、parentsUntil()
后代 children()、find()
过滤 filter()、last()、eq()
同胞(siblings) siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()

示例： 

1
2
3
4
5
<script>
    $(document).ready(function () {
    $("span").parent().css({ "color": "red", "border": "2px solid red" });
    });
</script>

  • 效果

  • 源代码

    遍历.html
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
    <script>
  $(document).ready(function () {
    $("span").parent().css({ "color": "red", "border": "2px solid red" });
  });
</script>

<div class="ancestors">
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>
  </div>

  <div style="width:500px;">div (祖父元素)
    <p>p (父元素)
      <span>span</span>
    </p>
  </div>
</div>
源代码
遍历.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>遍历示例</title>
  <style>
    .ancestors * {
      display: block;
      border: 2px solid lightgrey;
      color: lightgrey;
      padding: 5px;
      margin: 15px;
    }
  </style>
  <script src="jquery-3.6.1.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("span").parent().css({ "color": "red", "border": "2px solid red" });
    });
  </script>
</head>

<body>
  <div class="ancestors">
    <div style="width:500px;">div (曾祖父元素)
      <ul>ul (祖父元素)
        <li>li (父元素)
          <span>span</span>
        </li>
      </ul>
    </div>

    <div style="width:500px;">div (祖父元素)
      <p>p (父元素)
        <span>span</span>
      </p>
    </div>
  </div>

</body>

</html>

jQuery AJAX

什么是 AJAX？ Web Web2.0 Web3.0(去中心化）

  • AJAX = 异步JavaScript和XML

  • 简短地说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

  • 通过jQuery AJAX方法，您能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON- 同时您能够把这些外部数据直接载入网页的被选元素中。

主要方法

方法 语法
load() $(selector).load(URL,data,callback);
$.get() $.get(URL,callback);
$.post() 方法 $.post(URL,data,callback);

  • 效果

  • 源代码

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <script>
  $(document).ready(function () {
    $("button").click(function () {
      $.get("http://127.0.0.1:8888/minus", { a: 1, b: 2 }, function (res) {
        $("#a_b").val(res);
      })
    });

  });
  function minus_done(res) {
    alert(res);
    $("#a_b").val(data);
  }
</script>

<span>a: </span>
<input id="a" type="text" />
<br>
<span>b: </span>
<input id="b" type="text" />
<br>
<button>a-b</button>
<input id="a_b" type="text" />
源代码
Ajax.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Ajax示例</title>
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <script src="jquery-3.6.1.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $.get("http://127.0.0.1:8888/minus", { a: 1, b: 2 }, function (res) {
          $("#a_b").val(res);
        })
      });

    });
    function minus_done(res) {
      alert(res);
      $("#a_b").val(data);
    }
  </script>
</head>

<body>
  <span>a: </span>
  <input id="a" type="text" />
  <br>
  <span>b: </span>
  <input id="b" type="text" />
  <br>
  <button>a-b</button>
  <input id="a_b" type="text" />
</body>

</html>