JS20：初始JQuery及使用

一个优雅的搬砖人

已于 2022-04-06 10:01:49 修改

阅读量944

点赞数

分类专栏： # JavaScript 文章标签： javascript jquery

于 2022-04-06 10:01:00 首次发布

本文链接：https://blog.csdn.net/weixin_48306950/article/details/123982599

版权

JavaScript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

jQuery 简介

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等功能变得更加简单，它具有易于使用的 API ，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

jQuery 的理念：“wirte less, do more.”

获取 jQuery

jQuery 官网：jQuery

jQuery 中文文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

进入官网，点击 Download jQuery 按钮

然后选择要下载的版本和类型，一般本地下载开发环境的。

然后放进项目的文件夹下，通过 script 标签的 src 属性指定 jquery 文件

或者可以不下载，搜索 cdn jQuery，引入链接调用在线的 jquery

比如：jQuery cdn加速 (jq22.com)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引用在线的 jQuery -->
    <script src="https://libs.baidu.com/ext-core/3.1.0/ext-core.js"></script>
    <!-- 引用下载 jQuery -->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body></body>
</html>

jQuery 公式

$(selector).action()

其中

$：代表 jQuery

selectot：选择器，css 的选择器都可以用

action：调用的事件

实例：

点击链接弹出 alert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test">点我</a>
</body>
<script>
    // js 的写法
    // const test = document.getElementById('test');
    // test.onclick = function () {
    //     alert('hello jQuery')
    // }

    // jquery
    $('#test').click(function () {
        alert('hello jQuery')
    })
</script>
</html>

jQuery 的选择器

$('标签名').action()	  // 标签选择器
$('#id').action()	  // id选择器
$('.class').action()  // class选择器

jQuery 的事件

分为：键盘事件、鼠标事件、其他事件

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="lib/jquery-3.6.0.js"></script>
    <style>
      #divMove {
        width: 500px;
        height: 500px;
        border: 2px solid rebeccapurple;
      }
    </style>
</head>
<body>
    <!--要求：获取鼠标当前的一个坐标 -->
    mouse：<span id="mouse"></span>

    <div id="divMove">
      在这里移动鼠标试试
    </div>
</body>
<script>
  // 当网页元素加载完毕，响应事件
  // $(document).ready(function () {})
  // 简写版
  $(function () {
    $('#divMove').mousemove(function (e) {
      $('#mouse').text('x：' + e.pageX + ' y：' + e.pageY)
    })
  })
</script>
</html>

执行效果：

在框里移动鼠标，坐标会发送变化

jQuery 操作 DOM 元素

节点文本操作

通过调用 text() 和 html()；如果没有参数则是获取，如果有参数则是设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
   <ul id="test-ul">
       <li id="js">JavaScript</li>
       <li id="java">Java</li>
   </ul>
</body>
<script>
  // 获得值
  $('#test-ul li[id=js]').text();  // 'JavaScript'
  $('#test-ul').html();
  // 设置值
  $('#test-ul li[id=js]').text('123456');
  $('#test-ul').html('<strong>123</strong>');
</script>
</html>

CSS 的操作

调用 css() 事件：

如果是获取属性：css('属性名')

如果是设置一个属性：css('属性名', '属性值')

如果是设置多个属性：css({ '属性名': '属性值', '属性名': '属性值', ...})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
   <ul id="test-ul">
       <li id="js">JavaScript</li>
       <li id="java">Java</li>
   </ul>
</body>
<script>
  // 获取 css 属性
  $('#java').css('color');  // 'rgb(255, 0, 0)'
  // 设置单个 css 属性
  $('#java').css('color', 'red');
  // 设置多个 css 属性
  $('#java').css({'color': 'red', 'backgroundColor': 'green'});
</script>
</html>

元素的显示和隐藏

通过 show() 设置显示元素；

通过 hide() 设置隐藏元素；

本质是 display: none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
   <ul id="test-ul">
       <li id="js">JavaScript</li>
       <li id="java">Java</li>
   </ul>
</body>
<script>
  // 元素显示
  $('#java').show();
  // 元素隐藏
  $('#java').hide();
</script>
</html>

Ajax

jQuery 在全局对象中绑定了 ajax() 函数，可以处理 AJAX 请求。

ajax(url, settings) 函数需要接收一个 URL 和一个可选的 settings 对象，常用的选项如下：

async：是否异步执行 ajax 请求，默认为 true，千万不要指定为 false；
method：发送的 method，缺省为 "GET"，可指定为 "POST"、"PUT" 等；
contentType：发送 POST 请求的格式，默认值为 'applicatoin/x-www-form-urlencoded; charset=UTF-8'，也可以指定为 text/plain、application/json；
data：发送的数据，可以是字符串、数组或 object 。如果是 GET 请求，data 将被转换成 query 附加到 url 上，如果是 POST 请求，根据 contentType 把 data 序列化成合适的格式；
headers：发送的额外的 HTTP 头，必须是一个 object；
dataType：接收的数据格式，可以指定为 'html'、'xml'、'json'、'text' 等，缺省情况下根据相应的 contentType 猜测。

下面的例子发送一个 GET 请求，并返回一个 JSON 格式的数据：

var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
});
// 请求已经发送了

不过，如何用回调函数处理返回的数据和出错时的响应呢？

var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
}).done(function (data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});

get

对常用的 ajax 操作，jQuery 提供了一些辅助的方法。由于 GET 请求最常见，所以 jQuery 提供了 get() 方法，可以这么写：

var jqxhr = $.get('/api/v1/resource', {
    name: 'Bob Lee',
    check: 1
});

第二个参数如果是 object，jQuery 自动把它变成 query string 然后加到 url 后面，实际的 url 是：

/path/to/resource?name=Bob%20Lee&check=1

post

post() 和 get() 类似，但是传入的第二个参数默认被序列化为 application/x-www-form-urlencoded：

var jqxhr = $.post('/api/v1/resource', {
    name: 'Bob Lee',
    check: 1
});

实际构造的数据 name=Bob%20Lee&check=1 作为 POST 的 body 被发送。

getJSON

由于 JSON 用的越来越普遍，所以 jQuery 也提供了 getJSON() 方法来快速通过 GET 获取一个 JSON 对象：

var jqxhr = $.getJSON('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
}).done(function (data) {
    // data已经被解析为JSON对象了
});

一个优雅的搬砖人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
JS20：初始JQuery及使用

jQuery 简介jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等功能变得更加简单，它具有易于使用的 API ，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。jQuery 的理念：“wirte less, do more.”获取 jQueryjQuery 官网：jQueryjQuery 中文文档：jQuery API 中文文档 | j
复制链接

扫一扫