本章内容
- 选择器
- 事件
- 效果
前言
jQuery是一个兼容多浏览器的JavaScript函数库。
jQuery是一个轻量级的“写的少，做的多”的JavaScript库，是免费、开源的。
一、选择器
jQuery选择器允许对HTML元素组或单个元素进行操作。说到选择器就得说说上一章的DOM了，因为呢，jQuery对象就是通过jQuery包装DOM对象产生的对象，它是jQuery独有的。所以看到选择器你会觉得似曾相识。jQuery对象是以$开头的。
1 1.基本选择器
2
3 $("#id") //ID选择器
4 $("div") //元素选择器
5 $(".classname") //类选择器
6 $(".classname,.classname1,#id1") //组合选择器
7
8 2.层次选择器
9
10 $("#id>.classname ") //子元素选择器
11 $("#id .classname ") //后代元素选择器
12 $("#id + .classname ") //紧邻下一个元素选择器
13 $("#id ~ .classname ") //兄弟元素选择器
14
15 3.过滤选择器
16
17 //标签过滤选择器
18 $("li:first") //第一个li
19 $("li:last") //最后一个li
20 $("li:even") //挑选下标为偶数的li
21 $("li:odd") //挑选下标为奇数的li
22 $("li:eq(4)") //下标等于4的li
23 $("li:gt(2)") //下标大于2的li
24 $("li:lt(2)") //下标小于2的li
25 $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
26
27 //内容过滤选择器
28 $("div:contains('Runob')") // 包含 Runob文本的元素
29 $("td:empty") //不包含子元素或者文本的空元素
30 $("div:has(selector)") //含有选择器所匹配的元素
31 $("td:parent") //含有子元素或者文本的元素
32
33 //可见性过滤选择器
34 $("li:hidden") //匹配所有不可见元素，或type为hidden的元素
35 $("li:visible") //匹配所有可见元素
36
37 //属性过滤选择器
38 $("div[id]") //所有含有 id 属性的 div 元素
39 $("div[id='123']") // id属性值为123的div 元素
40 $("div[id!='123']") // id属性值不等于123的div 元素
41 $("div[id^='qq']") // id属性值以qq开头的div 元素
42 $("div[id$='zz']") // id属性值以zz结尾的div 元素
43 $("div[id*='bb']") // id属性值包含bb的div 元素
44 $("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
45
46 //状态过滤选择器
47 $("input:enabled") // 匹配可用的 input
48 $("input:disabled") // 匹配不可用的 input
49 $("input:checked") // 匹配选中的 input
50 $("option:selected") // 匹配选中的 option
51
52 4.表单选择器
53 $(":input") //匹配所有 input, textarea, select 和 button 元素
54 $(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
55 $(":password") //所有密码框
56 $(":radio") //所有单选按钮
57 $(":checkbox") //所有复选框
58 $(":submit") //所有提交按钮
59 $(":reset") //所有重置按钮
60 $(":button") //所有button按钮
61 $(":file") //所有文件域
更多jQuery选择器 -->
二、事件
页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML中发生某些事件时调用的方法。在事件中经常用术语“触发”，就像在页面上点击了一个按钮，则就会触发这个按钮去执行操作。
常用的jQuery事件方法：
实例就直接看代码了：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jquery</title>
6 </head>
7 <body>
8 <div style="background-color: aquamarine">不好意思，让我占个第一行</div>
9 <p>我是p标签</p>
10 <b>我是b标签</b>
11 <h1>我是h1标签</h1>
12 <h2>我是h2标签</h2>
13 <div id="p1" style="color:olivedrab;">我的id是p1</div>
14 <div>--------我是切割线--------</div>
15 <div id="p2" style="color:olivedrab;">我的id是p2</div>
16 <div>--------我是切割线--------</div>
17 <div id="p3" style="color:olivedrab;">我的id是p3</div>
18 <div>--------我是切割线--------</div>
19 <input type="text" id="p4">
20 <input type="text" id="p5">
21 <script src="jquery-1.12.4.js"></script>
22 <script>
23 //允许我们在文档加载完成后执行函数
24 $(document).ready(function () {
25 //鼠标点击，触发click事件
26 $("p").click(function () {
27 $(this).hide()
28 });
29 //鼠标双击，触发dblclick事件
30 $("b").dblclick(function () {
31 $(this).hide()
32 });
33 //鼠标指针穿过元素时，触发mouseenter事件
34 $("#p1").mouseenter(function () {
35 alert("你的鼠标移到这里啦。")
36 });
37 //鼠标指针离开元素时，触发mouseleave事件
38 $("#p2").mouseleave(function () {
39 alert("再见，你的鼠标离开这里啦。")
40 });
41 //鼠标指针移动到元素上方并点击鼠标，触发mousedown事件
42 $("h2").mousedown(function () {
43 alert("鼠标在该段落上按下！")
44 });
45 //鼠标指针移动到元素上方并松开鼠标，触发mouseup事件
46 $("h1").mouseup(function () {
47 alert("鼠标在段落上松开！")
48 });
49 //鼠标移动到元素上时，触发指定的第一个函数（mouseenter），离开触发指定的第二个函数（mouseleave）
50 $("#p3").hover(
51 function () {
52 alert("你进入了p3");
53 },
54 function () {
55 alert("再见，你离开了p3")
56 }
57 );
58 //元素获得焦点，触发focus事件
59 //当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
60 $("#p4").focus(function () {
61 $("#p4").css("background-color", "#cccccc");
62 });
63 //元素失去焦点，触发blur事件
64 //当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
65 $("#p5").blur(function () {
66 $("#p5").css("background-color", "#cccccc");
67 });
68 });
69 </script>
70 </body>
71 </html>
三、效果
1、隐藏和显示
1.hide()和show()
1 $("#hide").click(function(){
2 $("p").hide();
3 });
4
5 $("#show").click(function(){
6 $("p").show();
7 });
功能：用来隐藏和显示HTML元素
语法：$(selector).hide(speed,callback); 在这里speed参数可以规定隐藏的速度，并且可以取下值：“slow”、“fast”或毫秒，callback则是隐藏完成后执行的函数名称。show同样是这样的。
2.toggle()
1 $("button").click(function(){
2 $("p").toggle();
3 });
功能：显示被隐藏的元素，并隐藏已显示的元素；比如我们实现一个反选功能，用toggle就相当的方便了。
语法：$(selector).toggle(speed,callback); 可选的两个参数为speed、callback同上。
2、淡入和淡出
jQuery Fading方法有
1.fadeIn()
1 $("button").click(function(){
2 $("#div1").fadeIn();
3 $("#div2").fadeIn("slow");
4 $("#div3").fadeIn(3000);
5 });
功能：用于淡入（显示）已隐藏的元素。
语法：$(selector).fadeIn(speed,callback); 可选的两个参数为speed、callback同上。
2.fadeOut()
1 $("button").click(function(){
2 $("#div1").fadeOut();
3 $("#div2").fadeOut("slow");
4 $("#div3").fadeOut(3000);
5 });
功能：用于淡出（隐藏）可见元素。
语法：$(selector).fadeOut(speed,callback); 可选的两个参数为speed、callback同上。
3.fadeToggle()
1 $("button").click(function(){
2 $("#div1").fadeToggle();
3 $("#div2").fadeToggle("slow");
4 $("#div3").fadeToggle(3000);
5 });
功能：在 fadeIn() 与 fadeOut() 方法之间进行切换。
语法：$(selector).fadeToggle(speed,callback); 可选的两个参数为speed、callback同上。
4.fandeTo()
功能：允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：$(selector).fadeTo(speed,opacity,callback); 可选参数opacity的值介于0与1之间，speed、callback同上。
3、滑动
可以在元素上创建滑动效果
1.slideDown()
1 $("#flip").click(function(){
2 $("#panel").slideDown();
3 });
功能：用于向下滑动元素。
语法：$(selector).slideDown(speed,callback); 可选参数同上。
2.slideUp()
1 $("#flip").click(function(){
2 $("#panel").slideUp();
3 });
功能：用于向上滑动元素。
语法：$(selector).slideUp(speed,callback); 可选参数同上。
3.slideToggle()
1 $("#flip").click(function(){
2 $("#panel").slideToggle();
3 });
功能：在 slideDown() 与 slideUp() 方法之间进行切换。
语法：$(selector).slideToggle(speed,callback); 可选参数同上。
4、动画
用于创建自定义动画
语法：$(selector).animate({params),speed,callback); 必需的 params 参数定义形成动画的 CSS 属性，可选参数speed、callback同上。
实例：
把元素往右边移动250像素：
1 $("button").click(function(){
2 $("div").animate({left:'250px'});
3 });
操作多个属性
1 $("button").click(function(){
2 $("div").animate({
3 left:'250px',
4 opacity:'0.5',
5 height:'150px',
6 '150px'
7 });
8 });
使用相对值
1 $("button").click(function(){
2 $("div").animate({
3 left:'250px',
4 height:'+=150px',
5 '+=150px'
6 });
7 });
使用预定义的值
1 $("button").click(function(){
2 $("div").animate({
3 height:'toggle'
4 });
5 });
使用队列功能
1 $("button").click(function(){
2 var div=$("div");
3 div.animate({height:'300px',opacity:'0.4'},"slow");
4 div.animate({'300px',opacity:'0.8'},"slow");
5 div.animate({height:'100px',opacity:'0.4'},"slow");
6 div.animate({'100px',opacity:'0.8'},"slow");
7 });
5、停止动画
stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
6 </script>
7 <script>
8 $(document).ready(function(){
9 $("#flip").click(function(){
10 $("#panel").slideDown(5000);
11 });
12 $("#stop").click(function(){
13 $("#panel").stop();
14 });
15 });
16 </script>
17
18 <style type="text/css">
19 #panel,#flip
20 {
21 padding:5px;
22 text-align:center;
23 background-color:#e5eecc;
24 border:solid 1px #c3c3c3;
25 }
26 #panel
27 {
28 padding:50px;
29 display:none;
30 }
31 </style>
32 </head>
33 <body>
34
35 <button id="stop">停止滑动</button>
36 <div id="flip">点我向下滑动面板</div>
37 <div id="panel">Hello world!</div>
38
39 </body>
40 </html>
语法：$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
6、Callback
对于callback问题，即实例效果完全实现后回调函数
以下实例在隐藏效果完全实现后回调函数：
1 $("button").click(function(){
2 $("p").hide("slow",function(){
3 alert("段落现在被隐藏了");
4 });
5 });
以下实例没有回调函数，警告框会隐藏效果完成前弹出：
1 $("button").click(function(){
2 $("p").hide(1000);
3 alert("段落现在被隐藏了");
4 });
7、链
到现在为止，我们都是一次写一条jQuery语句，功能一个一个的定义。但是呢，有一种名为链接的技术，允许我们在相同的元素上运行多条jQuery命令，一条接着另一条，这样的话，浏览器就不必多次查找相同的元素。看以下实例：
1 $("#p1").css("color","red").slideUp(2000).slideDown(2000);
根据需要来选择用那种方式。jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。因为jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jquery</title>
6 <style>
7 #panel,#down,#up,#slidetoggle
8 {
9 padding:5px;
10 text-align:center;
11 background-color:#e5eecc;
12 border:solid 1px #c3c3c3;
13 }
14 #panel
15 {
16 padding:50px;
17 display:none;
18 }
19 </style>
20 </head>
21 <body>
22 //隐藏/显示
23 //默认隐藏可以display来进行
24 <h1 id="hide" style="color:red;">我是hide</h1>
25 <p>-------我是切割线-------</p>
26 <h1 id="show" style="color:blue;">我是show</h1>
27 <p>-------我是切割线-------</p>
28 <h1 id="toggle" style="color:blue;">我是toggle</h1>
29 <button id="button1">出来吧div</button>
30 //淡入淡出
31 <div id="div1" style="80px;height:80px;display:none;background-color:red;"></div><br>
32 <div id="div2" style="80px;height:80px;display:none;background-color:green;"></div><br>
33 <div id="div3" style="80px;height:80px;display:none;background-color:blue;"></div><br>
34 <button id="button2">消失吧div</button>
35 <div id="div4" style="80px;height:80px;display:none;background-color:red;"></div><br>
36 <div id="div5" style="80px;height:80px;background-color:green;"></div><br>
37 <div id="div6" style="80px;height:80px;display:none;background-color:blue;"></div><br>
38 <button id="button3">该出来的不出来，不该出来的给我出来</button>
39 <div id="div7" style="80px;height:80px;background-color:green;"></div><br>
40 <button id="button4">透明吧，老铁</button>
41 //滑动
42 <div id="down">点我滑下面板</div>
43 <div id="panel">Hello world!</div>
44 <div id="up">点我拉起面板</div>
45 <div id="slidetoggle">点我拉起或滑下面板</div>
46 //动画
47 //默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
48 //如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
49 <div id="animate1" style="background:#98bf21;height:100px;100px;position:absolute;"></div>
50 <button id="button5">开始第一个动画</button>
51 <button id="button6">开始第二个动画</button>
52 <button id="button7">开始第三个动画</button>
53 <button id="button8">开始第四个动画</button>
54 <button id="button9">开始第五个动画</button>
55 <script src="jquery-1.12.4.js"></script>
56 <script>
57
58 //隐藏/显示
59 //hide()隐藏
60 $("#hide").click(function(){
61 $("#hide").hide();
62 });
63 //show()显示
64 $("#show").click(function(){
65 $("#show").show();
66 });
67 //toggle()显示被隐藏的元素，并隐藏已显示的元素
68 $("#i1").click(function (){
69 $("#i1").toggle();
70 });
71 //淡入淡出
72 //fadeIn()淡入已隐藏的元素
73 $("#button1").click(function () {
74 $("#div1").fadeIn();
75 $("#div2").fadeIn("slow");
76 $("#div3").fadeIn(3000);
77 });
78 //fadeOut()淡出可见元素
79 $("#button2").click(function () {
80 $("#div1").fadeOut();
81 $("#div2").fadeOut("slow");
82 $("#div3").fadeOut(3000);
83 });
84 //如果元素已淡出，fadeToggle()会向元素添加淡入效果
85 //如果元素已淡入，fadeToggle()会向元素添加淡出效果
86 $("#button3").click(function () {
87 $("#div4").fadeToggle();
88 $("#div5").fadeToggle("slow");
89 $("#div6").fadeToggle(3000);
90 });
91 //fadeTo()允许渐变为给定的不透明度(值介于0与1之间)
92 $("#button4").click(function(){
93 $("#div7").fadeTo("slow",0.15);
94 });
95 //滑动
96 //slideDown()用于向下滑动元素
97 $("#down").click(function(){
98 $("#panel").slideDown("slow");
99 });
100 //slideDown()用于向上滑动元素
101 $("#up").click(function(){
102 $("#panel").slideUp("slow");
103 });
104 //slideToggle()用于在 slideDown() 与 slideUp() 方法之间进行切换
105 $("#slidetoggle").click(function(){
106 $("#panel").slideToggle("slow");
107 });
108 //动画 animate()方法
109 //把元素向右移动250px
110 $("#button5").click(function(){
111 $("#animate1").animate({left:'250px'});
112 });
113 //操作多个属性
114 $("#button6").click(function(){
115 $("#animate1").animate({
116 left:'250px',
117 opacity:'0.5',
118 height:'200px',
119 '200px'
120 });
121 });
122 //使用相对值，需要在值前面加+=或-=
123 $("#button7").click(function(){
124 $("#animate1").animate({
125 left:'250px',
126 height:'+=150px',
127 '+=150px'
128 });
129 });
130 //使用预定义的值
131 $("#button8").click(function(){
132 $("#animate1").animate({
133 height:'toggle'
134 });
135 });
136 //使用队列功能
137 $("#button9").click(function(){
138 var div=$("#animate1");
139 div.animate({height:'300px',opacity:'0.4'},"slow");
140 div.animate({'300px',opacity:'0.8'},"slow");
141 div.animate({height:'100px',opacity:'0.4'},"slow");
142 div.animate({'100px',opacity:'0.8'},"slow");
143 });
144 </script>
145 </body>
146 </html>
本章笔记还不完整，待更新。
注：本文仅为学习笔记、摘要。
详细来源http://www.runoob.com/jquery/jquery-tutorial.html