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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
pjblog中的UBBCode.js
Apr 25 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
firefox下input type="file"的size是多大
2011/10/24 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
详解Python中where()函数的用法
2018/03/27 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
后勤岗位职责
2013/11/26 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
vue elementUI批量上传文件
2022/04/26 Vue.js