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 jQuery插件练习
Dec 24 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
详解JavaScript对象类型
Jun 16 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
iview form清除校验状态的实现
Sep 19 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
层叠菜单的动态生成
2006/10/09 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
python实现连续图文识别
2018/12/18 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
实现向右循环移位
2014/07/31 面试题
周年庆促销方案
2014/03/15 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
慰问信格式
2015/02/14 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS