目录
jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库,是JavaScript的一个框架
它就是把JavaScript的代码封装好了，导入调用即可使用
https://www.jb51.net/zt/jquerydown.htm
https://www.jb51.net/zt/jquerydown.htm
下载注意事项
- 1.x版本：兼容IE8以下（用的最多的）
- 2.x版本：不兼容IE8以下
- 3.x版本：不兼容IE8以下
可以看到， jquery-1.10.2.min.js 的文件大小只有91KB，这是里面的代码没有任何的格式，都堆积在一起，没有空格；而jquery-1.10.2.js 文件的大小虽然比较大些，但是它的代码逻辑都是比较清楚的，格式比较规范。
但是两个文件都可以使用，喜欢用体积大的或者体积小的就看个人习惯~
基础语法：$(selector).action()
- $符号代表定义jQuery
- 选择符(selector)"查询"和“查找”HTML元素
- jQuery的action()执行对元素的操作
使用时所有jQuery函数位于document ready函数中
$(document).ready(function(){ // 开始写 jQuery 代码... });
$(function(){
// 开始写 jQuery 代码...
});
//JavaScript
window.onload = function () {
//网页资源（dom结构，图片）都加载完之后才会执行这个里面的代码
//在一个页面中只能写一次，后面的会把前面的内容覆盖掉
}
//jQuery
$(function () {
//只用加载dom结构就会执行这个里面的代码
//里面可以有多个
}) 
- $(this).hide()--隐藏当前元素
- $("p").hide()--隐藏所有元素
- $(".test").hide()--隐藏所有class="test"的元素
- $("#test").hide()--隐藏,id="test"的元素
代码演示 ：
通过引入js文件，然后通过 $("div").hide() 隐藏div元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("div").hide();
})
</script>
</head>
<body>
<div>
这是div
</div>
</body>
</html>jQuery中分有三种选择器，分别为：
- 元素选择器
- id选择器
- class选择器
下面通过代码演示，分别对这三种选择器展开深入的了解
通过元素选择器实现鼠标点击后，隐藏内容的功能
这就像是一个函数嵌套，当代码运行时，会等到其他元素加载完之后才会执行 $(function () {}) 内的代码，然后等鼠标点击按钮时（也就是执行了点击事件：$('input').click(function () {})），会运行到 $('p').hide(); 然后隐藏p标签的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.2.min.js"></script>
<script>
//加载
$(function () {
//通过元素选择器
//找到input标签，click为点击事件
$('input').click(function () {
$('p').hide();
})
})
</script>
</head>
<body>
<input type="button" value="点我隐藏">
<p>
这是内容
</p>
</body>
</html>id选择器的使用方法同元素选择器相同，只不过将$('p').hide();中的p换成一个id，比如：$('#div1').hide(); （#号表示获取的是id，#后的内容就是id的值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.2.min.js"></script>
<script>
//加载
$(function () {
//通过id选择器
//找到input标签，click为点击事件
$('input').click(function () {
$('#div1').hide();
})
})
</script>
</head>
<body>
<input type="button" value="点我隐藏">
<p id="div1">
这是内容
</p>
</body>
</html>id选择器的使用方法同元素选择器相同，只不过将$('p').hide();中的p换成一个class，比如：$('.class').hide(); （. 表示获取的是class，. 后的内容就是class的值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.2.min.js"></script>
<script>
//加载
$(function () {
//通过id选择器
//找到input标签，click为点击事件
$('input').click(function () {
$('.cla1').hide();
})
})
</script>
</head>
<body>
<input type="button" value="点我隐藏">
<p class="cla1">
这是内容
</p>
</body>
</html>