jq其他属性操作及jq事件机制

A.jQ其他属性操作

1.val方法

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

//填参数设置值

$("#name").val(''大触");

//不填参数获取值

$(“#name”).val();

2.html方法

//设置内容

$(“div”).html(“<span>这是一段内容</span>”);

3.text方法

$(“div”).text(“<span>这是一段内容</span>”);

html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

4.height

$(“img”).height(200);//设置图片高度200px

$(“img”).height();// 200(number类型)

$(“img”).css(“width”)// "200px"(字符串)

5.width用法同height

width（）如果不传递参数，是获得盒子的宽度

本质是获取内容的宽度，不包括padding和border;

innerWidth是包括内容+padding，不包括border

outerWidth是包括内容和padding和border

outerWidth如果里面穿参数true则是内容+padding+border+margin;

6.scrollTop/scrollLeft设置或者获取滚动条的位置

$(selector).scrollTop();

jq给window注册scroll事件

$(window).scroll(function(){

var top = $(this).scrollTop();

})

scrollTop（）要设置高度，必须要在异步队列中

setTimeout(function(){

$(window).scrollTop(700);

},0)设为0加入异步队列最前面

B. jQuery 事件机制

简单事件绑定 >>bind 事件绑定 >>delegate 事件绑定 >> on 事件绑定

1.简单事件绑定就是传统事件绑定的缺点就是一次只能绑定一个事件。

2.  bind 事件绑定

$("p").bind("click mouseenter", function(){

    //事件响应方法

});

缺点：不支持动态创建出来的元素绑定事件

不管是传统事件绑定，还是bind绑定，都不能给未来元素绑定事件。

3  delegate委托 事件绑定

支持动态事件绑定

$().delegate(selector,'click',function(){

console.log(1);

});

好处，事件只需要绑定一次，节省性能。

可以给未来元素绑定事件。

4.on事件绑定

常用：

$(selector).on( "click",“span”,data,function() {});

参数1.事件类型，参数2.选择器，参数3.回调函数

$(selector).on(events[,selector][,data],handler);

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）

// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。

// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）

// 第四个参数：handler，事件处理函数

5.off()解绑

off()不传参，解绑所有事件，包括绑定事件

传参（‘事件’），只解绑传递过来的事件，

box.off('click',**'')只解绑委托事件

6.事件触发

$('').click();

$().trigger('click');

整理 1.1.1  jQuery 事件对象（）

对象属性	解释
event.type	事件类型
e vent.data	存储绑定事件时传递的附加数据
event .target	点了谁就是谁
event.currentTarget	等同于 this ，将来调用这个事件的对象
event.delegateTarget	代理对象
screenX 和 screenY	对应屏幕最左上角的值
offsetX 和 offsetY	点击的位置距离元素的左上角的位置
clientX 和 clientY	距离页面左上角的位置（忽视滚动条）
pageX 和 pageY	距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.witch	鼠标按键类型， 1= 鼠标左键 2= 鼠标中键 3= 鼠标右键
event.keyCode	按下的键盘代码
event.stopPropagation()	阻止事件冒泡行为
event.preventDefault()	阻止浏览器默认行为（a链接跳转）
return  false;	既阻止冒泡，又阻止了默认行为