CH10 jQuery HTML DOM优质教学课件.ppt

10.4.3jQuerytoggleClass()如果需要为元素切换（轮流删除/添加）某个CSS样式的类名称，只要使用toggleClass()方法即可。其语法格式如下：其中selector为任意有效的jQuery选择器，className参数位置需要填入CSS样式的类名称。$(selector).toggleClass(className)10.4.3jQuerytoggleClass()例如：上述代码表示为段落元素p删除或添加class=style01属性。同样可以一次性添加或删除多个class属性。例如：上述代码表示为段落元素p删除或添加class=style01style02属性。这里的CSS类名称可以填入任意数量。$(p).toggleClass(style01);$(p).toggleClass(style01style02);10.4.3jQuerytoggleClass()【例10-12】jQuery添加/删除CSS类的切换10.5jQuery尺寸jQuery还提供了一系列方法用于获取和设置元素或浏览器窗口的尺寸。如表所示。方法名称解释width()获取或设置元素的宽度（不包括内外边距和边框宽度）。height()获取或设置元素的高度（不包括内外边距和边框宽度）。innerWidth()获取或设置元素的宽度（包括内边距）。innerHeight()获取或设置元素的高度（包括内边距）。outerWidth()获取或设置元素的宽度（包括内边距和边框宽度）。outerHeight()获取或设置元素的高度（包括内边距和边框宽度）。10.5jQuery尺寸当以上这些方法不带任何参数值时，表示获取元素的尺寸。例如：上述代码表示获取div元素的宽度（不包含内外边距和边框宽度）。varwidth=$(div).width();10.5jQuery尺寸当width()或height()方法的参数值为数值时，可以用于设置元素的尺寸。例如：上述代码表示将div元素的宽度（不包含内外边距和边框宽度）设置为300像素。varwidth=$(div).width(300);10.5jQuery尺寸如果需要获取带有外边距的尺寸，可以使用outerWidth()或outerHeight()方法加上参数值true来表示。例如：上述代码表示获取div元素的宽度（包含内外边距和边框宽度）。varwidth=$(div).outerWidth(true);10.5jQuery尺寸【例10-13】jQuery获取元素尺寸10.6阶段案例：仿公众号留言板10.6.1案例需求10.6.2界面设计10.6.3逻辑实现10.6.4案例思考10.6.1案例需求背景介绍：留言板又被称为留言簿或留言本，也是目前互联网上使用最广泛的一种用户互相沟通交流的方式，例如日常的微博留言、微信公众号留言、微信朋友圈评论留言等。很多主流媒体、地方政府网站也开设了留言或咨询版块倾听人民心声、解决实际问题，例如人民日报在其官网上开设了领导留言板（如上图所示）,是专门为中央部委和地方各级党委政府主要负责同志搭建的网上群众工作平台,走好网上群众路线,开展网上群众工作。功能要求：使用jQuery制作一款仿公众号风格的简易留言板。10.6.2界面设计1. 整体布局本案例主要分成写留言和精选留言两个区域，其中写留言区域内部包含标题、多行文本框和按钮，精选留言区域包含标题、若干个留言列表竖着排列，每个列表项里面均包含用户的头像图片、用户昵称和具体留言内容。结构如图所示。10.6.2界面设计1. 整体布局创建一个HTML文件，文件名可自定义，例如MessageCenter.html。在HTML5中使用divid=msgCenter元素声明留言板区域，在其中嵌套divid=msgLeave和divid=msgList分别表示写留言区域和精选留言区域，相关代码如下：1. body2. !--标题--3. h3简易留言板效果/h34. !--水平线--5. hr/6. !--留言板区域--7. divid=msgCenter8. !--1写留言区域--9. divid=msgLeave10. !--1-1标题--11. h4写留言/h412. /div13. !--2精选留言区域--14. divid=msgList15. !--2-1标题--16. h4精选留言/h417. /div18. /div19. /bo