jQuery的基本使用
jQuery的基本使用
1.jQuery的入口函数
两种方法:
<body>
<script>
// $('div').hide();
// 此时script写在上方。按顺序加载内容,先加载的script,后加载的div,运行函数时无对象,不起作用
// 方法一:等着页面加载完成再去执行js代码
// $(document).ready(function(){
// // 此处是页面DOM加载完成的入口
// $('div').hide();
// })
// 方法二:等着页面加载完成再去执行js代码
$(function(){
$('div').hide();
})
</script>
<div></div>
</body>
- 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装。
- 相当于原生js 中的DOMContentLoaded。
- 不同于原生js 中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
2. jQuery的顶级对象 $
<body>
<script>
// 1.$ 是jQuery的别称
// $(function(){
// alert(11)
// });
jQuery(function(){
// alert(11)
// $('div').hide();
jQuery('div').hide();
});
// 2.$ 同时也是jQuery的 顶级对象
</script>
<div></div>
</body>
- $是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$
- $是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成Query对象,就可以调用jQuery的方法。