一、什么是jQuery
jQuery 是一个 JavaScript 库。他实现了JavaScript的一些功能，并封装起来，对外提供接口。
例子实现一个点击消失的功能，用JavaScript实现
<!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>
window.onload = function(){
var p_list = document.getElementsByTagName("p")
for(var i = 0; i < p_list.length; i ++ )
{
p_list[i].onclick = function(){
this.style.display = "none"
}
}
}
</script>
</head>
<body>
<p>点击消失1</p>
<p>点击消失2</p>
<p>点击消失3</p>
</body>
</html>利用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.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){ // 等价 window.onload
$("p").click(function(){ // 对所有的p标签绑定点击事件
$(this).hide(); // 隐藏
});
});
</script>
</head>
<body>
<p>点击消失1</p>
<p>点击消失2</p>
<p>点击消失3</p>
</body>
</html>二、jQuery的语法
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素
$(function(){
// 开始写 jQuery 代码...
});
$(document).ready(function(){
// 开始写 jQuery 代码...
});三、jQuery的事件
这里主要介绍javascript中没有的hover
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
传入两个参数，参考jQuery 事件 | 菜鸟教程
