jQuery中的位置操作、绑定和解绑事件、事件触发

一、位置操作 left 和 top

1、获取和设置 left 和 top 的值------>都是数字类型

console.log($("#dv").offset().left);//获取left的值------>都是数字类型
console.log($("#dv").offset().top);//获取top的值------>都是数字类型
   //设置left和top的值
$("#dv").offset({"left":200,"top":200});

2、.scrollLeft()和.scrollTop()获取 卷曲出去的距离------->数字类型

  console.log($(this).scrollLeft()+"===="+$(this).scrollTop());//获取的卷曲出去的距离----->数字类型

二、绑定事件

1、bind():绑定多个事件------bind{“事件的类型”:事件处理函数,…}

参数：{"事件的类型":事件处理函数,......} $("#btn").bind("click",function () {}

2、delegate ------父级元素.delegate(“子级元素”,“事件类型”,事件处理函数)

参数：父级元素.delegate("子级元素","事件类型",事件处理函数)
 $("#dv").delegate("p","click",function () {
                    alert("我被点了");
                });

3、on参数:父级元素.-------on(“事件类型”,“子级元素”,事件处理函数)；

如果元素是动态添加的,那么非常推荐用on的方式为动态添加的元素绑定事件
on方法: 两个参数：1.事件的名字--click,2.事件处理函数
on方法：三个参数：1.事件的名字--click,2.要绑定的元素--p,3.事件处理函数
on是父级元素调用的，目的：为子级元素去绑定事件

三、解绑事件

1、off()解绑通过on的方式绑定的事件

//下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
$("#btn1").off("click");//解绑事件off()参数:要解绑的事件的名字
$("#dv").off();//移除父级元素和子级元素的所有的事件

2、unbind()解绑通过bind的方式绑定的事件

unbind("click");//解绑事件的方法；参数:要解绑的事件的名字

3、.undelegate()解绑通过delegate的方式绑定的事件

点击按钮为div中p解除绑定事件
            $("#btn2").click(function () {
                $("#dv").undelegate("p","click");//解绑
            });

4、总结

//如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑
//但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,
//这个时候父级元素和子级元素的相同的事件都会被解绑
Bind------------ unbind
on---------------off
delegate-------- undelegated
//为div中的按钮绑定事件,获取事件对象中内容
$("#dv").on("click","input",function(event) {
 console.log(arguments[0]);//获取函数在调用的时候,有几个参数
event.delegateTarget----->div--->谁代替元素绑定的事件--div
event.currentTarget----->input--->真正是谁绑定的事件
event.target---->input----触发的事件

四、事件触发

触发文本框,获取焦点的事件
$("#sp").text("文本框获取到了焦点");
$("#txt").focus();//第一种
$("#txt").trigger("focus");//第二种
$("#txt").triggerHandler("focus");//第三种
第一种触发事件的方式和第二种触发事件的方式是相同的,都会触发浏览器默认的事件(光标在文本框中闪烁)
第三种触发事件的方式不会触发浏览器的默认事件

1、点击第二个按钮调用第一个按钮的点击事件—触发第一个按钮的点击事件

                 $("#btn2").click(function () {
                          //触发事件---3种方式
                          // $("#btn1").click();
                          //trigget()方法中需要写上触发事件的名字
                          //$("#btn1").trigger("click");//触发事件
                         //triggerHandler()方法中需要写上触发事件的名字
                        $("#btn1").triggerHandler("click");//触发事件