HTML学习笔记（7）
一、什么是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 事件 | 菜鸟教程
