最近在学习jQuery,会在这里持续更新学习笔记,希望能够对陌生的你有所帮助! 笔记会尽可能的简洁和通俗易懂,喜欢的话记得点赞喔 ~
一、什么是jQuery?
jQuery是一个JavaScript函数库,它极大简化了JavaScript语法,让Web开发中的HTML文档遍历、事件处理、动画和Ajax交互等操作变得更加简单。它的宗旨是Write less, do more。
需要注意的是,在学习jQuery之前,你应该对HTML、 CSS、 JavaScript和Document Object Model (DOM) 的基础知识有一定的了解。
二、如何引用jQuery库?
引用jQuery有两种方法:
- 本地安装
- 基于CDN引用
1. 本地安装
首先,在Github jQuery上下载最新的jQuery版本,并解压。在这里我们选择3.3.1版本。
然后,在解压文件的dist目录下找到jquery.js文件,把它的路径放到<script>的src属性中。例如:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src = "/jquery-3.3.1/dist/jquery.min.js"></script>
</head>
<body>
<h1>Hello</h1>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</body>
</html>
2. 基于CDN引用
如果你不想在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。只需把<script>中的路径改为相应资源的URL即可。这些URL都可以从jQuery Download中找到。
例如:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
三、如何调用jQuery函数?
所有的 jQuery 事件和函数都应该置于ready事件中,因为$(document).ready()定义了当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
语法:
$(document).ready(function() {
// jQuery 事件和函数
});
举例:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src = "jquery-3.3.1/dist/jquery.min.js"></script>
</head>
<body>
<div id = "mydiv">
点击查看弹出框
</div>
<script type = "text/javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, world!");});
});
</script>
</body>
</html>