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的简单图片切换效果
Jan 06 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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+MYSQL中文乱码问题
2015/07/01 PHP
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
python实现百度关键词排名查询
2014/03/30 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Python OpenCV获取视频的方法
2018/02/28 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
python 实现图片批量压缩的示例
2020/12/18 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
大学学年自我鉴定
2013/10/28 职场文书
数学专业推荐信范文
2013/11/21 职场文书
大学军训感言
2014/01/10 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
大学毕业感言50字
2014/02/07 职场文书
环保倡议书300字
2014/05/15 职场文书
给校长的建议书400字
2014/05/15 职场文书
应用外语系自荐信
2014/06/26 职场文书
酒店端午节活动方案
2014/08/26 职场文书
考试作弊检讨书
2015/01/27 职场文书