文档章节

jQuery 常用开发技巧(一)

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

码上生花,ECharts 作品展示赛正式启动!>>>

    使用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
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
加载中
请先登录后再评论。
jQuery实现表单动态添加与删除数据操作示例

运行结果: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《...

osc_jhcv198i
2019/08/30
2
0
10个帮助你创建超棒jQuery插件的小技巧

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

gbin1
2012/02/29
59
0
【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
113
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.2K
0
分享50个使你成为高级javascript开发者的jQuery的代码开发技巧

翻译:Terry li - GBin1.com 英文: 50 jQuery Snippets That Will Help You Become A Better JavaScript Developer 1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不......

gbin1
2011/07/05
550
0

没有更多内容

加载失败,请刷新页面

加载更多

UltraEdit for Mac 20.00.0.32 文本编辑器

MacOS上最受欢迎的文本编辑器是哪款?UltraEdit Mac版支HTML、PHP、Perl、Java 和 JavaScript 等众多流行计算机高级语言的程序编辑器,Ultraedit与Notepad ++相比。你可以直接用它来修改exe...

麦克W
13分钟前
6
0
java垃圾回收机制的理解

Java垃圾回收机制算法 标记----清除算法 复制算法 标记----整理算法 分代收集算法 为什么要进行垃圾回收 因为当一个对象的引用不可达,或者一个对象没有任何引用指向它,那么它就没有必要在内...

RandomObject
26分钟前
13
0
Java集合常见面试题

Java集合框架 集合框架底层数据结构总结 Arraylist 与 LinkedList 异同 是否保证线程安全: ArrayList 和 LinkedList 都是不同步的,也就是不保证线程安全; 底层数据结构: Arraylist 底层使...

JaneRoad
29分钟前
18
0
Makefile中.PHONY的作用是什么? - What is the purpose of .PHONY in a makefile?

问题: What does .PHONY mean in a Makefile? .PHONY在Makefile中是什么意思? I have gone through this , but it is too complicated. 我已经经历过了 ,但是它太复杂了。 Can somebody e......

法国红酒甜
34分钟前
15
0
看了同事的代码,我忍不住写了这份代码指南

❝ 作者:xybaby 链接:https://www.cnblogs.com/xybaby/p/11335829.html ❞ 前言 写出整洁的代码,是每个程序员的追求。《clean code》指出,要想写出好的代码,首先得知道什么是肮脏代码、...

osc_fvp5wdwk
58分钟前
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部