jQuery入门(三)--jQuery中的事件机制

1.jQuery特殊属性操作

1.1. val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

//设置值
$("#name").val("张三");
//获取值
$("#name").val();

1.2.html方法与text方法

html方法相当于innerHTML text方法相当于innerText

// 设置内容
$("div").html("<span>这是一段内容</span>");
//获取内容
#("div").html();

// 设置内容
$("div").text("<span>这是一段内容</span>");

1.3.width方法与height方法

设置获取高度

  // 带参数表示设置高度
  $("img").height(200);
  // 获取固定高度、宽度
  $("img").width(); //获取width的值
  $("img").innerWidth();//获取width+padding的值
  $("img").outerWidth();//获取width+padding+border的值
  $("img").outerWidth(true);//获取的是width+padding+border+margin的值
  // 获取浏览器可视区域的宽 高
  $(window).width();   $(window).height();

1.4. scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

 // 获取页面被卷曲的高度
 $(window).scrollTop();
 //获取页面被卷曲的宽度
 $(window).scrollLeft();

1.5.offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置

 //获取元素距离document的位置，返回值为对象:{left:100,top:100}
 $(selector).offset();
 //获取相对于其最近的有定位的父元素的位置
 $(selector).position();

1.5.offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素有定位的父元素的位置

//获取元素距离document的位置，返回值为对象：{left:100,top:100}
$(selector).offset();
//获取的相对于其最近的有定位的父元素的位置
$(selector).position();

2.jQuery事件机制

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩容了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件处理能力。

2.1.jQuery事件发展历程(了解)

简单事件绑定》bind事件绑定》delegate事件绑定》on事件绑定(推荐)

简单事件注册
click(handler)         单击事件
mouseenter(handler)    鼠标进入事件
mouseleave(handler)    鼠标离开事件
缺点：不能同时注册多个事件

bind方式注册事件

 //第一个参数：事件类型
 //第二个参数：事件处理程序
 $("p").bind("click",function(){
     //事件响应方法
 });
 缺点：不支持动态事件绑定

delegate注册委托事件

  //第一个参数：selector，要绑定的元素
  //第二个参数：事件类型
  //第三个参数：事件处理函数
  $(".parentBox").delegate("p","click",function(){
         //为.parentBox下面的所有P标签绑定事件
  });
  缺点：只能注册委托事件，因此注册事件需要记得方法太多了

2.2.on注册事件(重点)

jQuery1.7之后，jQuery用on统一了所有事件的处理方法，最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用

on注册简单的事件

//表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定
$(selector).on("click",function(){});

on注册委托事件

 //表示给$(selector)绑定代理事件，当必须是它内部元素span才能触发这个事件，支持动态绑定
 $(selector).on("click","span",function(){});

on注册事件的语法

//第一个参数：events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
//第二个参数：selector，执行事件的后代元素(可选)，如果没有后代元素，那么事件自己将有由自己执行
//第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用(不常使用)
//第四个参数:handler,事件处理函数
$(selector).on(events[,selector[,data],handler]);
当某个元素既有委托事件，又有简单事件时，会先执行委托事件再执行简单事件

2.3.事件解绑

unbind方式(不用)

$(selector).unbind();//解绑所有的事件
$(selector).unbind();//解绑指定的事件

undelegate方式(不用)

$(selector).undelegate();//解绑所有的delegate事件
$(selector).undelegate("click");//解绑所有的click事件

off方式(推荐)

// 解绑匹配元素的所有事件
$(selector).off()
// 解绑匹配元素的所有click事件
$(selector).off("click");

2.4.触发事件

 $(selector).click();//触发click事件
 $(selector).trigger("click");

2.5.jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

 //screenX和screenY  对应屏幕最左上角的值
 //clientX和clientY  距离页面左上角的位置(忽视滚动条)
 //pageX和pageY      距离页面最顶部的左上角的位置(会计算滚动条的距离)
 //event.keyCode     按下的键盘代码
 //event.data        存储绑定事件时传递的附加数据
 //event.stopPropagation()   阻止事件冒泡行为
 //event.preventDefault()    阻止浏览器默认行为
 //return false       既能阻止事件冒泡，又能阻止浏览器默认行为

3.jQuery补充知识点

3.1.链式编程

通常情况下，只有设置操作才能把链式编程延续下去，因为获取操作的时候，会返回获取到的相应的值，无法返回jQuery对象，只有返回jQuery对象时才可以链式编程

end();//筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

3.2.each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同值的时候，就需要自己进行迭代了

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

//参数一表示当前元素在所有的匹配元素中的索引号
//参数二表示当前元素(DOM对象)
$(selector).each(function(index,element){});

3.3.多库共存

jQuery使用$作为标识符，但是如果与其他框架中的$c冲突时，jQuery可以释放$符的控制权

var c = $.onConflict();//释放$的控制权，并且把$的能力给了c,即c称为jQuery的入口函数