语言►JavaScript►库►jquery

什么是jQuery

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/20/%E4%BB%80%E4%B9%88%E6%98%AFjQuery/

摘要

本文主要讲述了：

  1. 什么是 jQuery
  2. 规格
  3. 兼容性
  4. 标识符
  5. 查看版本
  6. noConflict()
  7. DOM 选择
  8. 获取表单控件的值
  9. 创建动画
  10. 处理事件
  11. Ajax
  12. 插件

正文

jQuery 是一个 JavaScript 库。

jQuery 的初始版由 John Resig 于 2006 年 8 月 26 日发布。

jQuery 用于简化 Web 前端开发。

规格

UMD

兼容性

  • jQuery@1兼容 IE6+
  • jQuery@3兼容 IE9+

标识符

jQuery 拥有 2 个标识符，分别是：jQuery和$。

查看版本

1
console.log($.fn.jquery);

noConflict()

用于解除对$标识符的占用。

1
$.noConflict();

DOM 选择

示例：选择 id 为foo的元素

1
console.log($('#foo'));

示例：选择 class 为foo的元素

1
console.log($('.foo'));

示例：选择元素名称为input的元素

1
console.log($('input'));

获取表单控件的值

示例：

1
console.log($('input').val());

创建动画

示例：使 class 为foo的元素在1秒内变透明

1
2
3
4
5
6
$('.foo').animate(
  {
    opacity: 0,
  },
  1e3
);

处理事件

示例：监听window的load事件

1
2
3
$(window).on('load', function (event) {
  console.log(event);
});

示例：监听 id 为foo的元素的click事件

1
2
3
$('#foo').on('click', function (event) {
  console.log(event);
});

Ajax

示例：GET方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
  url: '/demo.json',
  method: 'GET',
  headers: {
    foo: 'bar',
  },
  data: {
    foo: 'bar',
  },
  success: function (res) {
    console.log(res);
  },
  error: function (error) {
    console.log(error);
  },
});

示例 2：POST方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
  url: '/demo.json',
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
  data: {
    foo: 'bar',
  },
  success: function (res) {
    console.log(res);
  },
  error: function (error) {
    console.log(error);
  },
});

示例 3：POST方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
  url: '/demo.json',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json; charset=UTF-8',
  },
  data: {
    foo: 'bar',
  },
  success: function (res) {
    console.log(res);
  },
  error: function (error) {
    console.log(error);
  },
});

插件

得益于开放的架构，jQuery 拥有数量庞大的第三方插件库。

示例：jQuery Cookie

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="jquery-1.12.4.min.js"></script>
    <script src="jquery.cookie.js"></script>
    <script>
      $.cookie('foo', 'bar');
      console.log($.cookie('foo'));
    </script>
  </body>
</html>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/20/%E4%BB%80%E4%B9%88%E6%98%AFjQuery/

本文对你有帮助？请支持我

支付宝
微信