html jquery 开发小技巧

1.善用 data-property ( property   可写成任意类型 )

eg. 当我们需要根据不同类型展示相应内容时：

-----------------------html-----------------------------

<input type="button" data-type="1"/>

<input type="button" data-type="2"/>

-------------------------js---------------------------

$('input[type="button"]').click(function(){

       //取值方法

       $(this).data('type')；

      //赋值方法

      $(this).attr('data-type'，‘3’)；

})；

2.活用Object + JSON.Stringify;

其实很多时候前台页面提交可能涉及大量的内容需要提交，当然你也可以用隐藏标签（<input type="hidden" />） ,给一堆隐藏标签赋值，任务量大而繁琐。其实完全可以不建一大堆标签，说一个简单的例子：

一道题目至少包含4个选项，其中有个是正确答案；

因此我们的后台至少有三张表：题目表，选项表，题目选项关系表，

此时若是新增可能很简单，组织一下内容，提交即可；

但是若是修改则特别麻烦，因为这其中至少包含5个主键，

所以此时后台可下发整个实体（包括题目和选项以及正确答案），前台修改后将对象对应的属性修改，最后将对象转成JSON串提交即可（encodeURI(JSON.stringify(exerciseEntity))，解决乱码），这样后台可用GSON直接解析转成对象，前台代码清晰，后台处理简单！

3.jquery 强大的标签选择功能

例如  给 name 为 X的 radio 设置 选中

$('input[type="radio"][name="'+X+'"]').attr('checked',true);

假如有大量的<input>标签,且有类似的属性，遍历一遍即可全部赋值；

注意：使用标签选择器，赋值可能出现问题，因为选中的有可能是一堆标签，返回的是一个数组，若确定只用一个可用$('#ID')[0]。

4.先解除绑定再绑定事件

$('#id').unbind("click").click(function(){});

5.注意执行方法的时间，异步

例如，jquery提供一个load方法

$('#bd_header').load('header.html',function(data){
       $(this).html(data);

       init();

});

load是异步的，所以如果你要是在$().ready()中，绑定要加载的页面的点击之类的标签很可能绑定不上，所以需要load执行完执行操作。

同理：ajax；

6.js中添加js文件

document.write('<script type="text/javascript" src="js/Util.js"></script>');

7.判断是否为空或者undefined；

只需要 ：

if(obj){

    alert(JSON.stringify(obj))

}

8.prop 替换 attr

有时attr无法赋值，试试prop