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 相关文章推荐
jQuery Clone Bug解决代码
Dec 22 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
javascript代码实现简易计算器
Jan 25 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
php数据类型判断函数有哪些
2013/09/23 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
JavaScript File分段上传
2016/03/10 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
Django Admin实现上传图片校验功能
2016/03/06 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
python实现简单井字棋游戏
2020/03/04 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
绩效工资分配方案
2014/01/18 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
《雨点》教学反思
2014/02/12 职场文书
贷款担保书
2015/01/20 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
新娘婚礼致辞
2015/07/27 职场文书
Redis全局ID生成器的实现
2022/06/05 Redis
Mysql如何查看是否使用到索引
2022/12/24 MySQL