jquery重点基础知识更新(续)第Ⅱ篇

九.事件切换

hover([over,]out)

十.动画队列及其停止排队方法

1.动画或效果队列一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

2.停止排队

stop()

(1)stop()方法用于停止动画或效果

(2)注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画

十一.淡入淡出效果

fadeIn([speed,[easing],[fn]])

fadeOut([speed,[easing],[fn]])

fadeToggle([speed,[easing],[fn]])

十二.自定义动画 animate

animate(params,[speed,[easing],[fn])

注意：params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法。

其余参数都可以省略。

十三.设置或获取元素固有属性值prop()

1.获取属性语法

prop("属性")

2.设置属性语法

prop("属性"，"属性值")

设置或获取元素自定义属性值attr()

1.获取属性语法

attr("属性")//类似原生getAttribute()

2.设置属性语法

attr("属性"，"属性值")//类似原生setAttribute()

十四.数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据就会被移除

十五.jquery内容文本值

1.普通元素内容html()（ 相当于原生innerHTML）

html()   //获取元素内容

html("内容")  // 设置元素内容

text()//文本内容

val()//表单值

十六.jquery 元素操作

1.遍历元素

如果想要给同类元素做不同操作，就要用到遍历

语法1

$("div").each(function(index,domELe){xxx：})

（1）each()方法遍历匹配的每一个元素。主要用dom处理，

（2）里面的回调函数有两个参数：index是每个参数的索引号；domEle是每个dom元素对象，不是jQuery对象

（3）所以要想使用jquery方法，需要给这个DOM元素转化为jQuery对象 $("domEle")

语法2

 $.each(object,function(index,element){xxxx: })

（1）$.each()方法可用于遍历任何对象 主要用于数据处理，比如数组，对象

（2）里面的函数有两个参数：index是每个元素的索引号：element遍历内容

2.创建元素

$("<li></li>");  动态的创建了一个<li>

3 添加元素

（1）.内部添加

element.append("内容")

把内容放入匹配元素内部最后面，类似原生的appendChild

element.prepend("内容")

把内容放入匹配元素内部最前面

（2）.外部添加

element.after("内容")    //把内容放入目标元素后面

element.before("内容")   //把内容放入目标元素前面

4.删除元素

element.remove()         //删除匹配的元素（本身）

element.empty()          //删除匹配的元素集合中所有的字节点

element.html("")         //清空匹配的元素里面的字节点

十七 jquery尺寸 位置操作

（1）尺寸

1.width()/height()                     获取设置元素 width和height大小

2.innerWidth/innerHeight               获取设置 width和height＋padding的大小

3.outerWidth/outerHeight               获取设置元素width和height+padding+border大小

4.outerWidth(true)/outerHeight(true)   获取设置元素width和height+padding+border+margin大小

（2）位置

1.offset()设置获取元素的偏移

(1)offset()方法设置或返回被选元素相对于文档的偏移坐标  与父级没有关系

(2)可以设置元素的偏移：offset({top:xxpx,left:xxpx})

2.position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果没有带有定位的父级 则以文档标准流为准

此方法不可以设置 只能用于获取

3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

scrollTop()方法设置或返回被选元素被卷去的头部