设计内容展开与折叠类网课件

单元8设计内容展开与折叠类网页特效任务8-1应用jQuery的each和hasClass等方法设计网页内容折叠与展开特效

网页0801.html中折叠与展开网页内容的特效如图8-1所示，单击

按钮，即可折叠网页内容，单击

按钮，即可展开网页内容，如图8-2所示。图8-1网页0801.html中折叠与展开网页内容的特效图8-2网页0801.html中网页内容的折叠与展开效果任务8-2应用jQuery的toggle和css等方法实现网页内容多层折叠与展开特效

【知识必备】 8.1

BOM（浏览器对象模型）1．浏览器对象模型的层次结构（1）第一层次。（2）第二层次。（3）第三层次。（4）第四层次。2．window对象及其属性和方法

该对象常用的属性与方法如下。

（1）defaultStatus属性：用于设置或获取默认的状态栏信息。

（2）status属性：用于设置或获取窗口状态栏中的信息。

（3）self属性：表示当前window对象本身。

（4）parent属性：表示当前窗口的父窗口。

（5）open（参数表）方法：打开一个具有指定名称的新窗口。

（6）close()方法：表示关闭当前窗口。

（7）moveTo(x,y)方法：表示移动当前窗口。

（8）resizeTo(height,width)方法：表示调整当前窗口的尺寸。

（9）resizeBy(w,h)方法：表示窗口宽度增大w，高度增大h。（10）showModalDialog()方法：在一个模式窗口中显示指定的HTML文档。3．document对象及其属性和方法 document对象常用的属性与方法如下。

（1）all属性：表示文档中所有HTML标记符的数组。

（2）bgColor属性：用于获取或设置网页文档的背景颜色。

例如，document.bgColor="green";alert(document.bgColor);

（3）fgColor：用于获取或设置网页文本颜色（前景色）。

（4）linkColor属性：用于获取或设置未单击过的链接颜色。

（5）alinkColor属性：用于获取或设置激活链接的颜色。

（6）vlinkColor属性：用于获取或设置已单击过链接的颜色。

（7）title属性：用于获取或设置网页文档的标题，等价于HTML的<title>标记。

例如，alert(document.title);

（8）forms属性：表示网页文档中所有表单的数组。

例如，document.forms[0]。

（9）write方法：其功能是将字符或变量值输出到窗口。

（10）close方法：将窗口关闭。4．screen对象及其属性（1）width和height属性。（2）availWidth属性。（3）availHeight属性。5．location对象及其属性和方法

（1）hostname属性：返回Web主机的域名。

（2）path属性：返回当前页面的路径和文件名。

（3）port属性：返回Web主机的端口（80或443）。

（4）protocol属性：返回所使用的Web协议

（http://或https://）。

（5）href属性：设置或返回当前页面的URL。（6）pathname属性：返回URL的路径名。（7）assign()方法：加载新的文档。（8）reload()方法：重新加载当前页。6．history对象及其属性和方法

（1）back()方法：加载历史列表中的前一个URL，这与在浏览器中单击“后退”按钮相同。

（2）forward()方法：加载历史列表中的下一个URL，这与在浏览器中单击“前进”按钮相同。7．navigator对象8.2jQuery的尺寸方法

各个尺寸方法对应的值如表8-6第3列所示。尺寸方法名称示例代码代码对应的尺寸值width()$("#div1").width()300height()$("#div1").height()100innerWidth()$("#div1").innerWidth()320innerHeight()$("#div1").innerHeight()120outerWidth()$("#div1").outerWidth()322outerHeight()$("#div1").outerHeight()122outerWidth(true)$("#div1").outerWidth(true)328outerHeight(true)$("#div1").outerHeight(true)128表8-6

jQuery常用的尺寸方法

【引导训练】任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效

【任务描述】

网页0803.html中折叠与展开网页内容特效的初始状态如图8-6所示，单击“收起”超链接时，折叠对应的网页内容，如图8-7所示。

单击“展开”超链接时，展开对应的网页内容。图8-6折叠与展开网页内容特效的初始状态图8-7单击“收起”超链接时折叠对应的网页内容任务8-4应用JavaScript的getElementsByTag

Name和className等方法或属性设计网页内容

折叠与展开特效

【任务描述】

网页0804.html中折叠与展开网页内容特效的初始状态如图8-8所示，单击

按钮，即可展开对应的网页内容，如图8-9所示。

单击

按钮，即可隐藏对应的网页内容。任务8-5应用jQuery的bind和css等方法设计网页内容折叠与展开特效

【任务描述】

网页0805.html中折叠与展开网页内容特效的初始状态如图8-10所示。

单击“展开”超链接会展开隐藏的网页内容，如图8-11所示。此时单击“收起”按钮会折叠部分网页内容。图8-10网页0805.html中折叠与展开网页内容特效的初始状态图8-11在网页0805.html中展开隐藏的网页内容任务8-6应用jQuery的slideUp和slideDown等方法设计网页内容折叠与展开特效

【任务描述】

网页0806.html中折叠与展开网页内容特效的初始状态如图8-12所示，单击超链

接则显示对应的网页内容，如图8-13所示。图8-12网页0806.html中折叠与展开网页内容特效的初始状态图8-13在网页0806.html中单击超链接显示对应的网页内容

【同步训练】任务8-7应用DOM的getElementById方法和className属性设计网页内容折叠与展开特效

【任务描述】

网页0807.html中折叠与展开网页内容特效的初始状态如图8-14所示，单击超链接“投影机”时展开相应的网页内容，如图8-15所示。图8-14网页0807.html中折叠与展开网页内容特效的初始状态图8-15在网页0807.html中单击超链接“投影机”时展开相应的网页内容任务8-8应用jQuery的hover和click事件设计网页内容折叠与展开特效

【任务描述】

网页0808.html中折叠与展开网页内容特效的初始状态如图8-16所示，鼠标指针指向

按钮时，自动显示如图8-17所示的库存地区列表。图8-16网页0808.html中折叠与展开网页内容特效的初始状态图8-17网页0808.html中自动显示库存地区列表任务8-9应用jQuery的toggle和hasClass方法设计网页内容折叠与展开特效【任务描述】

网页0809.html中折叠与展开网页内容特效的初始状态如图8-18所示，单击

按钮时，展开隐藏的部分内容，如图8-19所示。图8-18网页0809.html中折叠与展开网页内容特效的初始状态图8-19在网页0809.html中展开隐藏的部分内容任务8-10应用jQuery的data和animate等方法设计网页内容折叠与展开特效