jQuery 常用开发技巧（一）

2019独角兽企业重金招聘Python工程师标准>>>

    使用jQuery已经有两年多了，可是真正使用到的不过是它的最基本方法，要知道 jQuery 提倡的是 “Write less , do more”，它所提供的每一个方法都值得我们去细细学习和研究。这里绝对不是”重复发明轮子“，而是学习积累创造轮子的方法。

    这篇文章主要是读《jQuery 权威指南》书时写下的笔记，可以参考第十章：jQuery常用开发技巧

    1、数组遍历 $.each

    返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

var attr = [1,2,3];
$.each(attr,function(index,value){
    console.info(index+':'+value);
});

    对数组进行循环回调处理，其中参数为数组的索引和数组索引对应的值；

$('#id').each(function(index,target){
    alert($(this) == $(target));
})

    DOM元素遍历，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。

    2、对象遍历 $.each

var obj = {name:'he' , value:'weipo'};
$.each(obj,function(pro,val){
    alert(pro + ':' + val);
});

    3、数据筛选

var attr = [6,1,2,4,5];
attr = $.grep(attr,function(value,index){
  return value>3;
});

  函数的参数与each相反，不对数组本身操作；

    4、数据变更

var attr = [6,1,2,4,5];
attr = $.map(attr,function(value,index){
  if(index > 2) return value+1;
});

   函数的参数与each相反，不对数组本身操作；

     5、数据搜索

var attr = [6,1,2,4,5];
$.inArray(0,attr);

  类似于indexOf ，有则返回该元素在数组中的序号，否则返回-1 ；

    6、字符串去空格

var str = '  space world ';
$.trim(str);

   返回一个去掉前后空格的字符串，注意他不对字符串本身操作；

    7、常用判断函数

$.isArray([]); 
// 数组检测
$.isFunction($);
// 函数检测
$.isEmptyObject({});
// 对空对象检测，null undefined {} [] ,但是请注意，不要去检测一个数字，他会返回一个false
$.isPlainObject(new Object());
// 是否是原始对象
$.contains($('#father').get(0),$('#son').get(0));
// DOM节点是否包含子DOM节点

    8、表单参数获取与格式化

var obj = {name:'he',sex:'man',value:'weipo'};
$.param(obj);
// "name=he&sex=man&value=weipo" 
// 这就是 表单数据获取的方法 $("form").serialize() 

var obj2 = {name:'he',sex:'man',value:'weipo2'};
var attr = [obj,obj2];
$.param(attr)
// "he=weipo&he=weipo2"
// 对于数组提交给表单一定要小心，特别是jQuery中ajax中如果使用data为js对象的方式，
//那么提交参数的格式可能千差万别，
//如果使用数组或者对象中还嵌套对象，建议使用JSON.stringify(obj)；把对象序列化为字符串；

    9、函数作用域控制

$.proxy(function(){},obj);
// 把函数作用域绑定在obj上，这个函数作用巨大

    10、对象扩展

$.extend(target.obj1,obj2.....); // 扩展target对象，相同属性的值会被后面对象覆盖
;(function($){
    $.extend({}); // 扩展jQuery对象
    $.fn.func = function(){}; // 扩展jQuery插件
})(jQuery);

    11、浏览器检测

$.browser 对象的属性值进行判断；

    12、盒子模型检测

$.support.boxModel 是否支持W3C的盒子模型，IE特殊

    希望自己代码中多使用这些工具方法，而不要”重复发明轮子“，结果还出现各种bug，类似于我们java后台经常会自己去判断一个对象的输入合法性，实际上这些我们都可以借助Apache的common包完成，那又何必去重复呢？

    未完，待续！

转载于:https://my.oschina.net/heweipo/blog/400776