大家好,今天我们来分享,jQuery的基本认识
jQuery 是一个 JavaScript 库,它的里面存在大量的JavaScript函数
jQuery 极大地简化了 JavaScript 编程
jQuery 的获取:
https://jquery.com/ //这是它的官网
我这里使用的是:
jquery 3.4.1 这个版本,看这个截图,jquery-3.4.1.js 是未压缩的(273k) 用于生产
jquery-3.4.1.main.js 这是压缩的(86k) 用于开发
使用方法有两种
1.引入我们这个包
2. cdn jquery (在线的)
百度搜索:
或者直接打开这个网站
https://www.jq22.com/cdn/
看红色箭头所指的地方:
这里,我们就可以使用在线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 当中的文件
把现成的jquery包 放到lib 文件
复制一下就可以了
看jquery 包,
右边看到的都是这个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>
截图:
其实到这里,我们关于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>
看网页的结果:
这样的话,我们第一个jquery程序就完成了(我们用的是本地导入的方法)
还有,整个一个jquery的 使用,记住一个公式:
公式: $(selector).action()
就是一个$ + 选择器+ 事件
1.要知道jquery 是什么
2.要知道jquery 的导入方法
3.了解基本的使用(并输出一个基本的程序)
大家照做就可以了,是没有问题的
好了,有关于jQuery的基本认识就到这里了,谢谢大家