进阶 5 - jQuery 和 Ajax

jQuery是一个曾经火遍大江南北的一个Javascript的第三方库. jQuery的理念: write less do more. 其含义就是让前端程序员从繁琐的js代码中解脱出来. 我们来看看是否真的能解脱出来.

python => 基础语法 => 系统模块 => 第三方的库

jQuery的下载:

jquery:

https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.9.1/jquery.jsarrow-up-right

https://code.jquery.com/jquery-3.6.0.min.js

只需要把上面这个jquery下载的网址复制到浏览器上, 然后保存(ctrl+s)成js文件就可以了.

jQuery初使用

导入jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

我们用jQuery来完成一个按钮的基本点击效果. 当然, 得和传统的js对比一下

先准备好html. 页面结构. 这里复制粘贴就好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="div-out">
        <input type="button" class="btn" value="我是按钮. 你怕不怕">
        <div class="mydiv">我怕死了...</div>
    </div>
</body>
</html>

需求: 点击按钮. 更改mydiv中的内容.

除了$外, 其他东西貌似都挺容易理解的. 而且代码简洁. 异常舒爽.

$是什么鬼, 在jQuery中, $可以认为是jQuery最明显的一个标志了. $()可以把一个普通的js对象转化成jQuery对象. 并且在jquery中 $的含义就是jQuery.

jQuery选择器

jQuery的逻辑和css选择器的逻辑是一样的.

可以使用jQuery选择器快速的对页面结构进行操作.

案例:

发送ajax请求

  • 什么是ajax?

    • AJAX = 异步的javascript和XML(Asynchronous Javascript and XML)

    • 它不是一门编程语言,而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。

    • 对于传统的网页,如果想更新内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容。在这个过程中,页面实际上是在后台与服务器进行了数据交互,获得数据之后,再利用JavaScript改变页面,这样页面内容就会更新了。

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

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

案例:https://www.endata.com.cn/BoxOffice/BO/Year/index.htmlarrow-up-right

Last updated