29 进阶：用jQuery做个轮播

课堂笔记

• 设计页面的原则： 内容、样式、行为的分离；即html负责内容，css负责样式，JavaScript负责行为。不遵循原则可能使代码混乱，难以维护和优化
• 用 $(dom obj)来将一个dom 对象包装成jq对象
• 给网页添加图片时给定宽高避免网页加载图片时出现重排（reflow，页面其他部分加载完成后，图片才加载出来，页面结构再次发生改变）影响性能
• 页面的放大缩小也可能造成css bug，写页面时请保证页面不放缩

使用到的jQuery API

• .on('event',function)
• .index() 获取该元素在同级元素中的下标，从0开始。注意是同级元素，最好给要取下标的元素添加一个父元素，避免出错！
• .eq(index) index可以是正或负的整数，负数表示倒数，要注意.eq(-1) 表示取倒数第1个，而.eq(1)表示取第二个元素
• .trigger(event) 给元素执行指定事件。event是字符串，表示事件。
• addClass() 接受字符串
• siblings() 接收字符串选择器，取元素的匹配的兄弟元素，返回jq对象，参数省略时返回所有的兄弟元素
• removeClass() 接收字符串
• $(selector).toggle()
• $(selector).toggleClass()

$button.css({'transform':'translateX(100px)'})//冒号两边都加上引号以免出错

• $button.trigger('click') 自动触发事件