jquery使用（三）：常用方法区分

一、关于jQuery中html()、text()和val()的区别

    html():向匹配的元素中添加html标记。比如、
等html标签。添加的元素将覆盖原有的元素内容。
    text():向匹配的元素中添加文本。如果文本包含html标签将会以文本的形式输出。添加的文本将会覆盖原有的元素内容。
    val():设置或者获取DOM元素的value属性值，针对表单元素。比如:获取input元素的value值

二、jQuery中attr()和prop()的区别

1. attr()和prop()的功能都是一样的。获取匹配的元素集合中的第一个元素属性的值或设置匹配的元素集合中的每一个元素属性的值。它们的区别在于attr()用于自定义属性，prop用于固有属性。

2. a标签中href、target、class是DOM元素内置的属性，我们称之为固有属性。myAction是我们为了表达更多的信息，给a标签自定义的属性，称为自定义属性。
   若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态，请使用.prop()方法。 prop()最常见的用法就是选中所有复选框、取消选中所有复选框、反选。
   在获取选中的复选框时使用prop("checked")就不灵了，因为prop("checked")只能获取匹配的元素集合中第一个元素的checked属性，无法获取每个选中元素。使用如下方法可以获取每个选中的复选框的value值。

3. triggerHandler 触发事件的时候，不会触发浏览器的默认行为，只执行其事件处理函数
   $("#txt").triggerHandler("focus");

4. jquery的bind和on绑定事件的区别
   bind和on的绑定事件的区别：

jquery文档中bind和on函数绑定事件的用法：
.bind(events [,eventData], handler)
.on(events [,selector]  [,data], handler)
.on方法比.bind方法多一个参数'selector'
.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件；

******那么这个selector参数的好处是什么?
好处在于.on方法为动态添加的元素也能绑上指定事件（这个要切记）；如：

$('ul li').on('click', function(){console.log('click');})
//的绑定方式和
$('ul li').bind('click', function(){console.log('click');})
//一样；我通过js给ul添加了一个li：$('ul').append('
js new li
')；
//这个新加的li是不会被绑上click事件的

但是我用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加li:$('ul').append('

js new li

');这个新生成的li被绑上了click事件

5.监听与绑定的区别

事件绑定

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有三种常用的绑定事件的方法：

*   在DOM元素中直接绑定；

*   在JavaScript代码中绑定；

*   绑定事件监听函数。

在DOM中直接绑定事件

我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。好多不一一列出了。如果想知道更多事件类型请查看， DOM事件 。

在JavaScript代码中绑定事件

在JavaScript代码中（即 script 标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

使用事件监听绑定事件

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍，事件监听。

事件监听

关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。

W3C规范

语法：

element.addEventListener(event, function, useCapture)

event : （必需）事件名，支持所有 DOM事件 。

function：（必需）指定要事件触发时执行的函数。

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

注：IE8以下不支持。

IE标准

语法：

element.attachEvent(event, function)

event：（必需）事件类型。需加“on“，例如：onclick。

function：（必需）指定要事件触发时执行的函数。

事件监听的优点

1、可以绑定多个事件。

常规的事件绑定只执行最后绑定的事件。

两个事件都执行了。

2、可以解除相应的绑定

封装事件监听

//绑定监听事件
function addEventHandler(target,type,fn){
    if(target.addEventListener){
        target.addEventListener(type,fn);
    }else{
        target.attachEvent("on"+type,fn);
    }
}

//移除监听事件
function removeEventHandler(target,type,fn){
    if(target.removeEventListener){
        target.removeEventListener(type,fn);
    }else{
        target.detachEvent("on"+type,fn);
    }
}

//测试
var btn5 = document.getElementById("btn5");
addEventHandler(btn5,"click",hello1);//添加事件hello1
addEventHandler(btn5,"click",hello2);//添加事件hello2
removeEventHandler(btn5,"click",hello1);//移除事件hello1

总之：
第一种，你只能执行一个回调来响应用户点击事件。
第二种，你可以绑定N个函数来响应用户点击事件。