JQuery应用

表格的隔行变色

• 表格结构中使用:odd来选中偶数行，并使用attr来添加样式
• 表格结构：table>thead(表头) tbody(表格内容与表头为兄弟)>tr(行)>td(列)
• eg：$(‘table>tbody>tr:odd’).attr(‘class’,’写好的样式’)

多tab切换

• tab按钮用 ul>li 实现
• 按钮对应的内容区域使用相对定位
• 这个内容区域中有对应li数的div，每个div都使用绝对定位，固定在按钮切换展示的位置
• 然后给除了默认的div都加上样式display:none
• 定义一个变量index = 0
• 获取到内容区域的div(获取到的是一个数组)
• 然后获取ul>li的点击事件
• 拿到点击事件对应的currentIndex，$(this).index()
• 判断点击的currentIndex如果不等于index就设置display=”none”,对应内容的索引的display=”block”,index=currentIndex

回到顶部

• 样式就是一个固定在页面的按钮，点击回到最顶部
• 读取页面滚动条的Y轴坐标：$(document.body).scrollTop()+$(document.documentElement).scrollTop()
• 使用平滑的滚动回顶点，读取页面滚动条的Y轴坐标，如果偏移offset为0返回
• 定义滚动的总时长，定时的间隔，和每次间隔滚动多少(offest/(总时长/间隔))
• 使用定时器，将offset -= 每次间隔滚动的长度，如果offset<=0，则offset=0,清除定时器；如果>0,$(‘html,body’).scrollTop(offset)

导航栏动态显示效果(悬停有下拉列表)

• 样式写好，有列表的固定好并且隐藏
• 使用:has(ul)判断鼠标悬停时有无列表，使用hover事件，分别给两个函数添加下滑和上滑的动画效果

反选功能

• 获取所有checkbox的数组
• 使用each遍历checked的状态为checked的反选

全选/全不选

• 使用each给每个item的checked设置为true/false

添加删除记录

• 输入的样式使用input，并给每个input添加对应的id
• 获取每个input的dom并使用val()获取值

  $('<tr></tr>')
  .append('<td>'+inputDom.val(),有几条写几条+'</td>')
  .appendTo('追加到已存在的表格id的表格中')
  .find('a') // 找到后代选择器中的a标签
  .click(并点击触发删除事件)

• 初始化值
• 删除事件：在删除事件中要先阻止默认事件，然后通过this和parent()获取删除这一行表格的dom
• 然后调用remove()即可