2.JQuery的基本使用
在http://jquery.com下载代码
点击DOwnload下载
我用的是vscode软件，然后新建一个空白js文件
复制js代码进去
2.3JQuery的入口函数
这个比较简单的代码表示
$(function(){
…//此处是页面DOM加载完成的入口
});
$(document).ready(function(){
…//此处是页面DOM加载完成的入口
});
1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，JQuery帮我们完成了封装。
2.相当于原生js中的DOMContentLoaded
3.不同于原生js中的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码。
实验
建立一个html文件
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<script src=”jquery.min.js”></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<script>
// $(‘div’).hide();
// 1.等着页面DOM加载完毕再去执行js代码
// $(document).ready(function() {
// $(‘div’).hide();
// })
//2.等着页面DOM加载完毕再去执行js代码
$(function() {
$(‘div’).hide();
})
</script>
<div></div>
</body>
</html>
2.4jQuery的顶级对象$
1.$是jQuery的别称，在代码中可以使用jQuery代替$,但一般为了方便，通常都直接使用$.
2.$是jQuery的顶级对象，相当于原生JavaScript中的window,把元素利用$包装成jQuery对象，就是调用jQuery的方法
实验
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<script src=”jquery.min.js”></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
//1.$是jQuery的别称（另外的名字）
// $(function() {
// alert(11)
// });
jQuery(function() {
// alert(11)
//$(‘div’).hide();
jQuery(‘div’).hide();
});
//2.$同时也是JQuery的顶级对象
</script>
</body>
</html>
版权声明：本文为luodejian原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。