-jQuery的常用事件

click()   鼠标单击

mouseover() 鼠标进入

mouseout() 鼠标离开

hover(function(){},function(){}) 鼠标持久悬放(函数1写鼠标移入的代码，函数2写鼠标移出的代码)

blur() 元素失去焦点

focus()元素获得焦点

1. 布局上，html中分上下两部分，上面是标题栏，提供给用户点击/鼠标悬放；下面是内容显示栏，里面由多个内容窗口，与标题的数量对应。
2. 批量获取标题栏中的标题，组成一个数组，并给每一个标题，批量绑定事件。
3. 每次用户点击不同的标题，根据标题的下标，控制显示对应序号的内容窗口。
   内容窗口的显示，可以通过left定位来实现，也可以通过display:none;来实现。

2. 对选择的元素进行基本的过滤操作

1.比如选择第一个元素
2.最后一个元素
3.下标为奇数或者偶数的元素
4.具体到哪一个元素，使用eq(n)
5.lt(n)表示选择小于n号索引的元素
6.gt(n)表示选择大于n号索引的元素
7.还可以设置为属性值不等于的情况

$('p:first')
$('p:last')
$('p:odd');
$('p:even')
$(li[data-li = single] > img).addClass('img-circle');
$(li[data-li != single] > img).addClass('img-circle');
$(li[data-lt ~= single])表示含有空格，且有singe属性的元素
无论什么符号分割开的，只要含有就行的，用*=
$= 表示以设置的字符结束的属性
^= 表示以设置的字符开始的属性
$('p:eq(1)');   选择页面中的第二个P元素