设计内容展开与折叠类网课件.ppt
单元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.1BOM（浏览器对象模型）1浏览器对象模型的层次结构（1）第一层次。（2）第二层次。（3）第三层次。（4）第四层次。,2window 对象及其属性和方法,该对象常用的属性与方法如下。 （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文档。,3document对象及其属性和方法,document对象常用的属性与方法如下。 （1）all属性：表示文档中所有HTML标记符的数组。 （2）bgColor属性：用于获取或设置网页文档的背景颜色。,例如，document.bgColor=green; alert(document.bgColor); （3）fgColor：用于获取或设置网页文本颜色（前景色）。,（4）linkColor属性：用于获取或设置未单击过的链接颜色。 （5）alinkColor属性：用于获取或设置激活链接的颜色。 （6）vlinkColor属性：用于获取或设置已单击过链接的颜色。,（7）title属性：用于获取或设置网页文档的标题，等价于HTML的标记。例如，alert(document.title); （8）forms属性：表示网页文档中所有表单的数组。例如，document.forms0。,（9）write方法：其功能是将字符或变量值输出到窗口。 （10）close方法：将窗口关闭。,4screen对象及其属性,（1）width和height属性。（2）availWidth属性。（3）availHeight属性。,5location对象及其属性和方法,（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()方法：重新加载当前页。,6history对象及其属性和方法 （1）back()方法：加载历史列表中的前一个URL，这与在浏览器中单击“后退”按钮相同。 （2）forward()方法：加载历史列表中的下一个URL，这与在浏览器中单击“前进”按钮相同。7navigator对象,8.2jQuery的尺寸方法,各个尺寸方法对应的值如表8-6第3列所示。,表8-6jQuery常用的尺寸方法,【引导训练】任务8-3 应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效,【任务描述】 网页0803.html中折叠与展开网页内容特效的初始状态如图8-6所示，单击“收起”超链接时，折叠对应的网页内容，如图8-7所示。 单击“展开”超链接时，展开对应的网页内容。,图8-6折叠与展开网页内容特效的初始状态,图8-7单击“收起”超链接时折叠对应的网页内容,任务8-4 应用JavaScript的getElementsByTagName和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等方法设计网页内容折叠与展开特效,【任务描述】 网页0810.html中折叠与展开网页内容特效的初始状态如图8-20所示。 在该网页中单击 按钮隐藏对应的网页内容，单击 按钮显示对应的网页内容，如图8-21所示。,图8-20网页0810.html中折叠与展开网页内容特效的初始状态,图8-21网页0810.html中分别隐藏和显示相关内容的外观效果,
