Jquery控制DIV

一、DIV的选取

1.jQuery函数ready()——文档加载完成 : 该函数表示当DOM载入就绪ready(fn)

2.jQuery函数mouseover()——鼠标悬停事件

3.jQuery函数hover()——鼠标悬停/离开切换事件

hover()可以对两个事件都做出响应(hover(over,out))，所以在hover()中使用了两个function参数，第一个是鼠标悬停事件，第二个是修正了的鼠标离开事件

4.jQuery函数click()——鼠标单击事件

5.jQuery函数toggle()——单击切换

该函数表示每次单击后依次调用函数。其语法形式如下：

toggle(fn1,fn2,[fn3,fn4,…])

在toggle()中添加了两个function()函数，第一个表示鼠标第一次单击层（如果后面还有多次单击的时候，则它表示奇数次单击）。第二个表示鼠标第二次单击层（它表示偶数次单击）

二，DIV的样式操作

1.jQuery函数height()——元素高度 该函数获取或者设置元素的高度，单位像素

2.jQuery函数width()——元素宽度 该函数获取或者设置元素的宽度，单位像素

3.jQuery函数css()——样式设定  该函数获取或设定匹配元素的CSS样式。 css(name) css(properties) css(name,value|fn)

4.jQuery函数animate()——自定义动画.该函数用于创建自定义动画。animate(params,[duration],[easing],[callback])

animate(params,options)

5 jQuery函数show()——显示元素 该函数显示隐藏的元素。show(),show(speed,[callback])
6 jQuery函数hide()——隐藏元素 该函数隐藏显示的元素。hide(),hide(speed,[callback])

7 转换函数toggle()，这个函数对于层的显示状态也可进行转换。toggle(),toggle(switch),toggle(speed,[callback])

8.slideUp()——滑动函数 该函数向上减小高度动态隐藏所有匹配的元素。slideUp(speed,[callback])

9.jQuery函数slideDown()——滑动函数 该函数向下增大高度动态显示所有匹配的元素。slideDown(speed,[callback])

10.slideToggle()——切换高度变化 该函数通过高度变化来切换所有匹配元素的可见性。slideToggle(speed,[callback])

11.fadeIn()——淡入效果 该函数通过不透明度变化实现元素的淡入。fadeIn(speed,[callback])

12.fadeOut()——淡出效果 该函数通过不透明度变化实现元素的淡出。fadeOut(speed,[callback])

13.fadeTo()——淡入淡出切换 该函数把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。
fadeTo(speed,opacity,[callback])

三，DIV的内容操作

1.empty()该函数删除匹配的元素集合中所有的子节点。empty()

2.replaceWith()——替换元素内容 
该函数将所有匹配的元素替换成指定的HTML或DOM元素。replaceWith(content)

3.replaceAll()——元素替换
该函数用匹配的元素替换掉所有selector匹配到的元素。replaceAll(selector)

4.clone()/clone(true)函数克隆匹配的DOM元素（及其事件）并且选中这些克隆的副本。

5.向内部添加函数1）append()—— 该函数向每个匹配的元素内部追加内容。 append(content|fn)
（2）prepend()—— 该函数向每个匹配的元素内部前置内容。prepend(content|fn)

 （3）appendTo()——该函数把所有匹配的元素追加到另一个指定的元素集合中。
appendTo(content)
（4）prependTo()—— 该函数把所有匹配的元素前置到另一个、指定的元素集合中。
prependTo(content) 

6.向外部添加函数

（1）after()——该函数在每个匹配的元素之后插入内容。after(content|fn)

（2）jQuery函数before()——该函数在每个匹配的元素之前插入内容。before(content|fn)

（3）jQuery函数insertAfter()——该函数把所有匹配的元素插入到另一个、指定的元素集合的后面。
（4）jQuery函数insertBefore()——该函数把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

       7.内容包装

所谓内容包装实际上是将DIV中的内容外层再包裹上一层标记。需要使用到jQuery的工具函数wrap()。例如，我们想                        利用动态包装操作将DIV中的原有文本转换成文字超链接

 该函数把所有匹配的元素用其他元素的结构化标记包裹起来。wrap(html) wrap(elem) wrap(fn)