一、初识jQuery
版本选择
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版本。
jQuery的使用
- 下载jQuery或者使用cdn
- 引入jQuery的文件
- 编写代码
<!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>jQuery和JS的加载模式
- 通过原生JS和jQuery都可以拿到DOM元素，及图片的宽高
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)
})
- 原生的JS如果编写了多个入口函数，后面编写的会覆盖原来的。而jQuery不会覆盖
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 都会弹出。
jQuery入口函数的其他写法
// 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的冲突问题
- 释放释放
$符号
jQuery.noConflict()
jQuery(function () {
alert('hello tzk')
})- 释放操作必须在编写其他
JQuery代码之前编写 - 释放之后就不能在使用
$, 改为使用jQuery
- 自定义访问符号
- Javascript
var nj = jQuery.noConflict()
nj(function () {
alert('hello tzk')
})本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-06-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录