jQuery知识点

一、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