文献：案例《电影排行榜》

     文献：案例《电影排行榜》

案例内容大致是，多个电影名整齐排列在屏幕中央，有明显的边框将他们划分，鼠标移入某个边框内显示该电影的宣传海报和电影简介，移出后隐藏。
鼠标移入 3肥龙过江 中

主要技术：js、jq
页面：div包裹的 标题h2（电影排行榜为标题） 、主要内容ul（作父级元素）和js中插入的li标签
样式不做解释
代码部分：
1、页面代码；

页面信息在js部分里，通过数组的方式保存

2、原生js；
主要内容有多个，每个都具有序号、标题、海报、简介四个部分，则声明四个变量来存储信息

这四个变量组成数值，不同的内容有不同的信息就有不同的数值，不同数值组成数组、可以直接选到使用

编辑js插入li标签部分，此部分在页面加载后执行。
原生js：提前声明变量，通过ID找到主要内容的父级标签，再通过遍历循环（for 或 for…in ）遍历承载主要信息的数组，获取各个内容的信息，利用提前的声明的变量转化为li标签，最后将获取到的信息整合插入到li标签里，将装有信息的li标签附加到主要内容的父级标签，清除变量内容。

整合：利用标签以及样式将不规则排列的数据变得规则排列。

鼠标移入、移出效果；
遍历所有的li标签，再分别添上onmouseover（鼠标移入时）、onmouseout（鼠标移出时），在这两种方法里分别给li的子标签（.content）添上显示、隐藏的效果

Jq
引入jq后，再写jq版

jq版代码更加简洁。在插入信息部分时，可以用each遍历数组（each的使用相比for要更加方便）。选中节点不需要代码。

鼠标移入移出部分；
hover：作用相等于onmouseover、onmouseout，是集两者于一身。
toggle:当状态为显示时隐藏，为隐藏时显示。
find：在当前标签下寻找当前标签的子级标签。