JavaEE
鸿蒙应用开发
集成电路应用开发
人工智能开发
AI+Linux云计算运维
Python+大数据开发
AI+设计
软件测试
新媒体+短视频
HTML&JS+前端
更新时间:2023年03月06日 11时29分32秒 来源:黑马程序员
在引入jQuery后，就可以使用jQuery提供的功能了。下面通过代码演示jQuery的简单使用，具体代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery</title>
<style>
div { width: 200px; height: 200px; background-color: pink; }
</style>
<script src="jquery-3.1.1.min.js">
</head>
<body>
<div></div>
<script>
$("div").hide(); // 隐藏div元素
</script>
</body>
</html>在上述代码中，第9行用于引入jQurey，第14行用于通过jQuery来实现隐藏div元素的效果。通过浏览器访问测试，可以看到div被隐藏起来了。如果将第14行代码注释，则div就会显示出来。
由此可见，在使用jQuery时，有两个基本步骤，第一步是获取要操作的元素，也就是在$()函数中传入字符串div，表示div元素；第二步是调用操作方法，如hide()方法用来将元素隐藏。这个步骤和原生JavaScript的DOM操作其实是很类似的，但代码简洁了许多。下面通过代码对比jQuery和JavaScript原生代码的区别。
// jQuery代码（为了方便对比，将代码分成两行书写）
var div = $("div"); // 获取元素
div.hide(); // 对元素进行操作// JavaScript原生代码
var div = document.querySelector('div'); // 获取元素
div.style.display = 'none'; // 对元素进行操作在使用jQuery时需要注意代码的书写位置， jQuery代码需要写在要操作的DOM元素的后面，确保DOM元素已经加载后，才可以用jQuery进行操作。如果将jQuery代码写在DOM元素前面，则代码不会生效，示例代码如下。 <body>
<script>
$("div").hide();
</script>
<div></div>
</body>上述代码将要操作的div元素写在了第5行，通过浏览器访问，会发现div没有被隐藏起来，说明jQuery没有找到div元素。
如果一定要将jQuery代码写在DOM元素的前面，则可以利用如下语法来实现。
// 语法1（简写形式）
$(function() {
// 页面DOM加载后执行的代码
});
// 语法2（完整形式）
$(document).ready(function() {
// 页面DOM加载完成后执行的代码
});上述代码是jQuery提供的加载事件，将页面DOM加载完成后要执行的代码提前写到函数中，传给jQuery，由jQuery在合适的时机去执行。上述两种语法任选其一，由于第1种语法比较简洁，在开发中推荐使用第1种。
下面通过代码演示jQuery加载事件的使用，具体代码如下。
<body>
<script>
$(function() {
$("div").hide();
});
</script>
<div></div>
</body>通过浏览器访问，会发现div成功被隐藏起来了。
需要注意的是，虽然jQuery的加载事件和DOM中的window.onload类似，但也有不同之处，具体对比如表1所示。
表1 页面加载事件对比
| 对比项 | window.onload | $(document).ready() |
|---|---|---|
| 执行时机 | 必须等待网页中的所有内容加载完成后（包括外 部元素，如图片）才能执行 | 网页中的所有DOM绘制完成后就执行（可能 关联内容并未加载完成） |
| 编写个数 | 不能编写多个 | 能够编写多个，依次执行 |
| 简化写法 | 无 | $() |
猜你喜欢：
