jquery之data方法的 认识vs使用

使用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一样可以达到判断是否是第一次的作用~~~