标签: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