文档章节

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
【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
分享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
Visual Studio下使用jQuery的10个技巧

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

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

oracle 安装 PL/SQL Developer连接64位Oracle免安装配置

PL/SQL Developer连接64位Oracle 在64位系统上安装64位的Oracle数据库,但是没有对应的64位PL/SQL Developer,此时就不能使用PL/SQL Developer来进行直接连接的,所以要想实现连接还得需要其...

PeakFang-BOK
14分钟前
2
0
裁员寒冬袭来,30岁还在CRUD的Java程序员,拿什么安身立命?

就在近日,智联招聘公布的数据更是侧面印证了很多公司“瘦身”的事实:“2018年第二季度,小微企业用人需求较第一季度平均下降26.6%”。 裁员大潮正滚滚向前,席卷各行各业! 你做好失业的准...

Java填坑之路
16分钟前
3
0
第一章:什么是SpringCloud

第一章:什么是SpringCloud 何为微服务 在了解 SpringCloud之前,我们先来大致了解下 微服务这个概念吧。 传统单体架构 单体架构在小微企业比较常见,典型代表就是一个应用、一个数据库、一个...

DemonsI
22分钟前
5
0
环境搭建之八-- node.js

1.node.js官网下载64位二进制压缩包 node-v8.12.0-linux-x64.tar.xz 2.解压文件 2.1 xz格式文件为 tar格式 xz -d node-v8.12.0-linux-x64.tar.xz 此时文件已经转变为 node-v8.12.0-linux-x64...

imbiao
25分钟前
1
0
JVM调优浅谈

1.数据类型 java虚拟机中,数据类型可以分为两类:基本类型和引用类型。 基本类型的变量保存原始值,即:它代表的值就是数值本身,而引用类型的变量保存引用值。 “引用值”代表了某个对象的...

xtof
29分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部