标签:脚本 简化 doc jquery库 加载完成 asc 清除 语言 文档资源
<body>
<div class="box"></div>
<!--引包(引入jquery库)-->
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
//调用时使用jQuery与$是一样的
//第一个参数是选择器(类选择器)
console.log(jQuery(‘box‘));
console.log($(‘box‘));
</script>
<body>
<!--Jquery框架封装的时候模仿得失伪数组对象,有索引和length,以及n个方法-->
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
//window.onload() 1 覆盖现象。2 等待图片资源加载完成之后才调用脚本代码,用户体验极差
//入口函数
//返回的是jquery
//jquery对象与js对象之间的转换
console.log($(document)[0]);
//等待文档资源加载完成之后调用此方法:
$(document).ready(function () {
alert(1)
});
//jquery简便写法入口函数,两种入口函数没有覆盖现象
$(function () {
alert(2)
});
$(window).ready(function () {
alert(3)
//表示图片资源加载完成之后
})
</script>
</body>
为什么两种对象要进行互相转换,解释在注释里!
<body>
<div id="box"></div>
<div id="box2"></div>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//转换为jqery对象 js对象更加希望转换成jquery对象操作简便的dom
//转换为js对象的原因:因为js是包含jquery,jquery只是封装了DOM,事件,ajax,动画。
//假如说jquery对象要使用的方法不在封装里面,只能转换成js对象
//js对象与jquery对象一定要分清除,对应对象只能调用对应的方法,不能混淆
//获取jquery对象
console.log($(‘#box2‘));
//获取js对象
var box = document.getElementById(‘box2‘);
console.log(box);
//jquery对象转换成js对象
console.log($(‘#box2‘)[0]);
//js对象转换为jquery,直接将js对象传到$()中
console.log($(box));
})
</script>
</body>
jQuery的文件引入、入口函数以及js对象和jquery对象之间的互相转换
标签:脚本 简化 doc jquery库 加载完成 asc 清除 语言 文档资源
原文地址:https://www.cnblogs.com/wualin/p/10046471.html