jQuery 是一个 JavaScript 函数库,并 极大地简化了 JavaScript 编程。
优势：dom 操作和链接操作，动画效果
引入插件，(注！jquery-2.0以上版本不再支持IE 6/7/8)
1.所有操作都是选择器和行为；
$(selector).action();
2.选择器
$('#a li a');
3.事件//文档加载完成事件
window.onload = function(){}；
document.ready(function{});
jq里的事件 都把on 给去掉了：
$(selector).click(function{})；//单击事件
$(selector).mousemove(function{})；
$(selector).dblclick(function{})；//双击事件
如何简单使用：
效果：
可以接受参数 fast normal slow
显示隐藏 hide() show(); toggle();
淡入淡出 fadeIn() fadeOut(); fadeToggle()
淡入到某一个值 fadeTo(time,opacity)
滑动 slideUp() slideDown() ; slideToggle();
动画：animate({},speed,time);
//链式操作：在相同的元素上执行多次操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a{ 100px;height: 100px;background-color: red;}
.b{ 100px;height: 100px;background-color: blue;}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<script src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
$('.a').click(function(){
//点击显隐效果
$('.b').toggle();
})
$('.a').mouseover(function(){
$(this).css({'width':'200px','backgroundColor':'green'});
})
$('.a').mouseout(function(){
$(this).css({'100px','background':'black'});
})
$('.a').animate({left:'300px',height:"+=100px",'+=100px'},1000)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a{ 100px;height: 100px;background-color: red;}
.b{ 100px;height: 100px;background-color: blue;position: absolute;z-index: 100;}
.c{ 150px;height: 150px;background-color: green;}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<script src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
$('.a').click(function(){
//回调函数 ：动画完成之后执行的函数
$('.b').animate({left:'300px',opacity:'0.5'},1000,function(){
console.log(1);
});
//队列动画 ,
$('.b').animate({top:'300px',opacity:'1'},1000);
//delay()延迟
$('.c').delay(1000).animate({'200px','height':'200px','background':'red'},1000)
})
</script>
</body>
</html>
了解更多：http://www.w3school.com.cn/jquery/index.asp