jQuery简介jQuery是一个轻量级的操作DOM的JS库，主要包括以下功能：HTML元素选择和操作HTML事件函数HTMLDOM遍历和修改CSS操作JavaScript特效和动画AJAX基于jQuery的插件在jQuery的优势在于它兼容所有主流浏览器，包括InternetExplorer6！jQuery语法$(selector).action()文档加载就绪事件$(document).ready(function(){//code...});//简写$(function(){//code...});$(document).ready和window.onload的区别$(document).ready和window.onload都是页面加载后执行的函数，大多数情况下区别不大。$(document).ready：DOM结构绘制完成后执行，无需等到加载完成。意思是DOM树加载完成后就会执行，而不用等待页面上的图片或者其他外部文件加载完成。并且可以写多个.ready。window.onload：加载页面所有元素，包括图片等所有元素。只能执行一次。jQuery选择器jQuery选择器基于已有的CSS选择器$('*')$('p')$('ulli')$('ulli:last-child')...jQuery事件鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddbclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleaveblurunloadhover常见的jQuery事件方法click()点击事件dbclick()双击事件mouseenter()鼠标传递元素事件mouseleave()鼠标离开元素事件mousedown()鼠标移动到元素上方按下鼠标事件mouseup()按住鼠标移动到元素上释放鼠标事件hover()Mouseovereventfocus()Formelementfocuseventblur()Formelementlosefocuseventsubmit()Formsubmiteventchange()FormElementvaluechangeeventkeypress()keyboardkeypresseventkeydown()keyboardkeypresseventkeyup()keyboardkeyreleaseeventload()指定元素加载完成执行事件（1.8版本后弃用）resize()窗口大小改变事件scroll()滚??动监听事件jQuery效果$(selector).action(speed,callback)变量描述selector选择器action事件速度，毫秒，也可以是'slow','fast'回调回调函数显示hide()隐藏元素show()显示元素toggle()显示隐藏元素，隐藏显示元素淡入淡出fadeIn()淡入fadeOut()淡出fadeToggle()淡出元素淡入，淡入元素淡出fadeTo()gradient$(selector).fadeTo(speed,opacity,callback)对于给定的不透明度；不透明度值在0和1之间滑动slideDown()向下滑动以展开元素slideDown()向上滑动以折叠元素slideToggle()展开元素向上滑动以折叠，折叠的元素向下滑动以显示动画$(selector).animate({params},速度,callback);参数说明params是否必须定义形成动画的css属性必须speed，毫秒，也可以是'slow'，'fast'可选回调函数可选实例$("button").click(function(){$("div").animate({left:"250px",opacity:"0.5",height:"150px",width:"150px"});});停止动画$(selector).stop(stopAll,goToEnd);参数表示stopAll是否必须清除动画队列，默认为false可选goToEnd是否立即完成当前动画可选jQuery链接（Chaining）通过jQuery，动作/方法可以链接在一起语句运行多个jQuery方法（在同一个元素上因此浏览器不必多次查找相同的元素。$("#p1").css("color","red").slideUp(2000).slideDown(2000);//"p1"元素会先变成红色，然后向上滑动，然后向下滑动jQueryHTMLjQuery提供了一系列与DOM相关的方法，可以方便地访问和操作元素和属性。获取内容和属性获取内容text()设置或返回所选元素的文本内容html()设置或返回所选元素的内容（包括HTML标记）val()设置或返回表单字段的值获取属性attr()设置或返回选中属性的值//获取属性$('#test').attr('href')//设置属性$('#test').attr('href','http://www.baidu.com')$('#test').attr({href:'http://www.baidu.com',title:'百度'})//回调函数$('#test').attr('href',function(i,origValue){//i为当前元素在选中元素列表中的下标//origValue原值returnorigValue+'/jquery'})添加删除元素append()在被选元素末尾插入内容prepend()在被选元素开头插入内容after()在被选元素后插入内容before()在被选元素前插入内容remove()删除被选元素element(anditschildren)empty()从被选元素中移除子元素jQueryremove()方法还接受一个参数，允许您过滤要移除的元素。此参数可以是任何jQuery选择器语法。下面代码的意思是删除p元素中class名称为斜体的所有元素$('p').remove('.italic')获取并设置cssclassaddClass()为被选元素添加一个或多个classremoveClass()从被选元素中移除一个或多个类toggleClass()对被选元素添加/移除类切换操作css()设置或返回样式属性//返回样式属性$("p").css("background-color");//设置样式属性$("p").css("background-color","yellow");//或$("p").css({"background-color":"yellow"","font-size":"200%"});大小方法width()元素宽度height()元素高度innerWidth()包含填充宽度innerHeight()包含填充高度outerWidth()包含填充、边框宽度outerHeight()包含padding,borderHeightouterWidth(true)包含padding,border,marginWidthouterHeight(true)包含padding,border,marginHeight元素遍历祖先元素：parent()返回被选元素的直接父元素，该方法只会往上一级遍历DOM树。parents()返回所选元素的所有祖先元素，一直到文档的根元素()。parentsUntil()parentsUntil()方法返回两个给定元素之间的所有祖先元素。$(document).ready(function(){//div>ul>li>span$("span").parentsUntil("div");//返回ul和li});后代元素：children()返回被选元素的所有直接子元素。find()方法返回所选元素的后代元素，一直到最后一个后代。$(文档).ready(函数(){$("div").find("span");});兄弟元素：siblings()返回被选元素的所有兄弟元素。next()返回被选元素的下一个兄弟元素。nextAll()返回所选元素的所有后续同级元素。nextUntil()返回两个给定参数之间的所有后续同级元素。prev()返回被选元素的前一个兄弟元素。prevAll()返回所选元素之前的所有同级元素。prevUntil()返回两个给定参数之间的所有前面的同级元素。元素过滤：first()返回被选元素的第一个元素。last()返回被选元素的最后一个元素。eq()返回被选元素中指定索引号的元素。filter()方法允许您指定一个标准。不符合此条件的元素将从集合中移除，并返回匹配的元素。not()方法返回所有不符合条件的元素。
