码迷,mamicode.com
首页 > Web开发 > 详细

使用jQuery的data方法来为页面中的某个元素存储数据,(获取焦点,清除默认值)

时间:2014-12-18 00:01:10      阅读:450      评论:0      收藏:0      [点我收藏+]

标签:style   blog   ar   io   color   使用   sp   for   on   

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据;

使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的。

我们可以使用jQuery的data方法来为页面中的某个元素存储数据:

html部分:

1 <form id="testform">
2     <input type="text" class="clear" value="Always cleared" />
3     <input type="text" class="clear once" value="Cleared only once" />
4     <input type="text" value="Normal text" />
5 </form>

js部分:

 1 $(function() {
 2      //取出有clear类的input域
 3      //(注: "clear once" 是两个class clear 和 once)
 4      $(‘#testform input.clear‘).each(function(){
 5          //使用data方法存储数据
 6          $(this).data( "txt", $.trim($(this).val()) );  //这里的this是指下面focus事件的this元素
 7      }).focus(function(){
 8          // 获得焦点时判断域内的值是否和默认值相同,如果相同则清空
 9          if ( $.trim($(this).val()) === $(this).data("txt") ) {
10          $(this).val("");
11      }
12      }).blur(function(){
13          // 为有class clear的域添加blur时间来恢复默认值
14          // 但如果class是once则忽略
15          if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
16          //Restore saved data
17          $(this).val( $(this).data("txt") );
18        }
19     });
20 });

注意:

 1.js部分,第4行代码,我们使用each遍历所有选择器元素(有时不仅只有一个元素需要此效果)

 2.js部分,第6行代码,把去除前后空格的val值($.trim方法)存入data(‘tet‘)中。这里的this代表each遍历的所有元素中的this

使用jQuery的data方法来为页面中的某个元素存储数据,(获取焦点,清除默认值)

标签:style   blog   ar   io   color   使用   sp   for   on   

原文地址:http://www.cnblogs.com/yesw/p/4170626.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!