什么是 jQuery ？
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示： 除此之外，Jquery还提供了大量的插件。
jQuery 版本 2 以上不支持 IE6，7，8 浏览器。
如果需要支持 IE6/7/8，那么请选择1.9
可以通过条件注释在使用 IE6/7/8 时只包含进1.9。
<!--[if lt IE 9]> <script src="jquery-1.9.0.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <!--<![endif]-->
网页中添加 jQuery
有两个版本的 jQuery 可供下载：（从 jquery.com 下载 jQuery 库）
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
<head> <script src="jquery-1.10.2.min.js"></script> </head>
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。
例：百度 CDN:
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() // 隐藏当前元素
$("p").hide() // 隐藏所有 <p> 元素
$("p.test").hide() // 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() // 隐藏所有 id="test" 的元素
所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){ // 开始写 jQuery 代码... });
提示：简洁写法（与以上写法效果相同）:
$(function(){ // 开始写 jQuery 代码... });
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
（1） 元素选择器——基于元素名选取元素
例：用户点击按钮后，所有 <p> 元素都隐藏：
$(document).ready(function(){ $("buttom").click(function(){ $("p").hide(); }); })
（2） #id 选择器——通过 HTML 元素的 id 属性选取指定的元素( id 是唯一的)
例：用户点击按钮后所有带有 id="test" 属性的元素都隐藏：
$(document).ready(function(){ $("buttom").click(function(){ $("#test").hide(); }); })
（3） #id 选择器——通过 HTML 元素的class属性选取指定的一或多个元素(class可以多个)
例：用户点击按钮后所有带有 class="test" 属性的元素都隐藏：
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
| $("*") $(this) $("p.intro") $("p:first") $("ul li:first") $("ul li:first-child") $("[href]") $("a[target='_blank']") $("a[target!='_blank']") $(":button") $("tr:even") $("tr:odd") |
选取所有元素 |
独立文件中使用 jQuery 函数
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
常见 DOM 事件：
鼠标事件：click单击dblclick双击mouseenter鼠标指针穿过元素mouseleave鼠标指针离开元素
键盘事件：keypresskeydownkeyup
表单事件：submitchangefocus元素获得焦点lur元素失去焦点
文档窗口事件：load
esizescrollunload
jQuery 事件方法语法
1.页面中指定一个点击事件：$("p").click();
2.下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){
// 动作触发后执行的代码!!
});
常用的 jQuery 事件方法
（1）$(document).ready()：允许我们在文档完全加载完后执行函数
（2）click()：当按钮点击事件被触发时会调用一个函数
例：当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
<script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script>
（3）dblclick()：当双击元素时，会发生 dblclick 事件
例：当双击某个 <p> 元素时，触发事件，隐藏当前的 <p> 元素：
$(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); });
（4）mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件
例：鼠标移到了 id="p1" 的元素上，会看到弹窗“提示：您的鼠标移到了 id="p1" 的元素上!”
$(document).ready(function(){ $("#p1").mouseenter(function(){ alert('提示：您的鼠标移到了 id="p1" 的元素上!'); }); });
（5）mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件
例：鼠标离开 id="p1" 的元素，会看到弹窗“提示：再见，您的鼠标离开了该段落。”
$(document).ready(function(){ $("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); }); });
（6）mousedown()：当鼠标移动到元素上方，并按下鼠标按键时，会发生mousedown事件
例：当鼠标在 id="p1" 的元素上并按下鼠标按键时，会看到弹窗“提示：鼠标在段落上按下。”
$(document).ready(function(){ $("#p1").mousedown(function(){ alert("鼠标在段落上按下。"); }); });
（7）mouseup()：当在元素上松开鼠标按钮时，会发生mouseup事件
例：在 id="p1" 的元素上松开鼠标按钮时，会看到弹窗“提示：鼠标在段落上松开。”
$(document).ready(function(){ $("#p1").mouseup(function(){ alert("鼠标在段落上松开。"); }); });
（8）hover()：用于模拟光标悬停事件
例：当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);
当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave);
$(document).ready(function(){ $("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } ) });
（9）focus()：当元素获得焦点时，发生 focus 事件。blur()：当元素失去焦点时，发生 blur 事件。
注：当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
$(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); });
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">