- JavaScript和jQuery之间的入口函数有一些区别
- JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。
- JQuery入口函数是在所有标签加载完之后，就会去执行。
加载模式
- 原生JS和jQuery入口函数的加载模式不同
- 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
- jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
代码举例：
<!DOCTYPE>
<html lang="en">
<head>
<meta="UTF-8">
<title>JS和jQuery的区别</title>
<script src = "js/jquery-1.12.4.js">
<script>
//原生JS
window.onload = function(ev){
//1.通过原生的JS入口函数可以拿到DOM元素
var img = document.getElementByTagName("img")[0];
console.log(img); //输出 img 路径
//2.通过原生的JS入口函数可以拿到DOM元素的宽高
var width = window.getComputedStyle(img).width; //输出 img 宽度（px）
}
//jQuery
$(document).ready(function(){
//1.通过jQuery入口函数也可以拿到DOM元素
var $img = $("img")[0];
console.log($img); //输出 img 路径
//2.通过jQuery入口函数拿不到DOM元素的宽高
var $width = $img.width;
console,log($width); // 输出 0
});
</script>
</head>
<body>
<img src="/img/image.jpg">
</body>
函数覆盖问题
- 原生JS如果编写了多个入口函数，后面编写的入口函数会覆盖前面的
- jQuery中编写多个入口函数，后面的不会覆盖前面的
代码举例：
<!DOCTYPE>
<html lang="en">
<head>
<meta="UTF-8">
<script src = "js/jquery-1.12.4.js">
<script>
//JS
window.onload = function(ev){
alert("hello oneJS");
}
window.onload = function(){
alert("hello twoJS");
}
//输出结果：弹出 hello twoJS
//jQuery
$(document).ready(function(){
alert("jQuery1");
});
$(document).ready(function(){
alert("jQuery2");
});
//输出结果为：先弹出 jQuery1 ，然后弹出 jQuery2
</script>
</head>
<body>
<img src="img/image">
</body>
jQuery入口函数的几种写法
- 常用的是下面的第三种写法，因为最简短
//1.第一种写法
$(document).ready(function(){
console.log("111");
})
//2.第二种写法
jQuery(document).ready(function(){
console.log("222");
})
//3.第三种写法(推荐写法)
$(function(){
console.log("333");
})
//4.第四种写法
jQuery(function(){
console.log("444");
})
jQuery冲突问题
- 比如其他框架也使用了 $ 符号，后引入的 script 文件会覆盖掉先引入的文件下的 $ 符号
//1.释放 $ 的使用权
//注意点：释放操作必须在编写其他jQuery代码之前编写
// 释放之后引用jQuery代码不能再使用 $ 符号，改为使用jQuery
jQuery.noConflict(); // 释放 $ 的使用权
$(function(){
console.log("其它框架");
})
jQuery(function(){
console.log("jQuery框架");
})
// 2.自定义访问 jQuery 的符号
var nj = jQuery.noConflict();
nj(function(){
console.log("自定义访问 jQuery 符号");
})
jQuery核心函数
// $(); 就代表jQuery的核心函数
//1.接收一个函数
$(function(){
console.log("函数");
})
//2.接收一个字符串
//2.1 接收一个字符串选择器
//返回一个jQuery对象，对象中保存了找到的DOM元素
var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1); // <div class=".box1"></div>
console.log("$box2");// <div id="box2"></div>
//2.2接受一个字符串代码片段
//返回一个jQuery对象，对象中保存了创建的DOM元素
var $p = $("<p>我是段落</p>");
console.log($p); //<p>我是段落</p>
$box1.append($p); //将创建的段落添加到DOM中
//3.接收一个DOM元素
//会被包装成一个jQuery对象返回给我们
var span = document.getElementByTagName("span");
console.log(); //<span></span>
var $span = $(span);
console.log($span);
网友评论