大家好,今天我们来分享,jQuery的基本认识

jQuery 是一个 JavaScript 库,它的里面存在大量的JavaScript函数

jQuery 极大地简化了 JavaScript 编程

jQuery 的获取:
https://jquery.com/ //这是它的官网


csdn jquery 引入 jquery的引入_html

我这里使用的是:
jquery 3.4.1 这个版本,看这个截图,jquery-3.4.1.js 是未压缩的(273k) 用于生产
jquery-3.4.1.main.js 这是压缩的(86k) 用于开发

使用方法有两种
1.引入我们这个包
2. cdn jquery (在线的)

百度搜索:

csdn jquery 引入 jquery的引入_javascript_02

csdn jquery 引入 jquery的引入_javascript_03

或者直接打开这个网站

https://www.jq22.com/cdn/

看红色箭头所指的地方:

csdn jquery 引入 jquery的引入_csdn jquery 引入_04

这里,我们就可以使用在线cdn

即cdn引入:
看源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jqueryui/1.8.22/jquery-ui.min.js"></script>
</head>
<body>

</body>
</html>

第二种方法:
我们可以使用本地的jquery 包

看我在IDEA 当中的文件

csdn jquery 引入 jquery的引入_csdn jquery 引入_05

把现成的jquery包 放到lib 文件

复制一下就可以了

csdn jquery 引入 jquery的引入_javascript_06

看jquery 包,

csdn jquery 引入 jquery的引入_html_07


右边看到的都是这个jquery 里包含着的JavaScript函数

这是我们导入本地jquery包的方法

有一点要非常的注意,这两种方法不可以同时使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="http://libs.baidu.com/jqueryui/1.8.22/jquery-ui.min.js"></script>-->
    <script src="lib/jquery-3.4.1.js"></script>
<!-- 这是我们导入本地jquery包的方法   -->
    
    
    
<!--这是我们使用jquery  的两种方法,
    有一点要非常的注意,这两种方法不可以同时使用-->
</head>
<body>

</body>
</html>

截图:

csdn jquery 引入 jquery的引入_前端_08

其实到这里,我们关于jquery 的准备工作就完成了

我们来搞一个具体的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="http://libs.baidu.com/jqueryui/1.8.22/jquery-ui.min.js"></script>-->
    <script src="lib/jquery-3.4.1.js"></script>
<!-- 这是我们导入本地jquery包的方法   -->



<!--这是我们使用jquery  的两种方法,
    有一点要非常的注意,这两种方法不可以同时使用-->
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
    document.getElementById('id');
    $('#test-jquery').click(function () {
        alert('hello,jquery')

    })
</script>

</body>
</html>

看网页的结果:

csdn jquery 引入 jquery的引入_csdn jquery 引入_09

这样的话,我们第一个jquery程序就完成了(我们用的是本地导入的方法)

还有,整个一个jquery的 使用,记住一个公式:

公式: $(selector).action()

就是一个$ + 选择器+ 事件

1.要知道jquery 是什么

2.要知道jquery 的导入方法

3.了解基本的使用(并输出一个基本的程序)

大家照做就可以了,是没有问题的

好了,有关于jQuery的基本认识就到这里了,谢谢大家