数据方法

有时候你可能想要在元素上面储存数据。由于浏览器兼容性问题,用原生JavaScript处理元素上的数据可能会造成内存溢出,jQuery可以帮你自动处理这些问题:

//储存和取出元素数据
$('#myDiv').data('keyName', {foo: 'bar'}); $('#myDiv').data('keyName'); //returns {foo: 'bar'}

你可以在元素上面储存任何数据。你甚至可以用Data方法把两个元素连接起来。

比如说,你想要把lili包含的div连接起来。

//用.data()把两个元素连接起来
$('#myList').each(function() {
var li = $(this); //利用遍历找到div.content,地址储存在div变量处
var div = li.find('div.content'); //把div的内容储存在li中
li.data('contentDiv', div);
}); //无需再利用遍历找到div.content
//可以直接在li的数据上面调用
var firstList = $('#myList li:first');
firstList.data('contentDiv').html('new content!');

辅助方法

jQuery在$命名空间提供了很多便捷的辅助方法,可以用来简化日常操作。

比如,你可以用$.trim()来裁剪字符串两段的空白:

//返回'hello, world'
$.trim(' hello, world ');

$.each()遍历数组,或者对象:

$.each(['foo', 'bar', 'baz'], function(index, value) {
console.log('Index: ' + index + ' Value: ' + value);
}); $.each({foo: 'bar', baz: 'bim'}, function(k, v) {
console.log(k + ' : ' + v);
});

注意, $.each().each()是不一样的,.each()用于遍历jQuery对象。

还可以用$.inArray()找到某个值在数组中的位置:

var myArray = ['a', 'b', 'c'];

if ($.inArray(4, myArray) !== -1) {
console.log('found it');
}

$.inArray()如果找到了给定的值,返回该值在数组中的索引,否则返回-1。

$.proxy()改变函数执行的作用域

var myFunction = function() {
console.log(this);
}; var myObject = {
foo: 'bar'
}; myFunction(); //window myProxyFunction = $.proxy(myFunction, myObject); myProxyFunction(); //myObject

$.proxy()接收第一个参数是函数,第二个参数是指定一个对象,然后返回一个在指定对象作用域运行的函数。

这个例子中,myFuntion()因为是在全局作用域定义的,所以this是window;指定$.proxy()方法第二个参数myObject后,返回了在myObject对象作用域执行的函数,然后赋值给了myProxyFunction, 所以执行myProxyFunction后,this返回myObjet。

有时候你有一个对象方法,你想要this总是指向该对象的时候:

var myObj = {
myFn: function() {
console.log(this);
}
} $('#foo').click(myObj.myFn); //HTMLElement #foo,这不是我们想要的,我们想要this返回myObj
$('#foo').click($.proxy(myObj, 'myFn'); //myObj

有时候,使用原生的typeof方法判断数据类型令人十分困扰;例如数组元素typeof返回的是object(因为array类型在JavaScript中是也是对象);自定义的对象typeof全部返回object;虽然是正确的,但是如果我们想要更加精准的类型呢?

在jQuery中,你可以这样:

$.isArray([]);		//true
$.isFunction(function() {}); //true
$.isNumberic(3.14); //true

也可以这样:

$.type(true);		//'boolean'
$.type(3); //'number'
$.type("text"); //'string'
$.type(function() {}); //'function' $.type(new Boolean()); //'boolean'
$.type(new Number(3)); //'number'
$.type(new String('text')); //'string'
$.type(new Function()); //'function' $.type([]); //'array'
$.type(null); //'null'
$.type( /text/ ); //'regexp'
$.type(new Date()); //'date'

读jQuery官方文档:数据方法与辅助方法的更多相关文章

  1. 读jQuery官方文档:$(document).ready()与避免冲突

    $(document).ready() 通常你想在DOM结构加载完毕之后才执行相关脚本.使用原生JavaScript,你可能调用window.onload = function() { ... }, ...

  2. 读jQuery官方文档:遍历

    遍历 jQuery的快捷遍历方法可以快速定位到想要的元素.查找祖先元素 html<div class="grandparent"> <div class=&quo ...

  3. 读jQuery官方文档:样式

    样式 使用jQuery,无论是设置或者获取元素样式都十分简便. // 支持驼峰式和分割线式,两种方式等价(原生JavaScript只支持驼峰式) $('h1').css('fontSize'); $( ...

  4. 读jQuery官方文档:jQuery对象

    jQuery对象 当用$符号包裹一个CSS风格选择器的时候,你得到一个jQuery对象. var heading = $('h1'); jQuery对象是对DOM ELement封装过后的数组.注意, ...

  5. 读BeautifulSoup官方文档之与bs有关的对象和属性(1)

    自从10号又是5天没更, 是, 我再一次断更... 原因是朋友在搞python, 老问我问题, 我python也是很久没碰了, 于是为了解决他的问题, 我只能重新开始研究python, 为了快速找回感 ...

  6. 读vue-cli3 官方文档的一些学习记录

    原来一直以为vue@cli3 就是创建模板的工具,读了官方文档才知道原来这么有用,不少配置让我长见识了 Prefetch 懒加载配置 懒加载相信大家都是知道的,使用Import() 语法就可以在需要的 ...

  7. 读BeautifulSoup官方文档之html树的搜索(1)

    之前介绍了有关的四个对象以及他们的属性, 但是一般情况下要在杂乱的html中提取我们所需的tag(tag中包含的信息)是比较复杂的, 现在我们可以来看看到底有些什么搜索的方法. 最主要的两个方法当然是 ...

  8. 读BeautifulSoup官方文档之html树的打印

    prettify()能返回一个格式良好的html的Unicode字符串 : markup = '<a href="http://example.com/">I link ...

  9. 读BeautifulSoup官方文档之html树的修改

    修改html树无非是对其中标签的改动, 改动标签的名字(也就是类型), 属性和标签里的内容... 先讲这边提供了很方便的方法来对其进行改动... soup = BeautifulSoup('<b ...

随机推荐

  1. 2015上海网络赛 A Puzzled Elena

    题意:给定一棵树,求这个节点的所有子树中包括他本身与它互质的节点的个数. 解题思路:题利用dfs序+容斥原理+前缀和性质解决.题目中要求每个结点,和多少个它的子结点互素.如果每次为了求一个点去跑一遍d ...

  2. Tasks on 2013

    1.改进并补充实验 2.样本选取和文档分布调查 3. Diversity Metrics 4. PPT for Project starting 1. Chrome & webkit 2. O ...

  3. hadoop cdh 4.5的安装配置

    春节前用的shark,是从github下载的源码,自己编译.shark的master源码仅支持hive 0.9,支持hive 0.11的shark只是个分支,不稳定,官方没有发布release版,在使 ...

  4. Spark常用RDD操作总结

    aggregate 函数原型:aggregate(zeroValue, seqOp, combOp) seqOp相当于Map combOp相当于Reduce zeroValue是seqOp每一个par ...

  5. 【bzoj1300】大数计算器

    题意: 求C(n,m) 如果C(n,m)的位数<=12 那么直接输出 否则按XXX...XXXXXXXXX的形式输出 题解: 这题之前打过 但是昨天又想出一种新的做法 先说下新的做法吧- - _ ...

  6. 第十一章、认识与学习 BASH 管线命令 (pipe)

    管线命令使用『 | 』界定符号 [root@www ~]# ls -al /etc | less 管线命令『 | 』仅能处理经由前面一个命令传来的正确信息,也就是 standard output 的信 ...

  7. [iOS基础控件 - 6.7] 微博展示 使用代码自定义TableCell(动态尺寸)

    A.需求 1.类似于微博内容的展示 2.头像 3.名字 4.会员标志 5.内容 6.分割线 7.配图(可选,可有可无)   code source: https://github.com/hellov ...

  8. [css]display: table-cell,用div做分列布局

    table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...

  9. 重看Decorator Pattern,联想到Delegate传递及Flags Enum--欢迎拍砖!

    话说装饰模式(Decorator)的动机是“动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活.[GOF <设计模式>]”.再次学到该模式,有感 ...

  10. jquery如何自定义插件(扩展实例/静态方法)

    1.jquery插件的种类: 1).封装对象方法的插件(相当于实例方法) (使用 $.fn.extend({"方法名":function(参数){//方法体} }) ) 2).封装 ...