一、jQuery的元素操作
jQuery获取元素的高和宽
- height:$(selector).height(); //带参数设置,不带参数获取,参数是number类型
- width:$(selector).width(200); //带参数设置,不带参数获取
- innerHeight //只能获取:内边距+内容的高度
- innerWidth //只能获取:内边距+内容的宽度
- outerHeight
- outerWidth //获取:左右内边距+内容+左右边框
二、jQuery事件绑定机制
2.1 简单事件绑定方法
- .click(hander) .click():绑定事件或触发click事件
- .blur():失去焦点事件,同上
- .hover(mousein、mouseleave):鼠标移入、移出
- mouseout:当鼠标离开元素及它的子元素的时都会触发
- mouseleave:当鼠标离开自己时才会触发,子元素不触发
- .dbclick():双击
- change:改变。比如:文本框发送改变,下拉列表发生改变
- focus:获得焦点
- keyup、keydown、keypress:键盘被按下
- mousedown、mouseover
2.2 绑定事件的delegate方式
语法格式:
$(selector).delegate( selector, eventType, handler)
语法说明:
第一个参数:selector,子选择器
第二个参数:事件类型
第三个参数:事件响应方法
例如:
$(".parentBox").delegate("p", "click", function(){
//为.parentBox下面的所有的p标签绑定事件
});
2.3 on方式
jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法
语法格式:
$(selector).on( events [, selector ] [, data ], handler)
语法说明:
第一个参数:events,事件名
第二个参数:selector,类似delegate
第三个参数:传递给事件响应方法的参数
第四个参数:handler,事件处理方法
例如:
//绑定一个方法
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
//给子元素绑定事件
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
//绑定多个事件的方式
$( "div.test" ).on({
click: function() {
$( this ).toggleClass( "active" );
}, mouseenter: function() {
$( this ).addClass( "inside" );
}, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
2.4 one绑定一次事件的方式
语法格式:
.one( events [, data ], handler)
例如:
$( "p" ).one( "click", function() {
alert( $( this ).text() );
});
2.5 解绑事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
undelegate解绑delegate事件
$( "p" ).undelegate(); //解绑所有的delegate事件
$( "p" ).undelegate( "click" ); //解绑所有的click事件
例如:
var foo = function () {
// Code to handle some kind of event
};
// ... Now foo will be called when paragraphs are clicked ...
$( "body" ).delegate( "p", "click", foo );
// ... foo will no longer be called.
$( "body" ).undelegate( "p", "click", foo );
off解绑on方式绑定的事件
$( "p" ).off();
$( "p" ).off( "click", "**" ); // 解绑所有的click事件,两个*表示所有
$( "body" ).off( "click", "p", foo );
2.6 触发事件
简单事件触发
$(selector).click(); //触发 click事件
trigger方法触发事件
$( "#foo" ).trigger( "click" );
triggerHandler触发 事件响应方法,不触发浏览器行为
$( "input" ).triggerHandler( "focus" );
2.7 event对象的简介
event.data //传递的额外事件响应方法的额外参数
event.currentTarget //在事件响应方法中等同于this,当前Dom对象
event.target //事件触发源,不一定===this
event.pageX //The mouse position relative to the left edge of the document
event.pageY
event.stopPropagation()//阻止事件冒泡
e.preventDefault(); //阻止默认行为
event.type //事件类型:click,dbclick...
event.which //鼠标的按键类型:左1 中2 右3