被忽略的jQuery中data()函数

无意间在jQuery官方的文档中发现了这个函数,自己确从来没有注意到,失败啊。 
函数的文档说明如下: 
返回元素上储存的相应名字的数据,可以用data(name, value)来设定。 如果jQuery集合指向多个元素,那将只返回第一个元素的对应数据。这个函数可以用于在一个元素上存取数据而避免了循环引用的风险。 jQuery.data是1.2.3版的新功能。你可以在很多地方使用这个函数,另外jQuery UI里经常使用这个函数。 
有例子比较好。 
这里我们用搜索框的默认提示文本的效果做演示。 




源代码如下: 
<script type="text/javascript"> 02.    bindDefaultText($(":text"), "keywords"); 
03.   
04.    function bindDefaultText($obj, strDefaultValue) { 
05.        if ($obj.val() == "") 
06.            $obj.val(strDefaultValue); 
07.     
08.        $obj.data("defaultText", strDefaultValue).focus(function() { 
09.            if ($(this).val() == $(this).data("defaultText")) 
10.                $(this).val(""); 
11.        }).blur(function() { 
12.            if ($(this).val() == "") 
13.                $(this).val($(this).data("defaultText")); 
14.        }); 
15.    } 
16.</script> 

观察源代码的话会发现,该方法没有在HTML中增加任何自定义的属性,而是把数据以隐藏的方式设置的,这样HTML代码就非常干净了,正如文档中所说,如果用于UI的效果设计的话,简直是再合适不过了。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值