jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。
一、jQuery介绍
$(document).ready(function(){})
类似window.onload 等待dom文件加载完开始执行
区别：window.onload只能执行一次，$(document).ready()：可以执行多次
JavaScript脚本语言也可以放在jQuery容器内使用
jQuery的优点：
简洁的写法，write less,do more，即写的更少，实现的功能更多
二、jQuery语法
jQuery的基本语法
$(document).ready(function(){
$(选择器).事件(function(){
$(选择器).效果(参数); //效果(参数,[callback]),callback:回调函数function(){}
})
})
三、jQuery的效果
css({属性:"值",属性:"值",...})：css样式
show(speed,[callback])：隐藏显示 speed：fast,slow,normal,1000
hide(speed,[callback])：显示隐藏
toggle(speed,[callback])：切换
slideToggle(speed,[callback])：上下滑动，实现切换
slideUp(speed,[callback])：向上滑动
slideDown(speed,[callback])：向下滑动
addClass('类名称')：为选择器添加css样式类 类名不加‘.’
removeClass('类名称')：为元素去掉css样式类
fadeIn(speed,[callback])：淡入
fadeOut(speed,[callback])：淡出
fadeTo(speed,opacity,[callback])：变淡指定效果
animate({params},duration,easing,[callback])：动画
params：变化后的css样式 {height:300}
duration：变化速度用毫秒
easing：变化效果名称，用插件
获取元素内的html内容：$(选择器).html();
给指定元素设置html内容：$(选择器).html('内容');
获取元素内的文本内容：$(选择器).text();
设置元素内的文本：$(选择器).text('文本');
html和text的区别：
html：选择器里面的的所有元素
text：文本内容，不包括标签
四、jQuery选择器
基本选择器：
标记选择器：$('tagName')
类选择器：$('.className')
ID选择器：$("#id")
*选择器：$('*');所有的元素
多个选择器：$('div,p,ul')
层次选择器：
后代选择器：$('ul li a')所有的子元素（子，孙，子子孙孙）
子代选择器：$('ul>li')只有子代元素（子）
prev+next：$('li+li')或$(选择器).next(); 同辈中的下一个
prev`sibling：$('li`li')或$(选择器).sibling(); 同辈，不包括自己
五、jQuery元素的查找与筛选
eq(index)：指定第N个元素，从0开始算
first()：第一个元素
last()：最后一个元素
find()：查找所有与指定元素匹配的后代元素
children(参数)：子元素 //加参数就是第几个子元素，不加就是所有
parent()：父元素
siblings()：出自己以外的同辈元素
选项卡案例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> dl,dt,dd,ul,li,div{margin:0;padding:0;list-style:none;display: block;} .box{320px;border:1px solid #ccc;margin:50px auto;height:340px;} .box dt{height:30px;border-bottom: solid 1px #ccc;} .box dt ul li{80px;line-height:30px;text-align: center;background:#eee;float: left;} .box dt ul li.cli{background:#333;color:#fff;} .box dd div{320px;height:300px;line-height:320px;text-align:center;font-size:40px;display: none;} </style> <script src="js/jquery1.9.min.js"></script> <script> $(document).ready(function(){ $(".box dt ul li").click(function(){ $(this).addClass("cli").siblings().removeClass("cli"); var $k=$(".box dt ul li").index(this); $(".box dd div").eq($k).css({display:"block"}).siblings().css({display:"none"}); }) }) </script> </head> <body> <dl class="box"> <dt> <ul> <li class="cli">新闻</li> <li>电影</li> <li>娱乐</li> <li>体育</li> </ul> </dt> <dd> <div style="display: block;">新闻</div> <div>电影</div> <div>娱乐</div> <div>体育</div> </dd> </dl> </body> </html>