简单知识点
1.JavaScript和jQuery入口函数
//jquery 固定写法
$(document).ready(function (item) {
alert("hello,jq")
})
//js固定写法
window.onload = function () {
alert("hello,lwq1")
}
2.JavaScript和jQuery入口函数的不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-jquery和js入口函数的区别.html</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
/* // js
window.onload = function (ev) {
let img = document.getElementsByTagName("img")[0];
console.log(img)
// 通过原生到js拿到图片到dom元素到宽高
let width = window.getComputedStyle(img).width;
console.log('js:'+width);
};
// jquery
// 通过jq不能拿dom元素到宽高
$(document).ready(function () {
let img2 = $("img")[0];
console.log(img2)
})*/
/*
js 如果编写了多个入口函数，后面编写那个入口函数会覆盖前面那个入口函数
window.onload = function () {
alert("hello,lwq1")
}
window.onload = function (ev) {
alert("hello,lwq2")
}
*/
//jq不会覆盖前面那个入口函数，按编写顺序执行代码
$(document).ready(function () {
alert("hello lwq1")
})
$(document).ready(function () {
alert("hello lwq2")
})
</script>
</head>
<body>
<img src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt="">
</body>
</html>
3.jQuery入口函数的其他方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入口函数的其他方法</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
// $就是jQuery jQuery就是$ 没有什么区别
//第一种方法
$(document).ready(function () {
alert("第一种方法")
})
//第二种方法
jQuery(document).ready(function () {
alert("第二种方法")
})
//第三种方法 （推荐）
$(function () {
alert("第三种方法")
})
//第四种方法
jQuery(function () {
alert("第二种方法")
})
</script>
</body>
</html>
4.jQuery的冲突问题
在我们的编程中，我们也可以编写一个$的js，如果这样的话就会和jQuery的起冲突
解决方法很好解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery冲突问题</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/test.js"></script>
</head>
<body>
<script>
//1.释放$的使用权
jQuery.noConflict()
jQuery(function () {
alert("123")
})
</script>
</body>
</html>