python前端jQuery进阶

知识点预习 1.jQuery特殊效果2.链式调用        3.属性操作        4.jQuery循环        5.jQuery事件 01- jQuery的特殊效果 [AppleScript]  纯文本查看  复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 / / 1. 淡入淡出 fade / / $ ( ".box" ) .fadeIn ( ) ; / / $ ( ".box" ) .fadeOut ( ) ; / / $ ( ".box" ) .fadeToggle ( ) ;       / / 2. 显示隐藏 / / $ ( ".box" ) . hide ( ) ; / / $ ( ".box" ) . show ( ) ; / / $ ( ".box" ) .toggle ( ) ;   / / 3. 卷开 卷起 / / $ ( ".box" ) .slideDown ( ) ; / / $ ( ".box" ) .slideUp ( ) ; / / $ ( ".box" ) .slideToggle ( ) ; jQuery链式调用 jQuery对象的方法会在执行完后返回这个jQuery对象，所有jQuery对象的方法可以连起来写 03- 层级菜单案例 [AppleScript]  纯文本查看  复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 / / 1. 点击分类的 '水果' 下面的ul 打开 var $next =  $ ( this ) .next ( ) .slideToggle ( ) ;   / / 2.  每次 只打开一个 , 其他的关闭 siblings ( ) / / 2.1 $next 对象 是你选中的 a 标签下面的 ul列表 / / 2.2 $next 需要获取 父元素 parent ( ) li标签 / / 2.3 通过li标签 获取 其他的同级 元素siblings ( ) / / 2.4 获取同级元素 li 下面的 子元素 children ( ) / / 2.5 li 子元素有两个  过滤下 childer ( "ul" ) / / 2.6 slideup ( )      $next.parent ( ) .siblings ( ) .children ( "ul" ) .slideUp ( ) ; jQuery操作属性 prop() 获取和设置标签属性 读取的时候用双引号包裹属性即可 设置属性时，要用{}包裹属性val() 获取及设置value属性        input标签的值获取及设置 html() 获取和修改标签包裹的内容 05- 对话框案例 val() 获取input标签的value 06- jQuery的循环遍历 each 遍历的函数内 this表示当前遍历出来的元素 表示一个元素动态类型 07- 手风琴效果 更改当前点击li标签前面和后面的元素left值 去到右边的位置： [AppleScript]  纯文本查看  复制代码 ? 1 2 3 4 5 第 4 个到右边的位置： 727 — 21      第 3 个到右边的位置： 727 - 21 * 2      第 2 个到右边的位置： 727 - 21 * 3      第 1 个到右边的位置： 727 - 21 * 4      到右边的位置的公式： 727 -21 * ( 5 - $ ( this ) . index ( ) ) 焦点事件 focus() 让文本输入框自动获取焦点， blur() 失去焦点 09- 鼠标事件 进入子元素 会触发事件 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） 进入子元素 不会触发事件 -- 建议使用 mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 [AppleScript]  纯文本查看  复制代码 ? 1 2 3 $div 01. hover ( function ( event ) {       $ ( this ) .animate ( { 'margin - top' : event .type = = 'mouseenter' ? 100 : 50 } ) ; } )