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()
  • 美元符号定义 jQuery
  • 选择符(selector)"查询"和"查找" HTML 元素
  • 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选择器

$("对象").css("属性", "值");

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

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

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

<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
30
<!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 简化了事件处理的过程，以下是一些常见的事件及处理示例：

什么是事件？

  • 页面对不同访问者的响应叫做事件。

  • 事件处理程序指的是当HTML中发生某些事件时所调用的方法。

实例：

  • 在元素上移动鼠标。

  • 选取单选按钮

  • 点击元素

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

事件.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() 等。

隐藏和显示

$(selector).hide(speed,callback);   //隐藏
$(selector).show(speed,callback);   //显示
$(selector).toggle(speed,callback); //显示/隐藏切换

淡入淡出

$(selector).fadeIn(speed,callback); //淡入
$(selector).fadeOut(speed,callback);    //淡出
$(selector).fadeToggle(speed,callback); //淡入/淡出切换
$(selector).fadeTo(speed,opacity,callback); //渐变为指定透明度

滑动

$(selector).slideDown(speed,callback);  //向下滑动
$(selector).slideUp(speed,callback);    //向上滑动
$(selector).slideToggle(speed,callback);    //向下滑动/向上滑动切换

动画

$(selector).animate({params},speed,callback);//自定义动画
$(selector).stop(stopAll,goToEnd);  //停止

方法链接

在相同的元素上运行多条jQuery命令，一条接着另一条

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<p>这是一个段落。</p>
<h1>显示/隐藏</h1>
<button onclick="$('p').show()">显示</button>
<button onclick="$('p').hide()">隐藏</button>
<button onclick="$('p').toggle()">隐藏/显示</button>
<h1>淡入/淡出</h1>
<button onclick="$('p').fadeIn()">淡入</button>
<button onclick="$('p').fadeOut()">淡出</button>
<button onclick="$('p').fadeToggle()">淡入/淡出</button>
<h1>滑动方法</h1>
<button onclick="$('p').slideDown()">向下滑动</button>
<button onclick="$('p').slideUp()">向上滑动</button>
<button onclick="$('p').slideToggle()">向下滑动/向上滑动</button>
<h1>动画</h1>
<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
  <button onclick="$('p').show()">显示</button>
  <button onclick="$('p').hide()">隐藏</button>
  <button onclick="$('p').toggle()">隐藏/显示</button>

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

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

  <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
32
<!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

获取/设置内容和属性

  • 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
<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>

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

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

<button onclick="$('#p1').remove()">remove</button>
<button onclick="$('#p1').empty()">remove</button>

<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
52
<!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遍历

遍历 – 祖先

  • parent()

  • parents()

  • parentsUntil()

遍历 – 后代

  • children()

  • find()

遍历 – 过滤

  • first()

  • last()

  • eq()

遍历 – 同胞(siblings)

  • siblings()

  • next()

  • nextAll()

  • nextUntil()

  • prev()

  • prevAll()

  • prevUntil()

html linenums <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
45
<!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 = 异步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);

Ajax.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 () {
    $("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" />
<span>b: </span>
<input id="b" type="text" />
<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
<!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" />
  <span>b: </span>
  <input id="b" type="text" />
  <button>a-b</button>
  <input id="a_b" type="text" />
</body>

</html>