jQuery编程中的一些核心方法简介
调用 jQuery 对象的方法很简单:
$('h1').remove();
大多数 jQuery 方法都是像上面这样被调用的,这些方法都位于 $.fn 命名空间内,这些方法称为 jQuery 对象方法。
但是也有一些方法不需要依赖于选择器的结果集,这些方法位于 jQuery 命名空间内,这些方法称为 jQuery 核心方法。如果觉得不好理解,记住下面两条即可:
- 所有 jQuery 选择器的方法都位于 $.fn 命名空间内。
- $ 内的方法一般都是一些实用的功能性方法,这些方法不依赖选择器,这些方法的参数和返回值也都大不相同。
有些对象方法跟核心方法的名称还会相同,例如 $.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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制的2D双面积图效果,结合实例形式分析了jQuery使用插件FusionCharts结合xml格式数据绘制2D双面积图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-04-04jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
这篇文章主要介绍了jQuery控制li上下循环滚动插件用法,结合实例形式分析了jQuery循环滚动插件的实现技巧与使用方法,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-05-05JQuery插件fancybox无法在弹出层使用左右键的解决办法
本篇文章主要是对JQuery插件fancybox无法在弹出层使用左右键的解决办法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助2013-12-12完美解决jQuery fancybox ie 无法显示关闭按钮的问题
下面小编就为大家带来一篇完美解决jQuery fancybox ie 无法显示关闭按钮的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-11-11详谈jQuery.load()和Jsp的include的区别
下面小编就为大家带来一篇详谈jQuery.load()和Jsp的include的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最新评论