jQuery进阶

一、jQuery操作元素的显示与隐藏

之前我们用过这种方法来操作元素的显示与隐藏：
$div.css({'display':'block'});显示
$div.css({'display':'none'});隐藏
还有写法让人惊讶的三目运算：$div.css({'display':$div.css('display')=='none' ?'block':'none'});

而在jQuery中，自带封装了相关方法

1.hide(speed,easing,callback)

$div.hide();
元素隐藏

2.show(speed,easing,callback)

$div.show();
元素显示

3.toggle(speed,easing,callback)

$div.tiggle();
自动执行显示或者隐藏，如果当前是隐藏，那么当执行toggle()时，元素会自动显示出来。
在这里要提醒一下，元素如果从显示转变到隐藏，原先占有的位置也会滕让出来，其他元素就会占用这片区域，直至该元素再次显示出来。
以上三个方法，都可以加入时间参数，单位毫秒，可以在规定时间内实现元素的显示与隐藏，加入时间参数以后你会发现，图像的显示是从左上角到右下角扩展的，而隐藏则是从右下角到左上角收缩的。callback则为方法执行结束后要调用的功能函数.

二、 jQuery操作元素的淡入淡出

1.fadeIn(speed,easing,callback)

$div.fadeIn(2000);
元素淡入

2.fadeOut

$div.fadeOut(2000);
元素淡出

3.fadeToggle()

$div.fadeToggle(2000);
元素会根据自身当前状态自行选择淡入还是淡出

4.fadeTo(speed,opacity,easing,callback)

$div.fadeTo(0.2);
设置元素的透明度，有两个参数，1.时间 2.透明度 0-1之间的数字
$div.fadeTo(1000,0.15);表示在1s内将元素从当前状态设置到透明度为0.15的状态

其实在淡入淡出的过程中，操作的这些属性依然是在操作元素标签的行内式属性，通过浏览器调试可以发现，当元素在显示的时候，调用淡出的方法，会先去设置元素的透明度，当透明度为零的时候，再去自动调用元素display属性，将其值设置为none，使得元素彻底的消失，这也就是为什么当元素在淡出的时候，随着透明度的下降，而次元素依然占用着当前的位置，直到透明度为零的时候，系统调用了display：none这个方法，才会使得元素消失，把占用的空间让出来。
而在淡入的过程中则是和但出现相反的，即系统先去调用display:block; 使得元素先想“显示出来”，但是由于透明度为零，依然不可见，然后再去设置元素的透明度。

三、 jQuery操作元素的特效卷起和展开

1.slideUp(speed,easing,callback)

$div.slideUp(2000);
卷起效果，2秒完成。

2.slideDown(speed,easing,callback)

$div.slideDown(2000);
展开效果，2秒完成。

3.slideToggle(speed,easing,callback)

$div.slideToggle(2000);
自动实现展开卷起效果，每次都是2秒完成

四、 jQuery操作标签自带属性以及操作标签中包裹内容

jQuery可以获取也可以设置标签自带属性或者自定义属性的值。

1.prpo()

获取标签自带属性值

$div.prop(‘自带属性名’);

设置自带标签属性值

$div.prop({‘自带属性名’:’属性值’});

切记，prop()只可以获取或者设置标签自带的属性值，而不能操作自定义属性的值

2.attr()

获取标签属性值

$div.attr(‘属性名’);

设置标签属性值

$div.attr({‘属性名’：’属性值’});
attr()不仅可以获取或者设置标签自带属性的值，还可以操作自定义的属性值

3.val()

操作标签的value属性

1.获取属性值
var sData=$div.val();
2.设置属性值
var sData=$div.val(‘123’);

4.操作标签中包裹的内容

在js中，我们通过$div.innerHTML()来获取标签包裹的内容，进而去修改里面的内容。在jQuery中，这个功能被封装成了另外一个方法html()
1.获取包裹内容
$div.html();
2.修改包裹内容
$div.html(‘修改内容放在这里’);
修改的内容会覆盖原先标签内包裹的内容
在这里补充一个知识：如果当前对象是一个jQuery对象，但是我依然想使用JS对象的innerHTml方法，这个该怎么做呢？ 其实只要把jQuery对象转化成JS对象就行了$div[0].innerHTML();这样就可以正常使用了

五、jQuery中的循环遍历

each()方法

each()方法为每个匹配元素规定要运行的函数
语法
$(selector).each(function(index,element))

参数分析：function（index，element） 这是个必不可少的参数
index—遍历时的索引
element—当前遍历到的元素(也可以使用’this’选择器)

六、jQuery中的鼠标事件

鼠标进入

$(selector).mouseover(function(){事件代码})；

鼠标离开

$(selector).mouseout(function(){事件代码})；
注意：鼠标事件会导致事件冒泡，在多次触发动画事件的时候，动画会累计，然后依次执行，也就出现了当你不在去触发动画事件时，动画还在执行着。