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

 更新时间:2015年08月14日 09:56:47   作者:libuchao  
这篇文章主要介绍了jQuery编程中的一些核心方法,jQuery是当下人气最高的JavaScript库,需要的朋友可以参考下

调用 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');


相关文章

  • jquery实现的横向二级导航效果代码

    jquery实现的横向二级导航效果代码

    这篇文章主要介绍了jquery实现的横向二级导航效果代码,可实现鼠标滑过导航出现下拉菜单切换的效果,非常简洁自然,涉及jquery鼠标hover事件及页面元素样式的动态改变技巧,需要的朋友可以参考下
    2015-08-08
  • Jquery网页出现的乱码问题的三种解决方法

    Jquery网页出现的乱码问题的三种解决方法

    很多时候,在网上下的一些Jquery插件,在页面运行时出现乱码问题,我总结了三点,希望对大家有所帮助:
    2013-06-06
  • 基于jquery插件实现拖拽删除图片功能

    基于jquery插件实现拖拽删除图片功能

    这篇文章主要介绍了基于jquery插件实现拖拽删除图片功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • jquery自定义表单验证插件

    jquery自定义表单验证插件

    这篇文章主要为大家详细介绍了jquery自定义表单验证插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 基于jQuery Bar Indicator 插件实现进度条展示效果

    基于jQuery Bar Indicator 插件实现进度条展示效果

    这篇文章主要介绍了基于jQuery Bar Indicator 插件实现进度条展示效果的相关资料,需要的朋友可以参考下
    2015-09-09
  • Easyui的组合框的取值与赋值

    Easyui的组合框的取值与赋值

    最近开发了一个项目,其中有功能要用户点击下拉框可以实现多选的效果,下文给大家分享实现核心代码和combobox的取值与赋值的代码,对easyui组合框相关知识感兴趣的朋友一起看看吧
    2016-10-10
  • jquery Ajax实现Select动态添加数据

    jquery Ajax实现Select动态添加数据

    这篇文章主要为大家详细介绍了jquery Ajax实现Select动态添加数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 加载jQuery后$冲突的解决办法

    加载jQuery后$冲突的解决办法

    因为jquery中也有$调用,如果原来已经定义了,难免会冲突。下面是一些解决思路。
    2010-07-07
  • JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解

    下面小编就为大家带来一篇JQuery在循环中绑定事件的问题详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery获得包含margin的outerWidth和outerHeight的方法

    jQuery获得包含margin的outerWidth和outerHeight的方法

    这篇文章主要介绍了jQuery获得包含margin的outerWidth和outerHeight的方法,涉及jQuery中outerWidth及outerHeight方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论