js引入

1、引入<script src=”jquery.js”></script>

2、选择器：同css选择器；

$(‘#id’)；$(‘p’);$(‘[href=”#”]’);$(‘.cla’)

3、事件

$(‘p’).click(function(){});

mouseover/mouseout/hover

hover(function(){},function(){});

$(this)的使用，指当前元素

4、获取和赋值

就是操作DOM的能力：

获取内容:text();html();val();

设置赋值：text(val);html(val);val(val);

获取属性：attr(‘href’);

设置赋值：attr(‘href’,val);

css()设置或返回样式的属性；

返回属性css(‘proname’)

设置单个属性css(‘proname’,’val’)

设置多个属性css({‘pr1’:’val1’,’pr2’:’val2’})

5、Class

$(div).addClass()向被选元素添加一个或多个类；多个空格分开

$(div).removeClass()从被选元素删除一个或多个类；

$(div).hasClass()判断是否有某个clss名;

$(div).toggleClass();

6、尺寸

$(div).width();$(div).height();（内容的宽高）

$(div).innerWidth()宽度（包括内边距）

$(div).innerHeight()

$(div).outerWidth()宽度（包括内边距和边框）

$(div).outerHeight()

7、添加删除元素

$(div).append(要插入的内容):在被选元素结尾插入内容

$(div).prepend(要插入的内容):在被选元素的开头插入内容

$(div).after(要插入的内容):在被选元素之后插入内容；

$(div).before(要插入的内容)：在被选元素之前插入内容；

$(div).remove():删除被选元素（及其子元素）

$(div).empty():删除被选元素的子元素；

$(body).on(‘click’,’div’,function(){});动态事件

8、遍历

祖先:$(div).parent();$(div).parents()

后代:$(div).children();$(div).find(‘p’)

同胞:$(div).siblings();$(div).next();$(div).prev();

过滤：$(div).first()首个元素；$(div).last()最后一个元素；$(div).eq()索引号元素

9、隐藏/显示

$(‘div’).hide();$(‘div’).show();$(‘div’).toggle();

10、淡入淡出

$(div).fadeIn(speed,callback);淡入

$(div).fadeOut(speed,callback);淡出

$(div).fadeToggle(speed,callback);淡入淡出切换；

$(div).fadeTo(speed,opacity,callback);渐变为给定的不透明度

11、滑动

$(div).slideDown(speed,callback);向下滑动

$(div).slideUp(speed,callback);向上滑动

$(div).slideToggle(speed,callback);滑动之间切换

12、动画

$(div).animate({params},speed,callback);

可以使用相对值：

$(div).animate({

left:’200px’,

height: ‘+=150px’,

});

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）

队列功能：多个不同的动画会按照队列顺序执行；

$(div).stop()用于动画或效果完成前对它们进行停止；