Web前端开发实训案例教程(初级)_第16章 jQuery：目录页面生成.pptx

第16章jQuery：目录页面生成;16.1 技能和知识点;目录页面左侧为目录列表，右侧为对应章节的内容。单击页面目录列表即可切换至右侧章节显示的内容。 功能需求如下图所示。;（1）项目名称： catalog。 （2）项目文件结构如表所示。 ;（3）在jQuery官方网站（/）下载jQuery的资源包（jquery.min.js文件）。 （4）定义二维数组存放目录和对应内容。 （5）遍历数组，将目录和内容显示在页面中。 （6）遍历目录列表，给目录绑定单击事件。 （7）单击目录，右侧显示对应的内容 ;16.4.1 引入jQuery 16.4.2 搭建页面 16.4.3 定义数组 16.4.4 显示目录内容 16.4.5 单击目录显示内容;（1）创建项目catalog。 （2）编写目录生成器页面文件catalog.html。 （3）下载jQuery资源包jquery.min.js文件，将相应文件放入项目的js文件夹中。 （4）引入jQuery的jquery.min.js文件。;1．创建目录及内容展示区域 创建一个ul无序列表作为目录，创建一个div作为章节内容展示区域。 2．页面效果 页面效果如右图所示。 ;3．为目录生成器页面添加样式 （1）在catalog.html的head标签中编写CSS样式，设置页面布局。 （2）页面效果如下图所示。 ;（1）在catalog.html文件中，引入js/jquery.min.js和js/catalog.js文件。 （2）在catalog.js文件中，编写文档就绪函数$(document).ready()。 ;（3）定义二维数组book，每个子元素都包含章节名称及章节内容。 ;1．使用for…in循环遍历数组 ;2．显示目录内容 （1）使用jQuery创建一个li元素并设置其内容。使用append()方法将该列表项元素插入ul无序列表末尾。 jQuery创建ul列表效果如右图所示。 ;2．显示目录内容 （2）使用jQuery创建一个p元素并设置其内容。使用append()方法将该列表项元素插入右侧内容末尾。 页面效果如右图所示。 ;2．显示目录内容 （3）默认选中目录第一章，只显示第一章内容，其他章内容隐藏。当循环变量i为0时，对应章节使用addClass()函数添加选中样式“menu”。当循环变量i为其他值时，对应内容使用隐藏样式“info”。 页面效果如右图所示。 ;1．绑定单击事件 使用each()方法遍历目录列表，给每一项绑定单击事件。其中$(this)指向当前循环元素。 ;2．单击目录显示对应内容 （1）单击当前目录添加menu样式类，使用siblings()方法遍历兄弟节点并使用removeClass()方法移除menu样式类。 单击其他章节后，页面效果如右图所示。 ;2．单击目录显示对应内容 （2）单击目录，使用eq()方法找到对应序号的内容并移除info样式类使其显示。其他的兄弟p元素加上info样式类隐藏。 （3）运行页面效果如右图所示。 第16章jQuery：目录页面生成;16.1 技能和知识点;目录页面左侧为目录列表，右侧为对应章节的内容。单击页面目录列表即可切换至右侧章节显示的内容。 功能需求如下图所示。;（1）项目名称： catalog。 （2）项目文件结构如表所示。 ;（3）在jQuery官方网站（/）下载jQuery的资源包（jquery.min.js文件）。 （4）定义二维数组存放目录和对应内容。 （5）遍历数组，将目录和内容显示在页面中。 （6）遍历目录列表，给目录绑定单击事件。 （7）单击目录，右侧显示对应的内容 ;16.4.1 引入jQuery 16.4.2 搭建页面 16.4.3 定义数组 16.4.4 显示目录内容 16.4.5 单击目录显示内容;（1）创建项目catalog。 （2）编写目录生成器页面文件catalog.html。 （3）下载jQuery资源包jquery.min.js文件，将相应文件放入项目的js文件夹中。 （4）引入jQuery的jquery.min.js文件。;1．创建目录及内容展示区域 创建一个ul无序列表作为目录，创建一个div作为章节内容展示区域。 2．页面效果 页面效果如右图所示。 ;3．为目录生成器页面添加样式 （1）在catalog.html的head标签中编写CSS样式，设置页面布局。 （2）页面效果如下图所示。 ;（1）在catalog.html文件中，引入js/jquery.min.js和js/catalog.js文件。 （2）在catalog.js文件中，编写文档就绪函数$(document).ready()。 ;（3）定义二维数组book，每个子元素都包含章节名称及章节内