什么是 jQuery ?

你可能听说过jQuery,它名字起得很土,但却是JavaScript世界中使用最广泛的一个库。
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示: 除此之外,Jquery还提供了大量的插件。

为什么使用 jQuery ?

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。
很多大公司都在使用 jQuery, 例如:
Google
Microsoft
IBM
Netflix

jQuery的作用:
1.写更少的代码,做更多的事
2.将我们页面的js代码和html页面代码分离

文档就绪事件
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){
 // 开始写 jQuery 代码…
 });

提示:简洁写法(与以上写法效果相同):

$(function(){
 // 开始写 jQuery 代码…
 });.

表单相关
针对表单元素,jQuery还有一组特殊的选择器:

:input:可以选择,,和;

:file:可以选择,和input[type=file]一样;

:checkbox:可以选择复选框,和input[type=checkbox]一样;

:radio:可以选择单选框,和input[type=radio]一样;

:focus:可以选择当前输入焦点的元素,例如把光标放到一个上,用$(‘input:focus’)就可以选出;

:checked:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如$(‘input[type=radio]:checked’);

:enabled:可以选择可以正常输入的、 等,也就是没有灰掉的输入;

:disabled:和:enabled正好相反,选择那些不能输入的。

元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有

元素:
$(“p”)

$(document).ready(function(){ $(“button”).click(function(){
 $(“p”).hide();
 });
 });

#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下:

$("#test")

$(document).ready(function(){ $(“button”).click(function(){
 $("#test").hide();
 });
 });

.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:
$(".test")

$(document).ready(function(){
 $(“button”).click(function(){
 $(".test").hide();
 });
 });

什么是事件?
页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例:

在元素上移动鼠标。
选取单选按钮
点击元素
在事件中经常使用术语"触发"(或"激发")例如: “当您按下按键时触发 keypress 事件”。

常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。

click()
click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中,当点击事件在某个

元素上触发时,隐藏当前的

元素:

实例

$(“p”).click(function(){
 $(this).hide();
 });

dblclick()
当双击元素时,会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数:

实例

$(“p”).dblclick(function(){
 $(this).hide();
 });

mouseenter()
当鼠标指针穿过元素时,会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:

实例

$("#p1").mouseenter(function(){
 alert(‘您的鼠标移到了 id=“p1” 的元素上!’);
 });

mouseleave()
当鼠标指针离开元素时,会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数:

实例

$("#p1").mouseleave(function(){
 alert(“再见,您的鼠标离开了该段落。”);
 });

mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:

实例

$("#p1").mousedown(function(){
 alert(“鼠标在该段落上按下!”);
 });

mouseup()
当在元素上松开鼠标按钮时,会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数:

实例

$("#p1").mouseup(function(){
 alert(“鼠标在段落上松开。”);
 });

hover()
hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。

实例

$("#p1").hover(
 function(){
 alert(“你进入了 p1!”);
 },
 function(){
 alert(“拜拜! 现在你离开了 p1!”);
 } );

focus()
当元素获得焦点时,发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。

focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数:

实例

$(“input”).focus(function(){
 $(this).css(“background-color”,"#cccccc");
 });

blur()
当元素失去焦点时,发生 blur 事件。

blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数:

实例

$(“input”).blur(function(){
 $(this).css(“background-color”,"#ffffff");
 });