读jQuery官方文档:数据方法与辅助方法
数据方法
有时候你可能想要在元素上面储存数据。由于浏览器兼容性问题,用原生JavaScript处理元素上的数据可能会造成内存溢出,jQuery可以帮你自动处理这些问题:
//储存和取出元素数据
$('#myDiv').data('keyName', {foo: 'bar'});
$('#myDiv').data('keyName'); //returns {foo: 'bar'}
你可以在元素上面储存任何数据。你甚至可以用Data方法把两个元素连接起来。
比如说,你想要把li和li包含的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官方文档:数据方法与辅助方法的更多相关文章
- 读jQuery官方文档:$(document).ready()与避免冲突
$(document).ready() 通常你想在DOM结构加载完毕之后才执行相关脚本.使用原生JavaScript,你可能调用window.onload = function() { ... }, ...
- 读jQuery官方文档:遍历
遍历 jQuery的快捷遍历方法可以快速定位到想要的元素.查找祖先元素 html<div class="grandparent"> <div class=&quo ...
- 读jQuery官方文档:样式
样式 使用jQuery,无论是设置或者获取元素样式都十分简便. // 支持驼峰式和分割线式,两种方式等价(原生JavaScript只支持驼峰式) $('h1').css('fontSize'); $( ...
- 读jQuery官方文档:jQuery对象
jQuery对象 当用$符号包裹一个CSS风格选择器的时候,你得到一个jQuery对象. var heading = $('h1'); jQuery对象是对DOM ELement封装过后的数组.注意, ...
- 读BeautifulSoup官方文档之与bs有关的对象和属性(1)
自从10号又是5天没更, 是, 我再一次断更... 原因是朋友在搞python, 老问我问题, 我python也是很久没碰了, 于是为了解决他的问题, 我只能重新开始研究python, 为了快速找回感 ...
- 读vue-cli3 官方文档的一些学习记录
原来一直以为vue@cli3 就是创建模板的工具,读了官方文档才知道原来这么有用,不少配置让我长见识了 Prefetch 懒加载配置 懒加载相信大家都是知道的,使用Import() 语法就可以在需要的 ...
- 读BeautifulSoup官方文档之html树的搜索(1)
之前介绍了有关的四个对象以及他们的属性, 但是一般情况下要在杂乱的html中提取我们所需的tag(tag中包含的信息)是比较复杂的, 现在我们可以来看看到底有些什么搜索的方法. 最主要的两个方法当然是 ...
- 读BeautifulSoup官方文档之html树的打印
prettify()能返回一个格式良好的html的Unicode字符串 : markup = '<a href="http://example.com/">I link ...
- 读BeautifulSoup官方文档之html树的修改
修改html树无非是对其中标签的改动, 改动标签的名字(也就是类型), 属性和标签里的内容... 先讲这边提供了很方便的方法来对其进行改动... soup = BeautifulSoup('<b ...
随机推荐
- 【转载】shell中的特殊变量$
shell中的特殊变量:变量名含义$0shell或shell脚本的名字$*以一对双引号给出参数列表$@将各个参数分别加双引号返回$#参数的个数$_代表上一个命令的最后一个参数$$代表所在命令的PID$ ...
- 深度学习 CNN CUDA 版本2
作者:zhxfl 邮箱:zhxfl##mail.ustc.edu.cn 主页:http://www.cnblogs.com/zhxfl/p/4155236.html 第1个版本blog在这里:http ...
- 有关按位DP
这是一道正式比赛的题目 数据范围是 10^999 ~ 10^1000 的两个整数以及一个k我记得好像是不超过100,计算两个数中间有多少个每一位相乘最后和k取摸等于0的数.这道题对于不会按位dp的人是 ...
- 加一个 时间戳 TimeStamp 可以解决 重复提交问题 SqlServer
public partial class Form1 : Form{private SqlConnection mCnn = null;private long TimeStampValue; pu ...
- 你所不知道的五件事情--java.util.concurrent(第一部分)
这是Ted Neward在IBM developerWorks中5 things ...
- Spring基础知识汇总 Java开发必看
Spring简介 Spring框架由Rod Johnson开发,2004年发布了Spring框架的第一版.Spring是一个从实际开发中抽取出来的框架,因此它完成了大量开发中的通用步骤,留给开发者的仅 ...
- 软件工程 --- Pair Project: Elevator Scheduler [电梯调度算法的实现和测试]
软件工程 --- Pair Project: Elevator Scheduler [电梯调度算法的实现和测试] 说明结对编程的优点和缺点. 结对编程的优点如下: 在独立设计.实现代码的过程中不 ...
- work2
回答问题: 描述在这么多相似的需求面前, 你怎么维护你的设计 (父类/子类/基类, UML, 设计模式, 或者其它方法) 让整个程序的架构不至于崩溃的? 答:诚然,问题给出了很多选项如-a,-v,- ...
- python 递归函数
在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 举个例子,我们来计算阶乘n! = 1 x 2 x 3 x ... x n,用函数fact(n)表示,可以看出: f ...
- [C语言 - 12] Union联合
union Student { int age; char *name; } stu; union只按照最长的数据成员分配控件,适用于有N个数据不会同时出现的情况,用以压缩空间.