首页 > 代码库 > 使用jQuery的data方法来为页面中的某个元素存储数据,（获取焦点，清除默认值）
使用jQuery的data方法来为页面中的某个元素存储数据,（获取焦点，清除默认值）
使用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 data17 $(this).val( $(this).data("txt") );18 }19 });20 });
注意：
1.js部分，第4行代码，我们使用each遍历所有选择器元素（有时不仅只有一个元素需要此效果）
2.js部分，第6行代码，把去除前后空格的val值（$.trim方法）存入data(‘tet‘)中。这里的this代表each遍历的所有元素中的this
使用jQuery的data方法来为页面中的某个元素存储数据,（获取焦点，清除默认值）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。