设计内容展开与折叠类网页特效

1、任务任务8-1 应用应用jQuery的的each和和hasClass等方法设计网页内容折等方法设计网页内容折叠与展开特效叠与展开特效 网页网页0801.html中折叠与展开网页内中折叠与展开网页内容的特效如图容的特效如图8-1所示，单击所示，单击 按钮，即按钮，即可折叠网页内容，单击可折叠网页内容，单击 按钮，即可展按钮，即可展开网页内容，如图开网页内容，如图8-2所示。所示。图图8-1网页网页0801.html中折叠与展开网中折叠与展开网页内容的特效页内容的特效图图8-2网页网页0801.html中网页内容的折中网页内容的折叠与展开效果叠与展开效果任务任务8-2 应用应用jQuery的的to

2、ggle和和css等方法实现网页内容多层折等方法实现网页内容多层折叠与展开特效叠与展开特效【知识必备】【知识必备】1浏览器对象模型的层次结构浏览器对象模型的层次结构（1）第一层次。）第一层次。（2）第二层次。）第二层次。（3）第三层次。）第三层次。（4）第四层次。）第四层次。 该对象常用的属性与方法如下。该对象常用的属性与方法如下。 （1）defaultStatus属性：用于设置或获取属性：用于设置或获取默认的状态栏信息。默认的状态栏信息。 （2）status属性：用于设置或获取窗口状属性：用于设置或获取窗口状态栏中的信息。态栏中的信息。 （3）self属性：表示当前属性：表示当前window

3、对象本身。对象本身。 （4）parent属性：表示当前窗口的父窗口。属性：表示当前窗口的父窗口。 （5）open（参数表）方法：打开一个具有指（参数表）方法：打开一个具有指定名称的新窗口。定名称的新窗口。 （6）close()方法：表示关闭当前窗口。方法：表示关闭当前窗口。 （7）moveTo(x , y)方法：表示移动当前窗口。方法：表示移动当前窗口。 （8）resizeTo(height , width)方法：表示调整当方法：表示调整当前窗口的尺寸。前窗口的尺寸。 （9）resizeBy(w , h)方法：表示窗口宽度方法：表示窗口宽度增大增大w，高度增大，高度增大h。 （10）showM

4、odalDialog()方法：在一个方法：在一个模式窗口中显示指定的模式窗口中显示指定的HTML文档。文档。 document对象常用的属性与方法如对象常用的属性与方法如下。下。 （1）all属性：表示文档中所有属性：表示文档中所有HTML标标记符的数组。记符的数组。 （2）bgColor属性：用于获取或设置网页属性：用于获取或设置网页文档的背景颜色。文档的背景颜色。 例如，例如，document.bgColor=green; alert(document.bgColor); （3）fgColor：用于获取或设置网页文本：用于获取或设置网页文本颜色（前景色）。颜色（前景色）。 （4）linkC

5、olor属性：用于获取或设置未属性：用于获取或设置未单击过的链接颜色。单击过的链接颜色。 （5）alinkColor属性：用于获取或设置激属性：用于获取或设置激活链接的颜色。活链接的颜色。 （6）vlinkColor属性：用于获取或设置已属性：用于获取或设置已单击过链接的颜色。单击过链接的颜色。 （7）title属性：用于获取或设置网页文档属性：用于获取或设置网页文档的标题，等价于的标题，等价于HTML的的标记。标记。例如，例如，alert(document.title); （8）forms属性：表示网页文档中所有表属性：表示网页文档中所有表单的数组。单的数组。例如，例如，document.f

6、orms0。 （9）write方法：其功能是将字符或变量方法：其功能是将字符或变量值输出到窗口。值输出到窗口。 （10）close方法：将窗口关闭。方法：将窗口关闭。（1）width和和height属性。属性。（2）availWidth属性。属性。（3）availHeight属性。属性。 （1）hostname属性：返回属性：返回Web主机的域名。主机的域名。 （2）path属性：返回当前页面的路径和文件属性：返回当前页面的路径和文件名。名。 （3）port属性：返回属性：返回Web主机的端口（主机的端口（80或或443）。）。 （4）protocol属性：返回所使用的属性：返回所使用的Web

7、协议协议 （http:/或或https:/）。）。 （5）href属性：设置或返回当前页面的属性：设置或返回当前页面的URL。（6）pathname属性：返回属性：返回URL的路径名。的路径名。（7）assign()方法：加载新的文档。方法：加载新的文档。（8）reload()方法：重新加载当前页。方法：重新加载当前页。6history对象及其属性和方法对象及其属性和方法 （1）back()方法：加载历史列表中的前一方法：加载历史列表中的前一个个URL，这与在浏览器中单击，这与在浏览器中单击“后退后退”按按钮相同。钮相同。 （2）forward()方法：加载历史列表中的下方法：加载历史列表中的

8、下一个一个URL，这与在浏览器中单击，这与在浏览器中单击“前进前进”按钮相同。按钮相同。7navigator对象对象 各个尺寸方法对应的值如表各个尺寸方法对应的值如表8-6第第3列所示。列所示。尺寸方法名称尺寸方法名称示例代码示例代码代码对应的尺寸值代码对应的尺寸值width()$(#div1).width()300height()$(#div1).height()100innerWidth()$(#div1).innerWidth()320innerHeight()$(#div1).innerHeight()120outerWidth()$(#div1).outerWidth()322out

9、erHeight()$(#div1).outerHeight()122outerWidth(true)$(#div1).outerWidth(true)328outerHeight(true)$(#div1).outerHeight(true)128表表8-6jQuery常用的尺寸方法常用的尺寸方法【引导训练】【引导训练】任务任务8-3 应用应用DOM的的onclick事事件和件和parentNode属性设计网页属性设计网页内容折叠与展开特效内容折叠与展开特效 【任务描述】【任务描述】 网页网页0803.html中折叠与展开网页内容特效中折叠与展开网页内容特效的初始状态如图的初始状态如图8-6

10、所示，单击所示，单击“收起收起”超链接超链接时，折叠对应的网页内容，如图时，折叠对应的网页内容，如图8-7所示。所示。 单击单击“展开展开”超链接时，展开对应的网页超链接时，展开对应的网页内容。内容。图图8-6折叠与展开网页内容特效的初始状态折叠与展开网页内容特效的初始状态图图8-7单击单击“收起收起”超链接时折叠对超链接时折叠对应的网页内容应的网页内容【任务描述】【任务描述】 网页网页0804.html中折叠与展开网页内容特效中折叠与展开网页内容特效的初始状态如图的初始状态如图8-8所示，单击所示，单击 按钮，即可展按钮，即可展开对应的网页内容，如图开对应的网页内容，如图8-9所示。所示。

11、单击单击 按钮，即可隐藏对应的网页内容。按钮，即可隐藏对应的网页内容。 【任务描述】【任务描述】 网页网页0805.html中折叠与展开网页内容中折叠与展开网页内容特效的初始状态如图特效的初始状态如图8-10所示。所示。 单击单击“展开展开”超链接会展开隐藏的网超链接会展开隐藏的网页内容，如图页内容，如图8-11所示。此时单击所示。此时单击“收起收起”按钮会折叠部分网页内容。按钮会折叠部分网页内容。图图8-10网页网页0805.html中折叠与展开中折叠与展开网页内容特效的初始状态网页内容特效的初始状态图图8-11在网页在网页0805.html中展开隐藏的网页内容中展开隐藏的网页内容 【任务描

12、述】【任务描述】 网页网页0806.html中折叠与展开网页内容中折叠与展开网页内容特效的初始状态如图特效的初始状态如图8-12所示，单击超链所示，单击超链接则显示对应的网页内容，如图接则显示对应的网页内容，如图8-13所示。所示。图图8-12网页网页0806.html中折叠与展开中折叠与展开网页内容特效的初始状态网页内容特效的初始状态图图8-13在网页在网页0806.html中单击超链中单击超链接显示对应的网页内容接显示对应的网页内容 【同步训练】【同步训练】任务任务8-7 应用应用DOM的的getElementById方法和方法和className属性设计网页内容属性设计网页内容折叠与展开

13、特效折叠与展开特效 【任务描述】【任务描述】 网页网页0807.html中折叠与展开网页内容特效中折叠与展开网页内容特效的初始状态如图的初始状态如图8-14所示，单击超链接所示，单击超链接“投影投影机机”时展开相应的网页内容，如图时展开相应的网页内容，如图8-15所示。所示。图图8-14网页网页0807.html中折叠与展开中折叠与展开网页内容特效的初始状态网页内容特效的初始状态图图8-15在网页在网页0807.html中单击超链中单击超链接接“投影机投影机”时展开相应的网页内容时展开相应的网页内容【任务描述】【任务描述】 网页网页0808.html中折叠与展开网页内中折叠与展开网页内容特效的

14、初始状态如图容特效的初始状态如图8-16所示，鼠标所示，鼠标指针指向指针指向 按钮时，自动显示如图按钮时，自动显示如图8-17所所示的库存地区列表。示的库存地区列表。图图8-16网页网页0808.html中折叠与展开中折叠与展开网页内容特效的初始状态网页内容特效的初始状态图图8-17网页网页0808.html中自动显示库存地区列表中自动显示库存地区列表【任务描述】【任务描述】 网页网页0809.html中折叠与展开网页内中折叠与展开网页内容特效的初始状态如图容特效的初始状态如图8-18所示，单击所示，单击 按钮时，展开隐藏的部分内容，如图按钮时，展开隐藏的部分内容，如图8-19所示。所示。图图8-18网页网页0809.html中折叠与展开中折叠与展开网页内容特效的初始状态网页内容特效的初始状态图图8-19在网页在网页0809.html中展开隐藏的部分内容中展开隐藏的部分内容 【任务描述】【任务描述】 网页网页0810.html中折叠与展开网页内容