黑马程序员技术交流社区

标题: [石家庄校区]JQuery高级 [打印本页]

---

作者: heifachangcun    时间: 2019-1-11 14:44
标题: [石家庄校区]JQuery高级
JQuery高级
        1.动画效果
                三个参数
                        speed:执行速度
                                slow
                                fast
                                毫秒值,自定义执行时间
                        easing:切换效果
                                swing:慢-快-慢(默认)
                                linear:匀速切换

                        fn:动画完成时执行的函数
                三种方式       
                        1.默认显示和隐藏方式
                                show():显示
                                hide():隐藏
                                toggle():隐藏和显示切换
                        2.滑动显示和隐藏方式
                                slideDown():显示
                                slideUp():隐藏
                                slideToggle():切换
                                注意:在使用滑动显示的效果时,需要给实现动画的标签设置宽度!!!
                        3.淡入淡出显示和隐藏方式
                                fadeIn():显示
                                fadeOut():隐藏
                                fadeToggle():切换
***2.遍历
                this的关键字
                        this和JQuery对象没有任何关系,this通常情况下代表是js的对象

                1.js的遍历
                        foe(初始化值;循环结束条件;步长)

                2.JQuery遍历方式
                  **1.jq对象.each(callback)
                                callback:回调函数
                   语法:jq对象.each(function(i,n){
                                        代码
                                        return true/false;
                                })
                                        i:当前所引
                                        n:当前索引所对应的js对象
                                        return true:相当于continue-->跳过本次循环
                                        return false:相当于break-->结束循环
                  **2.$.each(object,[callback])-->全局遍历方式
                         语法:$.each(jq对象/js数组对象,function(i,n))
                                        $:JQuery的全局对象,可以比作Java中的类名调用静态方法
                                        i:当前所引
                                        n:当前索引所对应的js对象
                                        return true:相当于continue-->跳过本次循环
                                        return false:相当于break-->结束循环
                        3.for...of(很少用,JQuery 3.0以上版本)

        3.事件绑定
                事件冒泡:事件穿透
                1.JQuery标准的绑定方式
                        jq对象.事件方法(回调函数)
                                如:1.$("#name").click(function(){})
                                   2.$("#name").mouseover(function){})

                        *js常用事件,jq绑定时去掉on即可
                                        onclick
                                        onload
                                        onfocus
                                        onblur
                                        onsubmit 默认return true(默认提交) 如果要控制不自动提交,return false
                                        onchange
                                        onkeydown
                                        onkeyup
                2.on绑定事件/off解除绑定
                        jq对象.on("事件名称",回调函数)

                        jq对象.off("事件名称")
                                off内传递参数,解除指定事件
                                         不传参数,删除组件内所有事件
                3.事件切换:toggle       
                        jq对象.toggle(fn1,fn2...)
                        使用高版本时,需要引入插件,放在jquery的js文件的下面:
                                jquery-migrate-1.0.0.js
        4.案例
                案例1 广告显示和隐藏
                        使用定时器
                案例2 抽奖       
        5.插件:增强JQuery功能
                实现方式
                        1.JQuery.fn.extend(object)
                                增强通过JQuery获取的对象的功能
                        2.JQuery.extend(object)
                                增强JQuery对象自身的功能

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2