方法$.data()和$.('#test').on()的使用

1、on() 方法的使用

在选择元素上绑定一个或多个事件的事件处理函数。

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法提供绑定事件处理程序所需的所有功能。

参数

events,[selector],[data],fnV1.7

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

events-map,[selector],[data]V1.7

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。

selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

示例

描述:

Display a paragraph's text in an alert when it is clicked:

$("p").on("click", function(){
alert( $(this).text() );
});

Pass data to the event handler, which is specified here by name:

function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

Cancel a form submit action and prevent the event from bubbling up by returning false:

$("form").on("submit", false)

Cancel only the default action by using .preventDefault().

$("form").on("submit", function(event) {
  event.preventDefault();
});

Stop submit events from bubbling without preventing form submit, using .stopPropagation().

$("form").on("submit", function(event) {
  event.stopPropagation();
});

2、data()方法

在元素上存放数据,返回jQuery对象。

如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。

V1.4.3 新增用法^NEW data(obj) 可传入key-value形式的数据。

keyStringV1.23

存储的数据名.

key,valueString,AnyV1.2.3

key:存储的数据名

value:将要存储的任意数据

objobjectV1.4.3

一个用于设置数据的键/值对

data()V1.4.3

示例

描述:

在一个div上存取数据

HTML 代码:

<div></div>

jQuery 代码:

$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah设置为hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  // 设置为86
$("div").data("blah");  //  86
$("div").removeData("blah");  //移除blah
$("div").data("blah");  // undefined

描述:

在一个div上存取名/值对数据

HTML 代码:

<div></div>

jQuery 代码:

$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first  //16;
$("div").data("test").last  //pizza!;

代码Demo：

  <div></div>
   <button id="addData">添加数据</button>
   <button id="showData">显示数据</button>
   </br>
   <input />
   <script type="text/javascript">
          $(document).ready(function(){
              // data 操作
              $('#showData').attr('disabled','disabled');
              $("#addData").click(function(){
                  $('div').data('setData','Hello World');
                  $('#showData').attr('disabled',false);
              });
 
              $("#showData").click(function(){
                  alert($('div').data('setData'));
                  $('div').html('<h1>'+$('div').data('setData')+'<h1></br>');
              });
              // on函数使用
              var defdata = {show:"this is very interesting !"};
              $('input').on("click",defdata,function(e){
                $('input').attr("value",$('div').data('setData'));
                alert(e.data.show);
              });
 
          });
    </script>