文档章节

jQuery 常用开发技巧(一)

learn_more
 learn_more
发布于 2015/04/14 00:39
字数 976
阅读 55
收藏 0

    使用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包完成,那又何必去重复呢?

    未完,待续!


© 著作权归作者所有

共有 人打赏支持
learn_more
粉丝 92
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
10个帮助你创建超棒jQuery插件的小技巧

10个帮助你创建超棒jQuery插件的小技巧 日期:2012/02/29 来源:GBin1.com 这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一 个超棒的jQuery插件,很多开发人员都开发了很多...

gbin1
2012/02/29
0
0
分享40个实用的jQuery用户界面UI设计技巧及教程

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/19
2.1K
0
新年到,《jQuery权威指南》书评赠书活动开始

新年到!华章公司&开源中国联合举办读样章赠图书活动 免费赠送《jQuery权威指南》10册! 特别提示:本书的作者陶国荣先生将做客Oschina,为大家解答本书及jQuery的相关问题,欢迎大家发帖提问...

老枪
2010/12/29
4.4K
49
【JQuery】源码研究院(序):I know jQuery. Now what?

->JavaScript vs Jquery+CoffeeScript ->I know jQuery. Now what? ->5 Things You Should Stop Doing With jQuery ->Power of Vanilla JS ->jquery常用教程和进阶技巧 ->如何做到 jQuery-f......

呢喃的猫咪
2014/03/20
0
0
分享40个实用的jQuery用户界面UI设计技巧及教程:第一部分

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/11
348
0

没有更多内容

加载失败,请刷新页面

加载更多

老男孩 - python函数编程day2

mark

以谁为师
18分钟前
1
0
【58沈剑 架构师之路】缓存,究竟是淘汰,还是修改?

允许cache miss的场景,不管是memcache还是redis,当被缓存的内容变化时,是修改缓存,还是淘汰缓存?这是今天将要讨论的话题。 问:KV缓存都缓存了一些什么数据? 答: (1)朴素类型的数据...

张锦飞
20分钟前
0
0
Spring异常之Druid – unregister mbean error set JAVA_OPTS="-Ddruid.registerToSysProperty=true"

Spring异常之Druid – unregister mbean error 2017年04月19日 12:13:42 Dr.Zhu 阅读数:6688 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zt_fucker/arti...

linjin200
21分钟前
1
0
数据结构-图-知识点总结

一、基本术语 图(graph):图是由顶点的有穷非空集合和顶点之间边的集合组成,通常表示为:G(V,E),其中,G表示一个图,V是图G中的顶点的集合,E是图G中边的集合。 顶点(Vertex):图中的数据...

hblt-j
24分钟前
1
0
SAP订单编排和流程增强概述

SAP产品里的订单处理,无论是On-Premises解决方案还是云产品,我认为归根到底可以概括成四个字:订单编排,包含两个层次的内容: 1. 单个订单通过业务流程或者工作流驱动的状态迁移; 2. 多种...

JerryWang_SAP
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部