使用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对象某属性的属性值，达到一些改变对象不同状态，同时根据不同状态运行不同逻辑的效果！
?
原文：http://raising.iteye.com/blog/2244569