1.x:兼容ie678,但相对其它版本文件较大,官方只做BUG维护,功能不再新增,最终版本:1.12.4 (2016年5月20日).
2.x:不兼容ie678,相对1.x文件较小,官方只做BUG维护,功能不再新增,最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器,很多老的jQuery插件不支持这个版本,相对1.x文件较小,提供不包含Ajax/动画API版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(document).ready(function () {
alert('hello tzk')
})
</script>
</head>
<body>
</body>
</html>
window.onload = function () {
// 1. 通过原生的js入口函数可以拿到DOM元素
var img = document.getElementsByTagName('img')[0]
console.log(img)
// 2. 通过原生的JS入口函数可以拿到DOM元素的宽高
var width = window.getComputedStyle(img).width
console.log('onload: ', width)
}
$(document).ready(function () {
// 1. 通过JQuery入口函数可以拿到DOM元素
var $img = $('img')
console.log($img)
// 2. 通过JQuery入口函数可以拿到DOM元素的宽高
var $width = $img.width()
console.log('ready: ', $width)
})
window.onload = function () {
alert('hello tzk1')
}
window.onload = function () {
alert('hello tzk2')
}
只会弹出 hello tzk2
$(document).ready(function () {
alert('hello tzk1')
});
$(document).ready(function () {
alert('hello tzk2')
});
hello tzk1 与 hello tzk2 都会弹出。
// 1. 第一种写法
$(document).ready(function () {
alert('hello tzk')
});
// 第二种写法
jQuery(document).ready(function () {
alert('hello tzk')
});
// 第三种写法(推荐)
$(function () {
alert('hello tzk')
})
// 第四种写法
jQuery(function () {
alert('hello tzk')
})
jQuery的四种写法中,推荐使用第三种写法。
$
符号jQuery.noConflict()
jQuery(function () {
alert('hello tzk')
})
JQuery
代码之前编写$
, 改为使用 jQuery
var nj = jQuery.noConflict()
nj(function () {
alert('hello tzk')
})