jquery网页开发实例精解教学-第3章div层控制

第3章DIV层的控制在HTML+CSS的设计模式中，DIV这个标记一直起着很大的作用，jQuery在对页面元素操作时，很多情况下都有DIV直接或者间接参与。本章我们讲解jQuery如何操作DIV，为后续章节的学习打下基础。3.1DIV的鼠标选取jQuery对于DIV的鼠标选取可以通过鼠标的悬停和鼠标单击来实现。在jQuery的众多应用中能够准确选择DIV是关键。3.1.1利用鼠标悬停实现DIV的选取一般在动态菜单或图片切换等应用中需要使用这种效果。其中，需要使用jQuery的函数ready()、mouseover()。我们使用ready()函数在文档加载完成后注册DIV的鼠标悬停事件，在鼠标悬停事件中做出响应。1.jQuery函数ready()——文档加载完成该函数表示当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。其语法形式如下：ready(fn)2.jQuery函数mouseover()——鼠标悬停事件该函数在每一个匹配元素的鼠标悬停事件中绑定一个处理函数。其语法形式如下：mouseover(fn)3.jQuery函数hover()——鼠标悬停/离开切换事件该方法模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）。其语法形式如下：hover(over,out)因为hover()可以对两个事件都做出响应，所以在hover()中使用了两个function参数，第一个是鼠标悬停事件，第二个是修正了的鼠标离开事件。当鼠标悬停在DIV上时效果如图1所示，当鼠标离开DIV时效果如图2所示。图1图23.1.2利用鼠标单击实现DIV的选取有时我们不希望鼠标悬停就选取一个DIV，而是当鼠标对DIV单击时选择它。如果是这样我们需要使用鼠标的单击事件来操作对DIV的选取。其中，需要使用的jQuery函数ready()、click()。使用ready()函数在文档加载完成后注册DIV的鼠标单击事件，在鼠标单击事件中做出响应。1.jQuery函数click()——鼠标单击事件该函数触发每一个匹配元素的单击事件。其语法形式如下：click([fn])效果如图所示。在jQuery中还有一个事件响应函数toggle()。它是对鼠标的单击不同次数进行响应，而不仅仅是单击事件。当发生多次单击的时候，每次单击事件都可以用这个函数做处理操作，它和上面所介绍的hover()函数同属于事件切换函数。这里我们想要实现当鼠标第一次单击DIV的时候选取，第二次单击DIV的时候撤销选取。

2.jQuery函数toggle()——单击切换该函数表示每次单击后依次调用函数。其语法形式如下：toggle(fn1,fn2,[fn3,fn4,…])在toggle()中添加了两个function()函数，第一个表示鼠标第一次单击层（如果后面还有多次单击的时候，则它表示奇数次单击）。第二个表示鼠标第二次单击层（它表示偶数次单击）。第一次单击效果如图1所示，第二次单击效果如图2所示。图1图23.2DIV层的尺寸jQuery对于DIV层的尺寸主要是动态读取和动态修改。本节我们介绍通过jQuery控制DIV的尺寸。3.2.1jQuery动态读取DIV层的尺寸jQuery在动态读取DIV的高和宽的时候需要两个固有函数height()、width()。这两个函数分别获取匹配元素对象的高和宽。我们可以在DIV的单击事件中使用这两个函数来取值。1.jQuery函数height()——元素高度该函数获取或者设置元素的高度，单位像素。其语法形式如下：height([val])2.jQuery函数width()——元素宽度该函数获取或者设置元素的宽度，单位像素。其语法形式如下：width([val])效果如图所示。3.jQuery函数css()——样式设定该函数获取或设定匹配元素的CSS样式。其语法格式如下：css(name)css(properties)css(name,value|fn)3.2.2jQuery动态修改DIV层的尺寸对于jQuery动态修改DIV层的尺寸同样可以使用前面提到的尺寸函数，只是这里需要将参数值带给这两个函数。在下面的例子中用两个文本框接收用户动态输入DIV的宽和高，并当用户单击“修改尺寸”按钮时，修改DIV的尺寸。1.Javascript功能实现HTML代码和CSS样式参考光盘内容，我们直接看一下Javascript功能实现，效果如图1和图2所示。图1图22.通过css()函数修改DIV尺寸与上面获取尺寸操作同样，也可以通过css()函数来修改DIV的尺寸。3.jQuery函数animate()——自定义动画该函数用于创建自定义动画。其语法形式如下：animate(params,[duration],[easing],[callback])animate(params,options)3.3层的显示与隐藏本节介绍如何利用jQuery控制DIV的显示与隐藏。实际上DIV的显示与隐藏可以通过多种途径实现。我们从最简单介绍开始。3.3.1利用jQuery的显示与隐藏函数实现1.显示和隐藏函数在jQuery的众多函数中，专门提供了操作元素显示和隐藏的函数show()、hide()。我们可以直接使用这两个函数来操作。（1）jQuery函数show()——显示元素该函数显示隐藏的元素。其语法形式如下：show()show(speed,[callback])（2）jQuery函数hide()——隐藏元素该函数隐藏显示的元素。其语法形式如下：hide()hide(speed,[callback])页面初始加载及按钮的偶数次单击时效果如图1所示，奇数次单击“显示/隐藏”按钮后效果如图2所示。图1图2

刚才的例子使用了显示与隐藏函数的基本形式。实际上这两个函数还有变形形式，就是添加了显示与隐藏速度的设定及附加了回调函数。我们可以将上述代码修改，效果如图1和图2所示。图1图22.转换函数前面我们讲解了转换函数toggle()，这个函数对于层的显示状态也可进行转换。其语法形式如下：toggle()toggle(switch)toggle(speed,[callback])效果如图1和图2所示。图1图2

3.3.2利用jQuery的滑动效果实现在jQuery的众多特效函数中，我们可以利用滑动函数来操作DIV的显示与隐藏。1.jQuery函数slideUp()——滑动函数该函数向上减小高度动态隐藏所有匹配的元素。其语法形式如下：slideUp(speed,[callback])2.jQuery函数slideDown()——滑动函数该函数向下增大高度动态显示所有匹配的元素。其语法形式如下：slideDown(speed,[callback])代码中的slideUp()和slideDown()这两个函数是实现jQuery特效函数的向上滑动与向下滑动。在这里给出了效果的持续时间和附加回调函数，效果如图1和图2所示。图1图23.jQuery函数slideToggle()——切换高度变化该函数通过高度变化来切换所有匹配元素的可见性。其语法形式如下：slideToggle(speed,[callback])3.3.3利用jQuery的淡入淡出效果实现前面提到的滑动效果是通过改变DIV的高来实现显示与隐藏操作。我们还可以使用改变DIV的透明度来实现显示与隐藏。这需要使用到jQuery的淡入淡出函数fadeIn()、fadeout()。1.jQuery函数fadeIn()——淡入效果该函数通过不透明度变化实现元素的淡入。其语法形式如下：fadeIn(speed,[callback])2.jQuery函数fadeOut()——淡出效果该函数通过不透明度变化实现元素的淡出。其语法形式如下：fadeOut(speed,[callback])上述代码实现的效果如图1和图2所示。图1图23.jQuery函数fadeTo()——淡入淡出切换该函数把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。其语法形式如下：fadeTo(speed,opacity,[callback])3.4DIV内的内容控制对于DIV的内容控制我们介绍这样几种操作，内容清空、内容替换、内容复制、内容添加、内容包装等操作。这些操作都涉及到jQuery的文档处理方法。3.4.1内容清空首先来介绍DIV中内容的清空。在jQuery的文档操作中具有清空文档子内容的方法empty()。这里可以利用它来完成我们的内容清空。该函数删除匹配的元素集合中所有的子节点。其语法形式如下：empty()HTML代码和CSS样式参考光盘内容，直接看一下Javascript功能实现：1<scripttype="text/javascript">2 $(function(){3 $("#update").click(function(){4 $("#div1").empty(); //清空元素内容5 });6 });7</script>当我们单击页面上的按钮时，jQuery就会清空DIV下所有的子内容，效果如图1和图2所示。图1图2

3.4.2内容替换内容替换操作使用了jQuery工具函数中的replaceWith()函数。这个函数将参数携带的内容替换掉匹配元素的内容。1.jQuery函数replaceWith()——替换元素内容该函数将所有匹配的元素替换成指定的HTML或DOM元素。其语法形式如下：replaceWith(content)当我们单击按钮时，DIV原有内容被替换成粗体的Paragraph，效果如图所示。2.jQuery函数replaceAll()——元素替换该函数用匹配的元素替换掉所有selector匹配到的元素。其语法形式如下：replaceAll(selector)3.4.3内容复制jQuery进行内容复制是使用了clone()这个函数，它将匹配的所有元素复制出来并返回他们。该函数克隆匹配的DOM元素（及其事件）并且选中这些克隆的副本。其语法形式如下：clone()clone(true)代码实现了单击按钮后将DIV中的复制出来并将其文本内容显示到文本区域内，效果如图所示。下面利用前面的替换函数和这里介绍的复制函数组合起来使用。这个例子所要达到的目的是首先复制出DIV原有内容，然后在复制出来的对象上进行文本替换，然后再将复制出来的对象替换回原有DIV中的内容。具体效果如图所示。

3.4.4内容添加jQuery本身对于内容的添加分成内部添加和外部添加两种，每种方式又都有前后两种添加位置。1.向内部添加函数首先，来看内部添加如何操作。DIV的内部添加需要用到jQuery的append()、prepend()函数。这两个函数分别负责在DIV内容的后端添加内容和前端添加内容。（1）jQuery函数append()——添加元素内容该函数向每个匹配的元素内部追加内容。其语法形式如下：append(content|fn)（2）jQuery函数prepend()——添加元素内容该函数向每个匹配的元素内部前置内容。其语法形式如下：prepend(content|fn)下面，用一个例子来演示任何向DIV中添加内容。HTML代码和CSS样式参考光盘内容，我们直接看一下Javascript功能实现，代码的执行效果如图所示。（3）jQuery函数appendTo()——添加元素内容该函数把所有匹配的元素追加到另一个指定的元素集合中。其语法形式如下：appendTo(content)（4）jQuery函数prependTo()——添加元素内容该函数把所有匹配的元素前置到另一个、指定的元素集合中。其语法形式如下：prependTo(content)我们可以修改上面的代码，效果如图所示。2.向外部添加函数刚才见到了如何使用内部添加函数向DIV中添加内容。下面来看一下利用外部添加函数的实现。外部添加函数包括after()、before()。这两个函数表示对当前匹配的元素做添加操作。（1）jQuery函数after()——外部添加元素内容该函数在每个匹配的元素之后插入内容。其语法形式如下：after(content|fn)（2）jQuery函数before()——外部添加元素内容该函数在每个匹配的元素之前插入内容。其语法形式如下：before(content|fn)我们再利用这两个函数的时候需要先获取DIV内的子元素才可进行操作。利用获取DIV内的子元素，并在子元素外添加内容来实现在DIV中添加内容，效果如图所示。（3）jQuery函数insertAfter()——外部插入元素内容该函数把所有匹配的元素插入到另一个、指定的元素集合的后面。其语法形式如下：insertAfter