第一节 jQuery概述
1.1 jQuery简介
jQuery是一个快速、简洁的JavaScript库,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“Write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
目前jQuery有三个大版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
2.x:2013年2.0版本发布,不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
1.X大版本下,细分版本非常多,各个版本的函数都会有一定的差异。网上看到的很多教程大多是1.x版本的。jquery官方手册
参考文档jQuery中文网、菜鸟教程
1.2 什么是jQuery
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
1.3 为什么要用jQuery
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。
很多大公司都在使用 jQuery, 例如:
- Microsoft
- IBM
- Netflix
第二节 jQuery安装
2.1 网页中添加 jQuery
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:
-
(1)从 jquery.com 下载 jQuery 最新版本,或从GitHub下载其他版本,下载以后,在web目录下新建js文件夹,然后将两个文件【jquery-1.12.4.js】和【jquery-1.12.4.min.js】导入即可
-
(2)从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
有两个版本的 jQuery 可供下载:
-
Production version - 用于实际的网站中,已被精简和压缩。
-
Development version - 用于测试和开发(未压缩,是可读的代码)
以上两个版本都可以从 jquery.com 中下载。
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
当然你也可以使用其它网站的CDN:
2.2 百度 CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
2.3 新浪 CDN
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
2.4 Google CDN
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
2.5 Microsoft CDN
<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>
第三节 jQuery语法
jQuery 语法是通过$()核心函数选取 HTML 元素,并对选取的元素执行某些操作。
使用语法1 : $(selector).action()
-
美元符号定义 jQuery==$
-
选择符(selector)“查询"和"查找” HTML 元素
-
jQuery 的 action() 执行对元素的操作
举例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
使用语法2: $(匿名函数)
表示页面dom加载完毕,就执行,比onload事件要早,并且可以写多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入门</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body onload="doload()">
<h1>赠汪伦</h1>
<p>李白乘舟将欲行</p>
<p>忽闻岸上踏歌声</p>
<script type="text/javascript">
function doload(){
alert("onload"); //最后才输出打印
}
/*jquery语法*/
/*语法1*/
$("p").hide();
/*语法2*/
$(function () {
// document.write("hello jQuery!")
alert("hello jQuery");
});
$(function () {
alert("hello jQuery2");
})
$(document).ready(function () {
alert("hello jQuery3");
});
</script>
</body>
</html>
3.1 jQuery选择器
3.1.1 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<h1 id="poemtitle">赠汪伦</h1>
<p>李白乘舟将欲行</p>
<p>忽闻岸上踏歌声</p>
<p class="class2">桃花潭水深千尺</p>
<p class="class2">不及汪伦送我情</p>
<input type="button" onclick="click1()" value="标签选择器">
<input type="button" onclick="click2()" value="id选择器">
<input type="button" onclick="click3()" value="clss选择器">
<script type="text/javascript">
//标签元素选取
function click1() {
$("p").hide();
}
//通过id选取
function click2() {
$("#poemtitle").css("background-color","skyblue");
}
//通过类选取
function click3() {
$(".class2").css("color","blue");
}
</script>
</body>
</html>
属性选择器 input[type] input[type=‘text’]
结构伪类选择 a:link a:hover
层次选择器 空格—— 后代 > 子代
3.2 jQuery事件
3.2.1 什么是事件?
页面访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
-
在元素上移动鼠标。
-
选取单选按钮
-
点击元素
常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseover | keyup | focus | scroll |
mouseout | blur | unload |
3.2.2 jQuery 事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
$("p").click();
下一步是定义触发事件。您可以通过一个事件函数实现:
$("p").click(function(){
// 动作触发后执行的代码!!
});
也就是说,不传参数是点击,传参数是设置事件。
click()
当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中,当点击事件在某个
元素上触发时,隐藏当前的
元素:
$("p").click(function(){
$(this).hide();
});
dblclick()
当双击元素时,会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数:
$("p").dblclick(function(){
$(this).hide();
});
mouseover()
当鼠标指针穿过元素时,会发生 mouseover 事件。
mouseover() 方法触发 mouseover 事件,或规定当发生 mouseover 事件时运行的函数:
$("#p1").mouseover(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
mouseout()
当鼠标指针离开元素时,会发生 mouseout 事件。
mouseout() 方法触发 mouseout 事件,或规定当发生 mouseout 事件时运行的函数:
$("#p1").mouseout(function(){
alert("再见,您的鼠标离开了该段落。");
});
mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下!");
});
mouseup()
当在元素上松开鼠标按钮时,会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数:
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时,会触发指定的第一个函数(mouseover);当鼠标移出这个元素时,会触发指定的第二个函数(mouseout)。
$("#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");
});
3.2.3 案例——鼠标经过表格变色
该案例体现了jQuery的一大特点——(1)链式编程 链式调用,(2)隐式迭代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的鼠标经过变色</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
..表格省略
<script type="text/javascript">
//(1)链式编程 链式调用,(2)隐式迭代
// $("#tab1 tr").mouseover(function () {
// $(this).css("background-color","skyblue");
// }).mouseout(function () {
// $(this).css("background-color","white");
// });
//hover中有两个属性,一个是mouseover,一个是mouseout,这里可以将两个函数都写进去
$("#tab1 tr").hover(function () {
$(this).css("background-color","skyblue");
},function () {
$(this).css("background-color","white");
});
</script>
</body>
</html>
第四节 jQuery 效果
4.1 隐藏显示
hide()
您可以使用 hide() 将元素隐藏
$("#hide").click(function(){
$("p").hide();
});
show()
您可以使用show()将元素显示
$("#show").click(function(){
$("p").show();
});
toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
$("button").click(function(){
$("p").toggle();
});
事实上,这三种方法都是有两个参数的:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback