jquery学习笔记

1，jquery 1.x版本支持IE6+,jquery2.x不再支持IE6、7、8

2，jquery的功能和优势：
像css那样访问和操作DOM
修改css控制页面外观
简化javascript代码操作
事件处理更加容易
各种动画效果使用方便
让Ajax技术更加完美
基于jQuery大量插件
自行扩展功能插件

3，代码风格：
jquery程序中,不管是页面元素的选择、内置的功能函数，都是美元符号"$"来起始的。而这个"$"就是jquery当中最重要而且独有的对象:jQuery对象，因此在页面元素选择或执行功能函数是可以写出下面：
$(function(){});//执行一个匿名函数
$("#box") //ID选择器
$("#box").css("color","red")//执行功能函数

$本身就是jquery对象的缩写，因此上面的也可以写为：
jQuery(function(){});
jQuery("#box")
jquery("#box").css("color","red");

.css()是jQuery内置功能函数,添加一个行内的css样式

4，执行css功能函数时，.css()函数并不是直接被$或者jQuery对象调用执行

5，$()返回的是一个jquery对象,$().css()返回的也是jQuery对象

6，alert($)返回jQuery对象的内部，是一个函数
alert($())返回jQuery对象
alert($("#box"))返回的jQuery对象
alert($("#box")).css()返回的还是jQuery对象
alert($('box')).css().css().css()...可以连着用，整体返回的还是jquery对象

7，加载模式：
因为jQuery库文件是在Body元素之前加载，必须等DOM元素加载完成之后，延迟支持DOM操作，否则就无法获取到，因此使用如下方式：
$(function(){
中间的代码
});
类似于：
window.onlad=function(){};

但jquery等待加载是：
$(document).ready(functon(){});
二者的区别是：
执行时机：window.onload等网页全部加载完毕(包括图片)，然后再执行包裹代码，$(document).ready(functon(){})是只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码，因此效率更高
执行次数：window.onload只执行一次，且是最后一次，如果执行第二次，第一次被覆盖
window.onload=function(){alert(1)};
window.onload=function(){alert(2)};
1将会被覆盖

$(document).ready(functon(){});可以执行多次，第N次都不会被上一次覆盖，类似于上面的，但1和2都会执行

$(document).ready(functon(){});可以简写为$(function(){});

为防止网页处于假死状态，实际开发基本不用window.onload

8，对象互换：
jquery中的$返回的是jquery对象
getElementById()返回的是DOM对象

使用jQuery里面没有的js方法，需要使用DOM对象

将jquery对象转换为DOM对象：
$("#box").get(0):之所以加上get(0)是因为前面选择的Jquery对象可能是多个，是数组，例如根据class选择时就是如此

DOM对象换成jquery对象：只需用$包裹即可：
var v = document.getElementById('box');
$(v):将DOM换成jQuery对象

9，多个库之间冲突：谁的引用在后面，符号就依谁
1，解决冲突方法一：
var $$ = jQuery;
2，解决方法冲突二：
jQuery.noConflict();将$所有权删除
var $$ = jQuery;

10,常规选择器：
使用jquery选择器时，首先必须使用$()来包装我们的css规则。而css规则作为参数传递到jQuery对象内部之后，再返回包含页面中对应元素的jQuery对象。随后就可以对该DOM节点进行操作了。
#box{color:red;}类似于：
$("#box").css("color","red");称为添加一个行为，除了css样式之外，可能还有其他行为

除了ID选择器之外，还有以下：
$("div")，获取所有DIV元素的jquery对象
$("div").css("color","red")
$("#box")获取id为box的一个jquery对象,多个同名ID只以第一个为准
$(".pox")获取所有class为pox的jQuery对象
$(".pox").css(...);

jquery可以通过.length和.size()方法查看返回元素的个数
$("#box").length。
如果有多个，就通过get(int)来获取具体的某一个元素
还有一个方法就是通过#$(".box").eq(1)获取第二个元素

11，$("#box > p").css()为id为box的div的子节点p设置样式，后代节点无影响

12，jQuery具有一定的容错功能，$("#box")当id微店box不存在的话不会出错
若要判断是否存在，则使用if($("#box").size() > 0)或者DOM转换
if($("#box").get(0))...
或者通过下标返回:if($("#box")[0])

13，进阶选择器：
群组选择器:$("span,em,h1"),逗号分隔，相当于并集，同时设置三个的样式

后代选择器:$("span em h1")，空格分开，有继承关系的元素添加样式，层层追溯

通配选择器：$("*").css()为所有节点添加样式，从html标签算起的所有节点

通配符的用法：$("ul li *").css()为ul的li下面的所有节点添加样式，这是通配符的用法

交集选择器：
div.box class为box的div标签
div#pox id为pox的div表情

14,当多个class选择器：.class1.class2
$(".class1.class2").css()...

15,高级选择器：
后代选择器：
CSS提供了等价的find()方法：
$("#box p").css() === $("#box").find("p").css)(

子选择器:只选择儿子选择器:IE6不支持
$("#box > p")选择id为box的子p元素，不会选择后代
等价方法：
#("#box").children("p").css()....

next选择器:
div + p{} 类似于$("div + p")
只获取某一个后面的一个同一级别的节点
等价方法:
$("#box").next("p").css()...

nextAll选择器：
选择下面所有的同级节点：
#box ~ p{}
$("#box ~ p").css()...
等价方法：
$("#box").nextAll("p")...

.next()、.nextAll()
这些选择器如果留空不传参的话相当于传入*

类似的还有:注意是同级，对上选择
prev()对应于next
prevAll()对应于nextAll

对上对下同级都选择的话：
$("#div").siblings("p")

16,同级上非指定的所有元素选定，遇到则停止
$("#box").prevUntil("p").css();
选择上面的所有不是P的元素选定，遇到p则停止
$("#box").nextUntil("p").css();
选择下面的所有不是P的元素选定，遇到p则停止

$("p","#box")选择box下面的子p节点
类似于：$("p",$("#box"))...

17,属性选择器：
$("a[title]").css,选择具有title属性的a元素

$("a[title=num1]").css(),选择具有title属性并且title属性等于num1的a元素

具有某属性且属性名开头匹配的：
$("a[title ^= num]").css(),此时选择了num1,num2,num*等元素

具有某属性且属性名结尾匹配的：
$("a[title $= num]").css(),此时选择了1num,2num,*num等元素

选定具有该属性，且等于属性值，或者开头属性值匹配且后面跟"-"号的：
$("a[title |= num]").css()选定下面两种：
<a title="num"></a>

<a title="num-1"></a>
<a title="num-5"></a>

选择不等于指定属性值的
$("a[title != num]").css()选择title不等于num的a元素

选择具有这个属性，且属性值是一个以空格分隔的列表，且列表中包含该属性值的
$("a[title ~= num]").css()选出：
<a title = "num1 num nunm2"></a>

选择包含指定子串的:
$("a[title *= num]").css()

18,选定具有多个属性且属性值匹配成功的
$(a[href=...][title=num]).css()...
此时是并集关系，要求多个属性同时满足关系

19,过滤选择器：
以冒号"："开头
基本过滤器： 用法 说明 返回

:first $("li:first") 选取第一个li元素单个
:last $("li:last:")选取最后一个li元素 单个
$("ul:first li:last")...获取第一个ul下面的最后一个li元素
:not(selector)$("li:not(.red)") 选取class不是red的元素集合
:even $("li:even")选取索引(0开始)是偶数的说有元素 集合
:odd $("li:odd")选取索引(0开始)是奇数的说有元素 集合
:eq(index) $("li:eq(2)") 选取索引(0开始)等于index的说有元素集合
注意eq可以为负数
$("li:eq(-2)")选取倒数第二个li,最后一个为-1
:gt(index) $("li:gt(2)") 选取索引(0开始)大于index的说有元素集合
:lt(index) $("li:lt(2)") 选取索引(0开始)小于index的说有元素集合
注意Index可以为负数
:header $(":header") 选取标题元素,h1~h6集合
$("div :header").css()...
:animated $(":animated") 选取正在被执行动画的元素集合
:focus $(":focus") 选取当前被焦点的元素集合
$("input").get(0).focus()先初始化激活
$(":focus").css("background","red")，被焦点的元素

jquery为前面的过滤器提供了专用的方法：
$("li").eq(2).css...
$("li").first().css...
$("li").last().css...
$("li").not().css...

20,内容过滤器：
:contains(text)
$("div:contains('aaa')").css():选择含有aaa文本的div元素
:empty
$("div:empty").css()选取不包含子元素或空文本的元素，连文本也不能有
:has(selector)
$("div:has(.red)")选取子元素含有class是red的元素，注意此处子元素包含red，选出来的确是父元素
:parent
$("div:parent")选取含有子元素或者文本的元素，与empty相反
jquery提供了has方法：
$("div").has(".red")
21，以下注意：
$("li").parent().css()选取当前元素的父元素
$("li").parents().css()选取当前元素的父元素及祖先元素
$("li").parentsUntil("body").css()选取当前元素的父亲及其祖先，直到body停止选择

22，可见性过滤器：
:hidden，选取所有不可见的元素，包括：
display=none, input的type=hidden或者visibility:hidden的
$("div:hidden")
:visible选取所有可见的元素
$("div:visible")

23,子元素过滤选择器
:first-child $("li:first-child") 获取每个父元素的第一个子元素集合元素
:last-child $("li:last-child") 获取每个父元素的最后一个子元素集合元素
:only-child $("li-only-child") 获取只有一个子元素的元素集合元素
:nth-child(odd/even/eq(index))$("li:nth-child(even)") 获取每个自定义子元素的元素(索引值从1开始计算) 集合元素

li:first-child ：先通过li找到其父元素ul,然后返回ul下面的第一个子元素
li:last-child类似
li:only-child：通过li找到其父元素ul,然后筛选出只有一个子元素li的ul，然后再返回该li
$("li:nth-child(even)"):选择偶数形式的li
$("li:nth-child(odd)"):选择偶数形式的li
$("li:nth-child(1)"):先找到ul,然后对每个ul,选择索引为1的li
$("li:nth-child(2n)"):先找到ul,然后对每个ul,每隔2选出一个li
$("li:nth-child(3n)"):先找到ul,然后对每个ul,每隔3选出一个li
类似的还有：
$("li:nth-child(3n+1)"):先找到ul,然后对每个ul,每隔3选出一个li
$("li:nth-child(4n+2)"):先找到ul,然后对每个ul,每隔3选出一个li

24，其他常用方法：
is() $(".red").is("li"),判断含有red的class是否存在于li当中
$(".red").is($("li")) //jQuery对象集合
$(".red").is($("li").eq(2))//传入单个jQuery对象
$(".red").is($("li").get(2))//传入单个DOM对象，同上
//找出class为red的元素，判断该元素的title是否为aaa，注意必须使用$(this)来表示要判断的元素
否则不管function返回是否为true，都和调用的函数无关
$(".red").is(function(){
return $(this).attr('title') === 'aaa';
此处this表示的就是$(".red")
})
.attr('title')是返回title的值，只有jQuery对象(eq(0))可以调用，DOM对象(get(0))不能调用

hasClass
$("li").eq(2).hasClass("red")，此处不能有点，判断元素是否有red这个class

25，eq(index)和get(index)的区别：
前者返回jQuery对象，后者返回DOM对象

26,slice
$("li").slice(2,5),选择[2,5)的li元素
$("li").slice(2)，从2往后全部选定
$("li").slice(0,-2)，从第0个到倒数第二个全部选定
$("li").slice(2,-2)，从第2个到倒数第二个全部选定

27，end
$("#box").find("p").end():选出该元素的上一个元素，可能是父节点，也可能是相邻节点
28，content()
$("div").contents().size()
返回子节点(包括文本节点)的数量

28，filter
$("li").filter(".red, :first, :last, :first-child, :last-child").css()...选出所有的符合条件的元素
注意是并集关系，中间用逗号分隔

按照特殊要求返回
$("li").filter(function(){
//选出所有class为red且title为title的li
return $(this).attr('class') === 'red' && $(this).attr('title') === 'title1';
}).css()...;
返回指定要求的li

29,利用jQuery来操作DOM
设置元素及其内容：
html()：获取元素的html内容
html(value):设置元素的html内容，html会自动解析
text()：获取元素的文本内容,会自动清理html标签
text(value):设置元素的原生文本内容，html标签会被自动转义
val():主要是表单中的操作，获取表单的文本内容
val(value):设置表单input的值

30，val()还有一个功能是可以通过数组将其变成首选项:
$("input").val(['check1','check2','radio1']);value是这些值的默认将被选中
表单用val,其他用html和text

31,获取属性
attr("key"):获取属性名为Key的value
attr("key","value"),设置属性为key的value为value
$("div").attr("key");
$("div").attr("key","value");

可以设置多个属性，传入对象，对一个元素的多个属性进行操作
attr({key1:value1, key2:value2, key3:value3...})
$("div").attr({
'title':'title',
'class':'red',//class不建议使用attr来设置
'data':'123'
});

会自动进行循环操作
$("div").attr(key,function(index,value){
return ""+index;
})


此处使用function说明需要计算,index是因为数组传入的索引,value是原来的属性Key的值，例如：
$("div").attr(key,function(index,value){
return value + "===" + index;
})

32，$('div').html($('div')+"aaaaaa....")

$('div').html(function(index, value){
return value + $(this).eq(index).html();
});
之前的大部分都可以加上function

33,removeAttr 删除一个属性
$('div').removeAttr('title'):删除title属性
removeAttr不可以传递function

34, jquery对元素样式进行操作
.css(key),获取样式为key的value
.css(key,value),设置样式
var box = $('div').css(['color','width','height']);返回Object数组
不能使用下标操作
for(var i in box)
alert(i + box[i]);

35，jquery使用$.each()方法来遍历对象数组
var box = $('div').css(['color','width','height']);
//取出对象数组的key和value
$.each(box, function(attr, value){
//attr表示属性名，value表示属性名
alert(attr+value);
})

var box = $('div');//返回div数组
box.each(function(index, element){
//index是元素索引,element是div的dom对象
alert(index+element);
})

36，传递对象设置多个css样式,中间用逗号分隔
$(div).css({
"background":"",
"width:"",
});

37，需要设置某个元素的css样式值，但是这个值需要进过计算得到
$('div').css('width',function(index,value){
//index是所以，value是原来的默认值
return value+index-500+'px';
});

38，设置css行内样式:
$('div').addClass('red bg size')
删除行内样式:
$('div').removeClass('red bg size')

39，给css进行样式类别切换，此时必须有点击事件：
$('div').click(function(){
//此时class会在red+size和空之间切换，默认样式和指定样式之间的切换
$(this).toggleClass('red size');
//toggleClass后面可以再传入一个boolean的值，表示频率
$(this).toggleClass('',true/false);
true表示切换到新的样式，false表示切换到默认样式，因此可以给第二个参数一个计数器

});
var count = 0;
$('div').click(function(){
//没点3次切换一次
$(this).toggleClass('red size',count++ %3 == 0);//频率问题
})

40，实现两个样式之间的切换：
$('div').click(function(){
$(this).toggleClass('red');
if($(this).hasClass('red')){
$(this).removeClass('green');
}else
$(this).toggleClass('green');
})

使用jquery的方法：
$('div').click(function(){
$(this).toggleClass(function(){
return $(this)...
if($(this).hasClass('red')){
$(this).removeClass('red');
return 'green';
}
else{
$(this).removeClass('red');
return 'green';
}
},count++%3 === 0);//加上频率，false默认返回空
});

41，toggleClass(index,className, switchBool)

$('document').click(function(){
$('div').toggleClass(function(index, className, switch){

},count++%3 === 0);
});

42,  CSS方法:
jquery封装了一些独有的，特殊的css方法:
width()//返回number
等价于:$('div').css('width')//返回string
$(document).width();

设置某个元素的长度:

$('div').width(500)直接转换成500px
$('div').width('500px');

$('div').width(function(index,width){
//width原来的值
return width-500;
})

高度设置
height()
height(value)

height(function(){});

innerWidth() 获取宽度，包括内边距padding
innerHeight() 获取高度，包括内边距padding
outerWidth() 获取宽度，包括边框border和内边距padding
outerHeight() 获取高度，包括边框border和内边距padding
outerWidth(true)同上，且包含外边距margin
outerHeight(true)同上，且包含外边距margin

43,元素偏移方法
$('div').offset()，得到一个点对象
$('div').position()
$('div').offset().left得到元素的左边距
$('div').offset().top得到元素的上边距

absolute定位是相对于父元素的位置；

offset()是相对于body(视口)的位置
positon()是相对于父元素的位置

44，滚动条的设置
scrollTop()获取垂直滚动条的位置
$(window).scrollTop()
$(window).scrollTop(value)给垂直滚动条赋值
scrollLeft()获取水平滚动条的值
scrollLeft(value)设置水平滚动条的值

45，创建节点：
var box = $('<div id = ''>节点</div>');//创建一个节点
$('body').append(box);//插入节点

46，插入节点的方法:即插入到子节点处
1,内部插入
append(content):向指定元素的内部的后面插入节点，即插入到最后面
$('div').append('<strong>string</strong>')


$('div').append(function(index,html){//使用匿名函数向指定元素内部的后面插入节点
//index是索引，html是原本的div里面的节点的内容
return index;
})

appendTo(content)//将指定元素移入到指定元素content内部后面
此时不需要再创建节点了
$('strong').prepend('div');//将strong节点放入到div的内部的最末尾

//下面的三个方法与append相对应
prepend(content)//向指定元素content内部的前面插入节点
prepend(function(index, html){//使用匿名函数向指定元素内部的前面插入节点

})
prependTo(content);//将指定元素移入到指定元素content内部前面


47，插入外部节点:即插入到兄弟节点处
$('div').after(content)：向指定元素的外部的后面插入节点content
$('div').after(function(index, html){});使用匿名函数向指定元素的外部后面插入节点
$('div').before(content)向指定元素的外部前面插入节点
$('div').before(function(index, html){});使用匿名函数向指定元素的外部的前面插入节点

下面两个不创建节点
insertAfter(content)将指定节点移到指定元素content外部的后面
$('strong').insertAfter('div');
insertBefore(content);将指定节点移到指定元素content的外部的前面
$('strong').insertBefore('div');


48，包裹节点:使用指定字符串将指定元素的代码包含着
wrap(html)，向指定元素包裹一层html代码，会涉及到循环操作

<strong>
<div></div>
</strong>
<strong>
<div></div>
</strong>
$('div').wrap('<strong></strong>')
$('div').wrap('<strong />')
$('div').wrap('<strong>abc</strong>');此时div的内容会放到abc后面
$('div').wrap('<strong><em>   </em></strong>')


wrap(element)，向指定元素包裹一层DOM对象节点
$('div').wrap($('strong').get(0))
$('div').wrap(document.createElement('strong'))

wrap(function(index){})使用匿名函数向指定元素包裹一层自定义内容

unwrap()移除一层指定元素包裹的内容


wrapAll(html) 用html将所有元素包裹到一起，不会涉及到循环操作
<strong>
<div></div>
<div></div>
</strong>


wrapAll(element) 用DOM对象将所有元素包裹在一起


wrapInner(html) 向指定元素的子内容包裹一岑html
<div>
<strong></strong>
</div>
<div>
<strong></strong>
</div>
wrapInner(element) 向指定元素的子内容包裹一层DOM对象节点

wrapInner(function(indx){}) 用匿名函数向指定元素的子内容包裹一层

49，节点操作
$('div').clone().appendTo('body');//复制一个节点到Body中，但是没有事件处理
$('div').clone(true).appendTo('body');//深拷贝，会把事件也复制过去


返回被删除的jquery对象，但是该对象不保留事件行为
$('div').remove();直接删除div节点
$('div').remove("#div1 .box");直接删除div节点,且这些div的id为div1,class为box
$('div').detach()删除时，返回的对象保留了原来的事件行为
$('div').empty()清空节点，删除节点里面的内容，返回清空后的div节点

$('div').replaceWith('<span>DOM</span>')标签和内容都被替换掉，事件也没有了

$('<span>DOM</span>').replaceAll('div')与上面的类似

50，表单选择器
$('input[type=text]').val()
$('input[name=pass]').val()
$('input[type=text][name=pass]').val()//多个选择器

为了更加灵活地使用表单选择器：以伪类的形式选择
:input 选取所有的input, textarea, select和button元素
:text 选择所有的单行文本框，即type=text
:password 选取所有的密码卡，即type=password
:radio 选取所有的单选按钮，即type=radio
:checkbox 选取所有的复选框，即type=checkbox
:submit 选取所有提交按钮
:reset 选取所有重置按钮
:image 选取所有图像按钮，即type=image
:button 选取所有普通按钮，即type=button
:file 选取所有文件按钮，即type=file
:hidden 选取所有不可见字段，即type=hidden
$('form :hidden')

$(':input[name=city]').size()...
$(':password[name=pass]').size()...

51，表单过滤器：分为是否可用，是否被选定进行
:enable 选择所有可用元素
$('form :enable')
:disabled 选取所有不可用元素
$('form :disabled')
:checked 选取所有被选中的元素，单选和复选字段，返回被选定的元素
$('form :disabled')
:selected 选取所有被选中的元素，下拉列表，返回被选定的元素，返回option
$('form :disabled')

52,Jquery事件绑定：
click,dblclick,mousedown
change
select
submit
keydown
keypress,keyup
blur
focus
load
resize
scroll
error

jQuery通过bind()方法来为元素绑定这些事件，可以传递三个参数，bind(type,[data],fn)
type表示一个或者多个类型的事件名字符串，data可选，作为event.data属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象，fn表示绑定到指定元素的处理函数
//使用点击事件
$('input').bind('click',function(){
//点击后执行匿名函数
});

$('input').bind('click',fn);//无需圆括号
function fu(){};


//绑定多个事件:
$('input').bind('click mouseover',function(){});//多个事件空格隔开
$('input').bind('click mouseover',function(){
$('div').html(function(index,value){
//value是div原来的值
return value + '1';
});
})

//通过对象的键值对绑定多个参数
$('input').bind({
mouseover:function(){alert('移入'}, //mouseover可以加上双引号
mouseout:function(){alert('移出'}
});

53，解除绑定
使用unbind删除绑定的事件
$('input').unbind();//删除当前元素所有的绑定事件
$('input').unbind('click');//删除当前元素的click事件
使用unbind参数删除指定处理函数的事件
function fn1(){}
functin fn2(){}
$('input').bind('click',fn1);
$('input').bind('click',fn2);
$('input').unbind('click',fn1);//只是解除fn1的绑定

54，jQuery的简写事件：
click(fn)
dblclick(fn)
mousedown(fn);
mouseup(fn)
mouseover(fn)
mouseout(fn)
mousemove(fn)
mouseenter(fn)鼠标穿过事件
mouseleave(fn)鼠标穿出
keydown(fn)
keyup(fn)
keypress(fn)
unload(fn) 文档卸载(刷新、)
load用了ready
resize(fn)
scroll(fn) 滚动条拖动事件
focus(fn) 表单元素的focus事件，必须是当前元素
blur(fn) 表单元素的blur事件，必须是当前元素激活
focusin(fn) 表单元素的焦点激活事件,可以是子元素触发
focusout(fn) 表单元素丢失焦点事件，可以是子元素触发
select(fn) 表单元素文本选定事件
change(fn) 表单元素值改变事件
form.submit(fn)表单提交事件


55, 键盘事件
$('input').keydown(function(e){
alert(e.keyCode);
});


$('input').keyup(function(e){
alert(e.keyCode);
});


$('input').keypress(function(e){
alert(e.charCode);
});


56，复合事件
ready(fn)
hover([fn1],fn2)鼠标移入触发fn1,移出触发fn2
toggle(fn1,fn2,[fn3]...)已经废弃，鼠标点击触发fn1,再点触发fn2...,再点fn1
此时需要加入jquery-migrate-1.2.1.js文件，放到jquery.js后面

57，事件对象：由系统传递，不是人为传递
事件处理时会接收到系统传过来的event对象，这个event有很多属性和方法
$('input').bind('click',function(e){//接受时间对象的参数,e的命名无限制
alert(e);
});
event的属性：
type:获取事件的类型字符串，如Click
target:获取绑定事件的DOM元素
data:获取事件调用时的额外数据
$('input').bind('click','123'/*可为数组*/,function(e){
alert(e.data);//打印123
});
relatedTarget:获取移入移出目标点离开或进入的那个DOM元素
currentTarget:获取冒泡前触发的DOM元素
pageX/pageY:获取相对于页面原点的水平/垂直坐标
screenX/screenY:获取显示器屏幕位置的水平，垂直坐标
clientX/clientY:获取相对于页面视口的水平，垂直坐标
result:获取上一个相同事件的返回值
timeStamp:获取事件触发的时间戳
which:获取鼠标的左中右按键(1,2,3),或获取键盘按键
altKey/shiftKey/ctrlKey/metaKey:是否按下了alt,shift,ctrl,meta键
event的方法：
阻止冒泡行为：
$('input'),click(funciton(e){
e.stopPropagation();//阻止冒泡
})

//禁止提交表单时跳转
$('form').submit(function(e){
e.preventDefault();
})

e.preventDefaule():阻止系统的默认行为
例如：右击文本框输入区域，会弹出文本框输入菜单
点击超链接会跳转到指定页面，点击提交后会提交数据

其他方法：
e.isDefaultPrevented()判断是否调用了preventDefault()方法
e.isPropagationStopped()判断是否调用了stopPropagation()方法
e.stopImmediatePropagation()取消事件冒泡
e.isImmediatePropagationStopped()判断是否调用了stopImmediatePropagation

58，高级事件:


模拟操作：事件触发时，需要模拟一些用户的操作行为：如：当网页加载完毕之后，自行点击按钮触发事件，而不是用户去点击
$('input').click(functin(){});

$('input').trigger('click');//Input是要模拟的DOM，click是要模拟的事件

$('input').click(functin(){}).trigger('click');

//trigger额外数据，只有一条可以省略中括号，多条必须要有中括号
$('input').click(functin(e,data1,data2){
data1表示123,data2表示abc
}).trigger('click',[123,'abc']);


59，自定义事件：
$('input').bind('myEvent',function(){}).trigger('myEvent');

60,trigger的简写
$('input').click(functin(){}).trigger('click');与下面等同
$('input').click(functin(){}).click();


61,triggerHandler:
triggerHandler不会触发事件的默认行为,而trigger会
$('form').trigger('submit');模拟用户执行提交，并跳转到执行页面
$('form').triggerHandler('submit');模拟用户执行提交，并阻止默认行为

若想使用trigger阻止默认，则
$('form').submit(funciton(e){
e.preventDefault();
}).trigger('submit');


63,命名空间
同一个元素的同一个行为绑定了两个匿名函数的移除
$('input').bind('click.abc',function(){});
$('input').bind('click.xyz',function(){});


$('input').unbind('click.abc');


64,事件委托
delagate

65,动画：
显示，隐藏：
show()显示，hide()隐藏，无参数的时候只是硬性显示和隐藏

hide()方法其实就是设置display:none
show()方法若是块元素,则display:block。若是内联元素，则display:inline
$('.show').click(function(){
$('#box').show();
});
$('.hide').click(function(){
$('#box').hide();
});

show和hide可以传递一个参数,这个参数以毫秒来控制,包含了匀速变大变小，透明度变换等
$('#box').show(1000);
$('#box').hide(3000);

除了上面的，还可以传入:slow(600ms),normal(400ms,默认),fast(200ms)

show和hide还可以传入一个函数,可以实现列队动画，等show和hide全部执行完毕之后执行回掉函数
show(1000,function(){
$().show(1000,function(){
...
不断嵌套，可以逐个执行动画
});
});
toggle('slow')可以在hide和show之间进行切换


66，滑动，卷动
slide,slidedown,slideToggle和上面的对应，只是动画效果不同


67，淡入，淡出
fadeIn,fadeOut,fadeToggle类似

还有一个fadeTo，透明度变为指定的透明度
fadeTo('slow',[0-1之间的一个数字]);

68,自定义动画：
jQuery使用animate()方法来自定义动画

//多重同步动画，第一个必穿，后面的选传
$('input').click(function(){
$('div').aninate({
width:'300px',
height:'200px',
opacity:0.5,
font-size:'50px'
},1000,function(){
动画执行完毕之后的回掉函数
});
});

69，列队动画:使用在同一个元素的基础上，使用连缀调用
$('input').click(function(){
$('div').animate({})
.animate({})
.animatte({});
...
});
顺序排列调用:
不同元素之间是同步动画，同一个元素是列队动画
$('input').click(function(){
$('div').animate({});
$('div').animate({});
$('div').animatte({});
...
});

70，不同元素的列队动画
quene()实现列队动画


71，停止动画
.stop方法