jQuery编程中的一些核心方法简介


Posted in Javascript onAugust 14, 2015

调用 jQuery 对象的方法很简单:

$('h1').remove();

大多数 jQuery 方法都是像上面这样被调用的,这些方法都位于 $.fn 命名空间内,这些方法称为 jQuery 对象方法。

但是也有一些方法不需要依赖于选择器的结果集,这些方法位于 jQuery 命名空间内,这些方法称为 jQuery 核心方法。如果觉得不好理解,记住下面两条即可:

  1.     所有 jQuery 选择器的方法都位于 $.fn 命名空间内。
  2.     $ 内的方法一般都是一些实用的功能性方法,这些方法不依赖选择器,这些方法的参数和返回值也都大不相同。

有些对象方法跟核心方法的名称还会相同,例如 $.fn.each 和 $.each,使用的时候需要格外注意。

jQuery 的 $ 命名空间中提供了很多实用方法:

去除字符串两遍的空白:

$.trim('  lots of extra whitespace  ');
// 返回 'lots of extra whitespace'

对数组和对象进行迭代:

$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {
  console.log('element ' + idx + 'is ' + val);
});

$.each({ foo : 'bar', baz : 'bim' }, function(k, v) {
  console.log(k + ' : ' + v);
});

返回数组中某元素的索引,如果元素不存在则返回 -1

var myArray = [ 1, 2, 3, 5 ];

if ($.inArray(4, myArray) !== -1) {
  console.log('找到了');
}

用一个对象去扩展另外一个对象:

var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };

var newObject = $.extend(firstObject, secondObject);
console.log(firstObject.foo); // 'baz'
console.log(newObject.foo);  // 'baz'

如果不想改变第一个对象中的值,在 $.extend 的第一个参数中传入一个空对象即可:

var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };

var newObject = $.extend({}, firstObject, secondObject);
console.log(firstObject.foo); // 'bar'
console.log(newObject.foo);  // 'baz'

改变函数的作用域:

var myFunction = function() { console.log(this); };
var myObject = { foo : 'bar' };

myFunction(); // logs window object

var myProxyFunction = $.proxy(myFunction, myObject);
myProxyFunction(); // logs myObject object

再结合事件看如何改变函数的作用域:

var myObject = {
  myFn : function() {
    console.log(this);
  }
};

$('#foo').click(myObject.myFn); // logs DOM element #foo
$('#foo').click($.proxy(myObject, 'myFn')); // logs myObject

JavaScript 本身有类型检测的方法,jQuery 中也有,并且做得更好:

var myValue = [1, 2, 3];

// 用 JavaScript 的 typeof 操作符来判断类型
typeof myValue == 'string'; // false
typeof myValue == 'number'; // false
typeof myValue == 'undefined'; // false
typeof myValue == 'boolean'; // false

// 用恒等于 检测 null
myValue === null; // false

// 使用 jQuery 的方法来判断类型
jQuery.isFunction(myValue); // false
jQuery.isPlainObject(myValue); // false
jQuery.isArray(myValue); // true

向 HTML 元素添加额外的数据:

$('#myDiv').data('keyName', { foo : 'bar' });
$('#myDiv').data('keyName'); // { foo : 'bar' }

所要添加的数据可以是任意类型:

$('#myList li').each(function() {
  var $li = $(this), $div = $li.find('div.content');
  $li.data('contentDiv', $div);
});

// 不需要再去找那些 div 了;
// 可以直接从 list 中读取出来
var $firstLi = $('#myList li:first');
$firstLi.data('contentDiv').html('new content');

Javascript 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
JavaScript SHA512&SHA256加密算法详解
Aug 11 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
CSS图片响应式 垂直水平居中
Aug 14 #Javascript
js实现选中复选框文字变色的方法
Aug 14 #Javascript
avalon js实现仿微博拖动图片排序
Aug 14 #Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 #Javascript
freemarker判断对象是否为空的方法
Aug 13 #Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 #Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 #Javascript
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python 控制语句
2011/11/03 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
Python devel安装失败问题解决方案
2020/06/09 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
《只有一个地球》教学反思
2014/02/14 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python