说明：本人正在学习JQuery知识，以下内容来自于我对B站李南江老师的视频教程《李南江亲授-jQuery+Ajax从放弃到知根知底》的总结，以当作自己的学习笔记。（顺便推荐一下这个教程，语速合我口味！）
1.JQuery入口函数
JQuery入口函数有四种写法：
<script>
//第一种
$(function(){
//JQuery代码...
})
//第二种
jQuery(function(){
//JQuery代码...
})
//第三种
$(document).ready(function9){
//JQuery代码...
})
//第四种
jQuery(document).ready(function(){
//JQuery代码...
})
</script>本着write less,do more的原则，推荐第一种写法
2.加载模式对比
2.1用原生JS和JQuery分别在入口函数中获取一个img标签的DOM元素和宽度：
<body>
<img src="img/HBuilder.png" />
</body>2.1.1原生JS写法及结果：
写法
<script>
//原生js入口函数
window.onload=function(){
var img=document.getElementsByTagName("img")[0];
console.log(img);
var width=window.getComputedStyle(img).width;
console.log(width);
}
</script>结果：成功获取到DOM元素和宽度
2.1.2JQuery写法及结果：（注意： 1.刷新网页前清空浏览器数据 2.图片路径最好不要在本地，否则加载太快效果体现不出来）
<script>
$(document).ready(function(){
var $img=$("img");
console.log($img);
var width=$img.width();
console.log(width);
})
</script>
结果：成功获取到DOM元素，但未获取到宽度
结论：
原生JS入口函数会等到DOM元素和图片都加载完成之后再执行
JQuery入口函数会在DOM元素准备好后立即执行
2.2分别用两种写法编写多个入口函数：
2.2.1原生JS写法：
<script>
//原生js入口函数
window.onload=function(){
console.log("hello world!");
}
window.onload=function(){
console.log("hello world2222!");
}
// </script>结果
2.2.2JQuery写法：
<script>
//JQuery函数入口
$(function(){
console.log("hello world!");
})
$(function(){
console.log("hello world2222!")
})
</script>结果
结论：
如果使用原生JS写法编写多个入口函数，后面的会覆盖前面的
使用JQuery编写的多个入口函数则不会覆盖，而是全部执行
3.解决冲突问题
为了实现write less,do more,JQuery使用$符号来简化代码的编写
而在开发项目的过程中，我们经常会引入或自己编写其他js文件。如果这些js文件的命名空间也使用了$符号，就会产生冲突。
为了解决这个问题，JQuery实现了释放$使用权的方法：
<script>
//释放$使用权
jQuery.noConflict();
//第二种
jQuery(function(){
//JQuery代码...
})
</script>
如果你既想解决冲突问题，又想简化代码，那么你可以自定义一个访问符号：
<script>
//自定义访问符号 用s代替$
var s=jQuery.noConflict();
s(function(){
})
</script>
扫一扫
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
