文档章节

jQuery 常用开发技巧(一)

learn_more
 learn_more
发布于 2015/04/14 00:39
字数 976
阅读 53
收藏 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
粉丝 91
博文 240
码字总数 210196
作品 0
深圳
程序员
10个帮助你创建超棒jQuery插件的小技巧

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

gbin1
2012/02/29
0
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
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0
Visual Studio下使用jQuery的10个技巧

【51CTO经典译文】广泛流行的jQuery是一个开源的,跨浏览器和兼容CSS 3的JavaScript库,你可以用它简化你的JavaScript编码任务和操作(添加,编辑和删除)HTML内容中的DOM元素,本文介绍10个...

晨曦之光
2012/03/09
0
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
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
49分钟前
0
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
0
0
spring EL 和资源调用

资源调用 import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.PropertySource;import org.springframework.core.io.Resource;......

Canaan_
今天
1
0
memcached命令行、memcached数据导出和导入

一、memcached命令行 yum装telnet yum install telent 进入memcached telnet 127.0.0.1 11211 命令最后的2表示,两位字节,30表示过期时间(秒) 查看key1 get key1 删除:ctrl+删除键 二、m...

Zhouliang6
今天
0
0
Linux定时备份MySQL数据库

做项目有时候要备份数据库,手动备份太麻烦,所以找了一下定时备份数据库的方法 Linux里有一个 crontab 命令被用来提交和管理用户的需要周期性执行的任务,就像Windows里的定时任务一样,用这...

月夜中徘徊
今天
1
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部