文档章节

jQuery 常用开发技巧(一)

learn_more
 learn_more
发布于 2015/04/14 00:39
字数 976
阅读 53
收藏 0
点赞 0
评论 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
粉丝 90
博文 240
码字总数 210196
作品 0
深圳
程序员
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

huangdf/seezoon-framework-all

项目介绍 基于spring,mybatis,shiro面向接口开发的的一套后台管理系统,方便快速开发;采用常用的技术栈,降低学习成本,项目完全前后端分离,后端定义统一的接口格式,统一参数校验,统一权...

huangdf ⋅ 04/20 ⋅ 0

js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

【BS学习】jQuery视频总结

【背景】 这两天看完了jQuery视频的视频,对学习到的东西做一个记录。 【内容】 一、JQuery框架简介 1、官方网站:www.jquery.com 2.创立者:John Resig 3.历史: 4.特点:(1)Write Less,...

yym15732626210 ⋅ 03/12 ⋅ 0

JAVAWeb对ajax中get与post的使用

JAVAWeb对ajax中get与post的使用 01.使用背景及ajax的介绍 在进行javaWeb的开发中难免会遇到异步请求的情况,为了使网站局部的信息发生变化,而不影响整个页面的话,博主知道的也只用ajax了。...

meiqi0538 ⋅ 04/04 ⋅ 0

3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈 ⋅ 04/14 ⋅ 0

jQuery中,html、val与text的区别与联系

文章作者:Tyan 博客:noahsnail.com | CSDN | 简书 本文主要介绍如何使用jQuery中的html(),text()和val()三种方法,用于读取、修改元素的html结构,元素的文本内容,以及表单元素的value值...

quincuntial ⋅ 2016/11/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 54分钟前 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 7

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部