jQuery事件

1.jQuery 事件注册

 

2.jQuery 事件处理

 

2.1 事件处理on() 绑定事件

 

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

$(function(){
                $("div").on({
                    mouseenter:function(){
                        $(this).css("background","skyblue");
                    },
                    click:function(){
                        $(this).css("background","purple");
                    },
                    mouseleave:function(){
                        $(this).css("background","blue");
                    }
                })
            })

$("div").on("mouseenter mouseleave",function(){
//鼠标经过 鼠标离开 切换类名
                    $(this).toggleClass("current");
                })

on() 方法可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上， 就是把事件委派给父元素

//(2) on可以实现事件委托（委派）
                //click是绑定在ul上的，但是触发对象是ul里面的li
                $("ul").on("click","li",function(){
                    
                })

on() 方法优势3：动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

//(3)on可以给动态创建的元素绑定事件
                $("ol").on("click","li",function(){
                    alert(11);
                })
                var li = $("<li>我是后来创建的</li>");
                $("ol").append(li);

微博发布效果 案例

<div id="weibo" class="box">
            <span>微博发布</span>
            <textarea name="" cols="30" rows="10" class="txt"></textarea>
            <button class="btn">发布</button>
            <ul></ul>
        </div>
        <script>
            $(function(){
                $(".btn").on("click",function(){
                    var li = $("<li></li>");
                    li.html($(".txt").val() + "<a href=javascript:;>删除</a>");
                    //prepend() 方法在被选元素的开头(仍位于内部)插入指定内容
                    $("ul").prepend(li);
                    li.slideDown();
                    $(".txt").val("");
                });
                //2.点击删除按钮，可以删除当前微博留言li
                //此时的click不能给动态创建的a添加事件 需要通过on的事件委托
                $("ul").on("click","a",function(){
                    $(this).parent().slideUp(function(){
                        $(this).remove();
                    });
                })
            })
        </script>

2.2 事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

//1.事件解绑 off
            $("div").off("click");//解绑div元素上的点击事件
            $("ul").off("click","li");//解绑事件委托
            //2. one()只能触发事件一次
            $("p").one("click",function(){
                
            })

2.3 自动触发事件 trigger()

 

<script type="text/javascript">
            //1.自动触发事件 元素.事件() 会触发元素的默认行为
            $("div").click();
            //2.元素.trigger("事件")  会触发元素的默认行为
            $("div").trigger("click");
            //3.元素.triggerHandler("事件") 就是不会触发元素的默认行为
            $("div").triggerHandler("click");
        </script>

 

3. jQuery事件对象

事件被触发，就会有事件对象的产生。

阻止默认行为：event.preventDefault()或者 return false
阻止冒泡：event.stopPropagation()

4.jQuery 对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法

$.extend([deep],target,object1,[objectN])

deep:如果设为true 为深拷贝，默认为false浅拷贝

浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象。

<script type="text/javascript">
            var targetObj = {
                id:0,
                msg{
                    sex:'男'
                }
            };
            var obj = {
                id:1;
                name:"andy
                msg{
                    age:10
                }
            }
            //1.浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
            $.extend(targetObj,obj);//会覆盖 合并targetObj 里面原来的数据

            targetObj.msg.age = 20;
            //2.深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性，会合并到一起
            $.extend(true,targetObj,obj);
        </script>

5. jQuery 多库共存
① 如果$符号冲突 就使用jQuery

jQuery.each();

② 让jquery释放对$控制权 让用户自己决定

var suibian = jQuery.noConflict();
suibian.each();

6.jQuery 插件

jQuery常用插件网站：

① jQuery 插件库 http://www.jq22.com/

② jQuery 之家 http://www.htmleaf.com/

图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）

当我们页面滑动到可视区域，再显示图片。

 全屏滚动（fullpage.js）

gitHub:https://github.com/alvarotrigo/fullPage.js

中文翻译网站：http://www.dowebok.com/demo/2014/77/