使用jquery也算有段时间了,见识到了它的强大。并且也使用到了JQuery的各种属性和方法。但最近接触到了一个本人觉得比较生僻的方法:data
data方法其实跟jquery的其他常用方法一样,都有$obj.xx("属性名", 属性值)——为$obj对象的某属性赋值;$obj.xx("属性名")——获取$obj对象某属性的值。只是data我用的比较少,而且不太知道它的使用场景。但最近对于一个需求,需要用同一个按钮,每次点击就触发相应的不同的事件。用到了data,而我也熟悉了一下:
<input id="btn" type="button" value="data按钮测试"/>
先看下面的代码:
<script> $(function() { $("#btn").bind("click", function(e){ var flag = false; if(flag) { alert("非全屏"); flag = false; }else{ alert("全屏"); flag = true; } }); }); </script>
看这段代码。是想在页面默认加载的时候,点击按钮弹出“全屏”,再点按钮就弹出"非全屏",再点击按钮弹出"全屏",如此反复“切换”。但是发现无论怎么点击,一直弹出的是"全屏",根本没有达到“切换”的效果!
究其原因:每次点击按钮,都会经过var flag = false;这段代码, flag的值每次在点击的时候都会被赋值为false,造成每次都进入false分支。这时候就需要用到data了。
我们希望给该按钮绑定一个属性,来记录当前的点击状态。这时候,data方法就派上用场啦。修改为:
<script> $(function() { $("#btn").bind("click", function(e){ var flag = $(this).data("flag"); if(flag) { alert("非全屏"); $(this).data("flag", false); }else{ alert("全屏"); $(this).data("flag", true); } }); }); </script>
这样,“首次”点击按钮时,弹出默认的逻辑,(这里假设是弹出"全屏"),再次点击,弹出"非全屏";再点击,弹出"全屏",如此"反复切换"……达到了我们想要的"切换"效果。
仔细分析这段代码:当首次点击该按钮时,运行到var flag = $(this).data("flag");处时,flag为undefiend,因为此时你还未给该按钮$(this)绑定属性flag.所以根据undefiend会直接进入else分支,弹出"全屏"。并且给按钮绑定了一个属性flag,并赋值为true。第二次点击时,运行到var flag = $(this).data("flag");处时,flag为第一次你绑定的值true了,所以它会进入if分支,弹出"非全屏",并给其flag属性赋值为false;第三次点击按钮时,运行到var flag = $(this).data("flag")时值为false,进入else分支弹出"全屏"并把flag属性的值更改为true,等你"下一次"点击时,又进入if分支……如此反复。
1)总之, data方法跟jquery其他的常见方法如html text 等一样,具有重载的函数。1个参数表明取值,2个参数表明赋值。而data是用于给某个jquery对象绑定属性的;
2)运用data方法,可以切换JQuery对象某属性的属性值,达到一些改变对象不同状态,同时根据不同状态运行不同逻辑的效果!
3)data方法还可以达到判断是否是第一次的效果,每次都取值,如果取不到,就表明是第一次,就赋值。这点跟ServletContext一样可以达到判断是否是第一次的作用~~~
相关推荐
jquery中data的案例,获取同一标签内的数据,以及移除标签内的数据
jQuery常用方法jQuery常用方法jQuery常用方法jQuery常用方法
jquery的几种使用方法,可以更好的设计网页
前端项目-jquery-data-remote,jquery data remote是一个插件,它简化了执行api/remote请求和将响应注入页面的常见任务。也可以利用handlebars.js进行模板化。
几个jQuery的API方法使用的详细例子。 配套博客中讲解的代码。
JavaScript and jQuery for Data Analysis and Visualization 英文azw3 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
NULL 博文链接:https://hyj1254.iteye.com/blog/586984
jQuery就是如此强大,你可以轻易地找到DOM中的任何元素,而这也是jQuery设计之初query的真实含义(查询)。 编辑本段Jquery对象 jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象...
JqueryMobile data属性介绍
jquery.js,jquery.cookie.js,jquery.treeview.js,jquery.treeview.async.js四个库文件,其中最后一个是要使用异步加载结点的时候,要用到的,我的项目中已经用到了这个功能,在初始化树的时候,只加载顶层的数据,当...
jquery 教程 详细解释了jquery的使用方法 入门教程,适合刚接触jquery的朋友
我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage方法如下 showMessage.i = 0; function showMessage(object...
主要介绍了jQuery使用removeClass方法删除元素指定Class的方法,可实现针对指定元素样式的批量删除功能,具有一定参考借鉴价值,需要的朋友可以参考下
JQUERY常用方法大全,经典实用,几十个案例,详细演示使用方法,个人珍藏。
重新认识Jquery中的html()方法,欢迎下载!!!
HTML5日趋火爆 jQuery mobile的搭配应用也受前端开发者的追捧 这里整理了data属性 便于打印和学习
jQuery Mobile Data 属性 jQuery Data 属性 jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。 在下面的参考列表中,粗体显示的值为默认值。 按钮 在1.4 版本以后已废弃。...
非常实用的jquery使用方法总结,对于初学者会有不少帮助
前段时间同事在群里对jQuery里的.data()方法大发牢骚: XXX(NNNNNNN) 15:11:34 <a> alert($(‘#a’).data(‘xxx’));//123 data方法不靠谱 XXX(NNNNNNN) 15:13:17 老老实实用attr(‘data-xxx’)吧细研究了下...