JQuery笔记
一、Jquery的简介
JQuery是javascript的升级版，优点是：写的少实现的多。
二、Jquery的使用
1、每个JQuery文件使用前都要导入jquery-1.7.2.js，添加语句<script type="text/javascript" src="jquery-1.7.2.js"></script>
2、开头都是$(function(){})（是$(document).ready(function(){})的简写）,代码写在{}里
二、Jquery对象
含义：jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象数组，本质是一个数组。
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variable = DOM 对象
三、Jquery对象和DOM对象的转换
jquery->dom： (1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
dom->jquery：用 $() 把 DOM 对象包装起来，即是一个jquery对象。
四、jQuery 基本选择器(最重要，最常用，是所有选择器基础)
有以下几种方式：
通过id属性值获得jquery对象：$("#id属性值")
通过class属性值获得jquery对象：$(".class属性值")
通过标签名获得jquery对象：$("标签名")
获得所有jquery对象：$("*")
综合多个选择器:$("#id属性值,.class属性值,标签名,....")
注意：id属性值在网页中不能相同（即不能重复），class属性值可以相同（允许重复使用）。
案例：BasicSelect 补充知识：jquery对象有一个方法.css("属性名","属性值")来修改css样式
jquery对象有一个方法.click()来触发点击事件
五、jquery的层次选择器
$("acestor grandson"):选取选择器acestor所有grandson选择器jquery对象
$("parent > child"):选取选择器parent的下一层级所有child选择器jquery对象
$("pre + next"):选取选择器pre同一层级后的下一个next选择器jquery对象,若对象并不相邻，此时无效。
$("pre ~ siblings"):选取选择器pre同一层级后的所有next选择器jquery对象
注意：(“prev ~ div”) 选择器只能选择 prev元素后面的同辈元素;
而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
案例：GradationSelect
补充知识：next([selector]):返回相邻第一个基本选择器jq对象,必须相邻。
nextAll([selector]):返回同一层级后面所有基本选择器jq对象
:first返回第一个匹配的DOM元素
prev([selector]) : 获取匹配元素紧邻的前一个兄弟元素,必须相邻。
prevAll([selector]) :获得所有前面的兄弟元素。
六、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
1、基本过滤
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 去除所有与指定选择器匹配的元素
:even 选取索引是偶数的所有元素，索引从0开始
:odd 选取索引是奇数的所有元素，索引从0开始
:eq(index) 选取索引等于index的元素，索引从0开始
:gt(index) 选取索引大于index的元素，索引从0开始
:lt(index) 选取索引小于index的元素，索引从0开始
:header 选取所有的标题元素，如:h1、h2等
:animated 选取当前正在执行动画的所有元素
案例:BasicFilter
2、内容过滤
:contains(text) 选取含有文本内容为text的元素
:empty 选取不包含子元素或文字的空元素
:has(selector) 选取含有选择器所匹配的元素的元素
:parent 选取含有子元素或者文本的元素
案例:ContentFilter
3、可见性过滤
:hidden 选取所有不可见元素
:visible 选取所有可见元素
案例：visibleFilter
补充知识：jq里的一些方法
show(time):time为毫秒，设置显示秒数
val()：可以返回某一个表单元素的 value 属性值.
4、属性过滤
[attribute] 选取拥有此属性的元素
[attribute=value] 选取拥有此属性并值等于value的元素
[attribute!=value] 选取拥有此属性并值不等于value的元素
[attribute^=value] 选取拥有此属性并值以value开始的元素
[attribute$=value] 选取拥有此属性并值以value结束的元素
[attribute*=value] 选取拥有此属性并值含有value的元素
[select1][select2]... 多个属性过滤合并后的所有元素
案例：AttributeFilter
5、子元素过滤和
子元素过滤选择器：在所有":"之前要加一个空格,索引从1开始
:nth-child()
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2) :nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3) :nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(3) :nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
:first-child 选取每个父元素的第一个子元素
:last-child 选取每个父元素的最后一个子元素
:only-child 如果某个元素是它父元素中唯一的子元素，那么将被匹配。
案例：ChildFilter
6、表单对象属性过滤选择器.
:input 选取所有<input><textarea><select>和<button>元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素（单选框，复选框）
:selected 选取所有被选中选项元素（下拉列表）
注意：下拉框jq对象用select标签选择器获得,:selected前面要有空格
案例：FormFilter
补充知识：val(“str”)：设置元素的value属性为str
each(function(){})：遍历每一个对象，为每一个对象执行function里的代码
七、结点的操作
1、
查找结点：通过jq选择器完成或find(select):通过选择器select返回匹配元素后代
操作属性结点：通过jq方法attr() 设置属性value值可用jq方法val()
操作文本结点：通过jq方法text()
创建结点:$("<p id='a'></p>")或("<p id='a'></p>")
2、
创建结点（插入节点）：
append():在元素内部结尾处追加内容
appendTo():插入到指定的元素中的内部结尾处
prepend():在元素内部开始处追加内容
prependTo():插入到指定元素内部开始除
以下方法不但能将新创建的DOM元素插入到文档中，还能对原有DOM元素进行移动
after():在元素之后插入内容
before():在元素之前插入内容
insertAfter():将元素插入到指定元素之后
insertBefore():将元素插入到指定元素之前
案例：InsertNode Create_Insert
补充知识：1、$.trim(str): 可以去除 str 的前后空格.str为字符串
2、当调用方法返回调用对象时（如append()）可再次使用.方法名()等方法
3、
删除节点：
remove(): 删除传入选择器的结点，调用remove()的结点及其后代结点同样被删除，返回已被删除的调用结点
empty(): 清空结点中的所有子节点包括文本
案例：RemoveNode
补充知识：find(select):返回所有匹配选择器select的元素后代
取消默认提交：return false;
4、
复制结点：
clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件
替代结点：
replaceWith(str或jq对象): 将所有匹配的元素都替换为str或jq对象
replaceAll(jq对象): jq对象替换所有匹配的jq对象
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
5、
包裹结点：
wrap(): 将指定节点用包裹起来，（单独包裹）当选择器选择多个jq对象时，每个jq对象都会在外面进行包裹
wrapAll(): 将所有匹配的元素用一个元素来包裹. （全部包裹）
wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)包裹起来.
八、样式操作
获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
追加样式: addClass()
移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
案例：Css案例
九、几个常用方法：
val():获取或设置value值
获取：$("选择器").val()
设置：$("选择器").val(str).
1、当下拉框里的选项option未设置value值时，value值为文本值，即可以选中select对象或radio对象或checkbox对象，
设置select或radio或checkbox的val()方法来设置下拉框,单选框，多选框选中值。
2、val(["",...]),val("")分数组和单个元素俩种，单选下拉框用第二种方法，多选下拉框，单选框，多选框都用第一种
即数组法
3、对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).
如果为多选下拉框, 则返回一个包含所有选择值的数组
attr():获取或设置属性值
获取：$("选择器").attr(属性名)
设置：$("选择器").attr(属性名,属性值)
text():获取或设置文本
获取：$("选择器").text()
设置：$("选择器").text(str)
removeAttr(): 删除指定元素的指定属性
focus():获取焦点
blur():失去焦点
each():对jq对象执行遍历，执行里面的fuction功能代码，this为正在遍历的dom对象
next():取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素)
prev():取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素)
siblings(): 取得匹配元素前后所有的同辈元素
children()：取得对象所有子结点元素，不包含子节点后代元素。
html()：读取和设置某个元素中的 HTML 内容，和text()功能类似，text()更强大
综合案例：Integrated
补充知识：jq对象设置段落文本用text()方法
CommonMethod
补充知识：1、defaultValue为jq对象的默认值
2、当下拉框里的选项option未设置value值时，value值为文本值，
即可以选中select对象或radio对象或checkbox对象，
设置select或radio或checkbox的val()方法来设置下拉框,单选框，多选框选中值。
3、即便是为一组 radio 赋值, val 参数中也应该使用数组，使用一个值不起作用。
十、事件的绑定
on(事件类型，触发函数)：绑定事件和触发函数，当事件发生时触发函数。
off(事件类型)：移除元素上所有符合事件类型的事件，当没有事件类型时为移除所有事件
hover(函数1，函数2): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数,
当光标移出这个元素时, 会触发指定的第二个函数.
toggle(函数1，函数2): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数,
当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个.
鼠标连续点击时，即会不停执行函数1，函数2
one(事件类型，触发函数): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除.
即在每个对象上, 事件处理函数只会被执行一次.
事件冒泡：即事件会按照 DOM 层次结构像水泡一样不断向上只止顶端
解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.
案例： Event 事件的冒泡属性 实时更新鼠标坐标案例
//补充知识：is()：判断元素是否存在，true为存在，false为不存在
和:hidden选择器搭配可判断元素是否被隐藏。
.mousemove()为鼠标移动事件 和pageX, pageY 属性搭配可获得鼠标坐标
.mouseover()为鼠标放上元素时触发事件
.mouseout()为鼠标移出元素时触发事件
.show()显示元素
.hide()隐藏元素
十一、动画效果
show()：显示元素
hide()：隐藏元素
fadeOut()：会在指定的一段时间内降低元素的不透明度, 直到元素完全消失.
fadeIn()：会在指定的一段时间内增加元素的不透明度, 直到元素完全显现.
slideDown(), slideUp(): 只会改变元素的高度. 如果一个元素的 display 属性为 none, 当调用 slideDown() 方法时,
这个元素将由上至下延伸显示. slideUp() 方法正好相反, 元素由下至上缩短隐藏.
//下面三种方式为上面方式的简便写法，都是用来切换状态
toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的.
slideToggle(): 通过高度变化来切换元素的可见性.
fadeToggle(): 通过隐藏度变化来切换元素的可见性
fadeTo(): 调整透明度 (0 – 1 之间).
案例：animation
JQuery是javascript的升级版，优点是：写的少实现的多。
二、Jquery的使用
1、每个JQuery文件使用前都要导入jquery-1.7.2.js，添加语句<script type="text/javascript" src="jquery-1.7.2.js"></script>
2、开头都是$(function(){})（是$(document).ready(function(){})的简写）,代码写在{}里
二、Jquery对象
含义：jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象数组，本质是一个数组。
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variable = DOM 对象
三、Jquery对象和DOM对象的转换
jquery->dom： (1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
dom->jquery：用 $() 把 DOM 对象包装起来，即是一个jquery对象。
四、jQuery 基本选择器(最重要，最常用，是所有选择器基础)
有以下几种方式：
通过id属性值获得jquery对象：$("#id属性值")
通过class属性值获得jquery对象：$(".class属性值")
通过标签名获得jquery对象：$("标签名")
获得所有jquery对象：$("*")
综合多个选择器:$("#id属性值,.class属性值,标签名,....")
注意：id属性值在网页中不能相同（即不能重复），class属性值可以相同（允许重复使用）。
案例：BasicSelect 补充知识：jquery对象有一个方法.css("属性名","属性值")来修改css样式
jquery对象有一个方法.click()来触发点击事件
五、jquery的层次选择器
$("acestor grandson"):选取选择器acestor所有grandson选择器jquery对象
$("parent > child"):选取选择器parent的下一层级所有child选择器jquery对象
$("pre + next"):选取选择器pre同一层级后的下一个next选择器jquery对象,若对象并不相邻，此时无效。
$("pre ~ siblings"):选取选择器pre同一层级后的所有next选择器jquery对象
注意：(“prev ~ div”) 选择器只能选择 prev元素后面的同辈元素;
而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
案例：GradationSelect
补充知识：next([selector]):返回相邻第一个基本选择器jq对象,必须相邻。
nextAll([selector]):返回同一层级后面所有基本选择器jq对象
:first返回第一个匹配的DOM元素
prev([selector]) : 获取匹配元素紧邻的前一个兄弟元素,必须相邻。
prevAll([selector]) :获得所有前面的兄弟元素。
六、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
1、基本过滤
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 去除所有与指定选择器匹配的元素
:even 选取索引是偶数的所有元素，索引从0开始
:odd 选取索引是奇数的所有元素，索引从0开始
:eq(index) 选取索引等于index的元素，索引从0开始
:gt(index) 选取索引大于index的元素，索引从0开始
:lt(index) 选取索引小于index的元素，索引从0开始
:header 选取所有的标题元素，如:h1、h2等
:animated 选取当前正在执行动画的所有元素
案例:BasicFilter
2、内容过滤
:contains(text) 选取含有文本内容为text的元素
:empty 选取不包含子元素或文字的空元素
:has(selector) 选取含有选择器所匹配的元素的元素
:parent 选取含有子元素或者文本的元素
案例:ContentFilter
3、可见性过滤
:hidden 选取所有不可见元素
:visible 选取所有可见元素
案例：visibleFilter
补充知识：jq里的一些方法
show(time):time为毫秒，设置显示秒数
val()：可以返回某一个表单元素的 value 属性值.
4、属性过滤
[attribute] 选取拥有此属性的元素
[attribute=value] 选取拥有此属性并值等于value的元素
[attribute!=value] 选取拥有此属性并值不等于value的元素
[attribute^=value] 选取拥有此属性并值以value开始的元素
[attribute$=value] 选取拥有此属性并值以value结束的元素
[attribute*=value] 选取拥有此属性并值含有value的元素
[select1][select2]... 多个属性过滤合并后的所有元素
案例：AttributeFilter
5、子元素过滤和
子元素过滤选择器：在所有":"之前要加一个空格,索引从1开始
:nth-child()
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2) :nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3) :nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(3) :nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
:first-child 选取每个父元素的第一个子元素
:last-child 选取每个父元素的最后一个子元素
:only-child 如果某个元素是它父元素中唯一的子元素，那么将被匹配。
案例：ChildFilter
6、表单对象属性过滤选择器.
:input 选取所有<input><textarea><select>和<button>元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素（单选框，复选框）
:selected 选取所有被选中选项元素（下拉列表）
注意：下拉框jq对象用select标签选择器获得,:selected前面要有空格
案例：FormFilter
补充知识：val(“str”)：设置元素的value属性为str
each(function(){})：遍历每一个对象，为每一个对象执行function里的代码
七、结点的操作
1、
查找结点：通过jq选择器完成或find(select):通过选择器select返回匹配元素后代
操作属性结点：通过jq方法attr() 设置属性value值可用jq方法val()
操作文本结点：通过jq方法text()
创建结点:$("<p id='a'></p>")或("<p id='a'></p>")
2、
创建结点（插入节点）：
append():在元素内部结尾处追加内容
appendTo():插入到指定的元素中的内部结尾处
prepend():在元素内部开始处追加内容
prependTo():插入到指定元素内部开始除
以下方法不但能将新创建的DOM元素插入到文档中，还能对原有DOM元素进行移动
after():在元素之后插入内容
before():在元素之前插入内容
insertAfter():将元素插入到指定元素之后
insertBefore():将元素插入到指定元素之前
案例：InsertNode Create_Insert
补充知识：1、$.trim(str): 可以去除 str 的前后空格.str为字符串
2、当调用方法返回调用对象时（如append()）可再次使用.方法名()等方法
3、
删除节点：
remove(): 删除传入选择器的结点，调用remove()的结点及其后代结点同样被删除，返回已被删除的调用结点
empty(): 清空结点中的所有子节点包括文本
案例：RemoveNode
补充知识：find(select):返回所有匹配选择器select的元素后代
取消默认提交：return false;
4、
复制结点：
clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件
替代结点：
replaceWith(str或jq对象): 将所有匹配的元素都替换为str或jq对象
replaceAll(jq对象): jq对象替换所有匹配的jq对象
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
5、
包裹结点：
wrap(): 将指定节点用包裹起来，（单独包裹）当选择器选择多个jq对象时，每个jq对象都会在外面进行包裹
wrapAll(): 将所有匹配的元素用一个元素来包裹. （全部包裹）
wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)包裹起来.
八、样式操作
获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
追加样式: addClass()
移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
案例：Css案例
九、几个常用方法：
val():获取或设置value值
获取：$("选择器").val()
设置：$("选择器").val(str).
1、当下拉框里的选项option未设置value值时，value值为文本值，即可以选中select对象或radio对象或checkbox对象，
设置select或radio或checkbox的val()方法来设置下拉框,单选框，多选框选中值。
2、val(["",...]),val("")分数组和单个元素俩种，单选下拉框用第二种方法，多选下拉框，单选框，多选框都用第一种
即数组法
3、对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).
如果为多选下拉框, 则返回一个包含所有选择值的数组
attr():获取或设置属性值
获取：$("选择器").attr(属性名)
设置：$("选择器").attr(属性名,属性值)
text():获取或设置文本
获取：$("选择器").text()
设置：$("选择器").text(str)
removeAttr(): 删除指定元素的指定属性
focus():获取焦点
blur():失去焦点
each():对jq对象执行遍历，执行里面的fuction功能代码，this为正在遍历的dom对象
next():取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素)
prev():取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素)
siblings(): 取得匹配元素前后所有的同辈元素
children()：取得对象所有子结点元素，不包含子节点后代元素。
html()：读取和设置某个元素中的 HTML 内容，和text()功能类似，text()更强大
综合案例：Integrated
补充知识：jq对象设置段落文本用text()方法
CommonMethod
补充知识：1、defaultValue为jq对象的默认值
2、当下拉框里的选项option未设置value值时，value值为文本值，
即可以选中select对象或radio对象或checkbox对象，
设置select或radio或checkbox的val()方法来设置下拉框,单选框，多选框选中值。
3、即便是为一组 radio 赋值, val 参数中也应该使用数组，使用一个值不起作用。
十、事件的绑定
on(事件类型，触发函数)：绑定事件和触发函数，当事件发生时触发函数。
off(事件类型)：移除元素上所有符合事件类型的事件，当没有事件类型时为移除所有事件
hover(函数1，函数2): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数,
当光标移出这个元素时, 会触发指定的第二个函数.
toggle(函数1，函数2): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数,
当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个.
鼠标连续点击时，即会不停执行函数1，函数2
one(事件类型，触发函数): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除.
即在每个对象上, 事件处理函数只会被执行一次.
事件冒泡：即事件会按照 DOM 层次结构像水泡一样不断向上只止顶端
解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.
案例： Event 事件的冒泡属性 实时更新鼠标坐标案例
//补充知识：is()：判断元素是否存在，true为存在，false为不存在
和:hidden选择器搭配可判断元素是否被隐藏。
.mousemove()为鼠标移动事件 和pageX, pageY 属性搭配可获得鼠标坐标
.mouseover()为鼠标放上元素时触发事件
.mouseout()为鼠标移出元素时触发事件
.show()显示元素
.hide()隐藏元素
十一、动画效果
show()：显示元素
hide()：隐藏元素
fadeOut()：会在指定的一段时间内降低元素的不透明度, 直到元素完全消失.
fadeIn()：会在指定的一段时间内增加元素的不透明度, 直到元素完全显现.
slideDown(), slideUp(): 只会改变元素的高度. 如果一个元素的 display 属性为 none, 当调用 slideDown() 方法时,
这个元素将由上至下延伸显示. slideUp() 方法正好相反, 元素由下至上缩短隐藏.
//下面三种方式为上面方式的简便写法，都是用来切换状态
toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的.
slideToggle(): 通过高度变化来切换元素的可见性.
fadeToggle(): 通过隐藏度变化来切换元素的可见性
fadeTo(): 调整透明度 (0 – 1 之间).
案例：animation
