jQuery代码的14条改善技巧[译](2)
作者:暴风彬彬 来源:彬Go 时间:2009-12-02 10:02:00
4.存储数据
使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据:
$('selector').attr('alt', 'data being stored');
//之后可以这样读取数据:
$('selector').attr('alt');
使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的,我们可以使用jQuery的data方法来为页面中的某个元素存储数据:
$('selector').data('参数名', '要存储的数据');
//之后这样取得数据:
$('selector').data('参数');
这个data方法能让你自己明明数据的参数,更语义更灵活,你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍,可以看看jQuery官方讲解
这个方法的经典应用是给input域一个默认值,然后在聚焦的时候清空它:
HTML部分:
<form id="testform">
<input type="text" class="clear" value="Always cleared" />
<input type="text" class="clear once" value="Cleared only once" />
<input type="text" value="Normal text" />
</form>
JavaSript部分:
$(function() {
//取出有clear类的input域
//(注: "clear once" 是两个class clear 和 once)
$('#testform input.clear').each(function(){
//使用data方法存储数据
$(this).data( "txt", $.trim($(this).val()) );
}).focus(function(){
// 获得焦点时判断域内的值是否和默认值相同,如果相同则清空
if ( $.trim($(this).val()) === $(this).data("txt") ) {
$(this).val("");
}
}).blur(function(){
// 为有class clear的域添加blur时间来恢复默认值
// 但如果class是once则忽略
if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
//Restore saved data
$(this).val( $(this).data("txt") );
}
});
});
5.jQuery手册常备身边
大多数人都很难记住所有的编程细节,即使再好的程序员也会有对某个程序语言的疏忽大意,所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。
oscarotero jquery 1.3 (壁纸版)
标签:jQuery,优化,代码,技巧,选择器
0
投稿
猜你喜欢
关于mysql与mysqli
2011-02-23 12:03:00
Dreamweaver打造多彩文字链接
2007-11-11 18:59:00
Centos7.2 编译安装PHP7.0.2的步骤
2023-10-08 12:51:29
一文搞懂Go语言操作Redis的方法
2024-04-25 13:20:25
深入理解Python 多线程
2021-03-25 05:25:28
GoLang调用链可视化go-callvis使用介绍
2023-07-16 06:39:59
MYSQL数据库Innodb 引擎mvcc锁实现原理
2024-01-21 08:47:42
Python Pandas对缺失值的处理方法
2021-03-18 19:38:55
JavaScript导出Excel实例详解
2023-09-06 15:51:27
浅谈Python响应式类库RxPy
2021-12-24 12:44:26
Python echarts实现数据可视化实例详解
2022-02-22 03:54:09
详解Vue2 SSR 缓存 Api 数据
2023-07-02 17:09:06
解决vue项目中某一页面不想引用公共组件app.vue的问题
2023-07-02 16:57:35
深入浅出讲解MySQL的并行复制
2024-01-21 20:22:26
Vue+Websocket简单实现聊天功能
2024-04-30 10:29:50
MySQL 启动成功但未监听端口的解决方法
2024-01-29 00:01:55
Python facenet进行人脸识别测试过程解析
2021-03-27 14:24:04
浅谈Python3中datetime不同时区转换介绍与踩坑
2021-05-16 15:29:46
python 两个一样的字符串用==结果为false问题的解决
2023-01-24 08:30:59
MySQL学习之基础操作总结
2024-01-12 14:42:34