【译】jquery基础教程（jquery fundamentals）——(第四部分)jquery核心

Jquery 基础教程

                                           作者Rebecca Murphey

                                           原文链接地址http://jqfundamentals.com/

With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.

Copyright © 2011

 

 

Jquery核心

 

$ VS $()

    经过以上的铺垫,现在我们可以来认真的分析下jquery对象调用的方法.例如:

$('h1').remove();

    大多数的jquery方法被jquery对象调用都是通过像上面的方式;这些方法被声明为$.fn命名空间的一部分，或者“jquery原型”，并且被认为是jquery对象的方法。

然而，也有几种方法并不是作用在被选中的结果中；这些方法也是jquery命名空间的一部分，并且被认为是jquery核心的方法。

对于新学者，这是个很困惑的问题。有以下几点需要记住：

1、jquery选择结果调用的方法被放在了$.fn的命名空间中，并且自动的接收和返回选择结果。

2、在$命名空间中定义的方法一般都是工具类型的方法，并不会作用于选择结构；它们并不会自动的传递任何参数，返回值通常是数组。

   这里有一些对象方法和核心方法拥有相同名称的的例子，例如$.each和$.fn.each。在这种情况下，当你阅读文档查找合适的方法的时候要特别的小心。

工具方法

    jquery在$命名空间中提供了几个工具方法。这些方法对于常规的编程任务非常有帮助。下面是一些工具方法的例子；想进一步了解jquery的工具方法，请访问http://api.jquery.com/category/utilities/.

$.trim

   移除开头和结尾的空格。

$.trim('    lots of extra whitespace    ');
// returns 'lots of extra whitespace'

$.each

   遍历数组和对象

$.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);
});

注解：

jqurey中同时拥有一个$.fn.each方法，它是用来遍历选择结果中的元素。

$.inArray

    返回数组中值得索引，如果值不在数组中返回-1.

var myArray = [ 1, 2, 3, 5 ];
if ($.inArray(4, myArray) !== -1) {
    console.log('found it!');
}

$.extend

    用后面的对象属性改变第一个对象的属性。

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'

$.proxy

    返回一个在指定作用域中可以执行的方法——也就是说，将this设置到传递的函数中作为第二个参数。

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提供了一些基础的工具放来确定一个具体值得类型。

例4.1：校验任意值得类型

var myValue = [1, 2, 3];
// Using JavaScript's typeof operator to test for primative types
typeof myValue == 'string'; // false
typeof myValue == 'number'; // false
typeof myValue == 'undefined'; // false
typeof myValue == 'boolean'; // false
// Using strict equality operator to check for null
myValue === null; // false
// Using jQuery's methods to check for non-primative types
jQuery.isFunction(myValue); // false
jQuery.isPlainObject(myValue); // false
jQuery.isArray(myValue); // true

数据方法

    随着你对jquery的进一步运用，你会发现经常会出现这样的情况，你想把一个元素的数据和元素一起存储。在普通的javascript中，你可以通过给DOM元素添加一个属性来实现，但是你就会面临一些浏览器出现内存泄露的的问题。jquery提供了一个直截了当的方法来将数据和元素关联起来存储，并且它会为你维护内存问题。

例4.2：存储和恢复元素关联的数据

$('#myDiv').data('keyName', { foo : 'bar' });
$('#myDiv').data('keyName'); // { foo : 'bar' }

    你可以在一个元素中存储任何类型的数据，这在你进行复杂应用开发的时候，说它怎么重要都不为过。为了达到这样的目的，我们大多数情况下用$.fn.data来存储其他元素的信息。

    例如，我们想在一组条目和一个内部的div标签之间建立联系。我们可以再每次操作这组条目的时候来建立联系，但是更好的解决方式是只建立一次联系，然后将指向div标签的指针通过$.fn.data存储到这组条目上。

例4.3：在元素间用$.fn.data存储相互间的关系

$('#myList li').each(function() {
    var $li = $(this), $div = $li.find('div.content');
    $li.data('contentDiv', $div);
});
// later, we don't have to find the div again;
// we can just read it from the list item's data
var $firstLi = $('#myList li:first');
$firstLi.data('contentDiv').html('new content');

    除了用$.fn.data进行单个的键值对在存储数据，你也可以通过一个存储一个包含多个键值对的对象来存储数据。

特性和浏览器侦测

    虽然jquery消除了大部分javascript浏览器小窍门，但有很多场合你还是需要知道浏览器环境的时候。

    jquery为了实现这个目的， 提供了$.support对象，同时也提供了并不被赞成的$.brower对象。想要进一步的关于这些对象的文档，可以访问http://api.jquery.com/jQuery.support/ 和http://api.jquery.com/jQuery.browser/.

    $.support对象主要用于确定浏览器支持什么样的特性；它通常被认为是对不同浏览器个性化你的javascript的进一步的支持。

    $.browser对象是对$.support的补充，不过它估计不久就会从jquery中移除。它提供了直接对浏览器品牌和版本的侦测。

避免与其他类库冲突

    如果你用另一个javascript类库中的$变量，就会和出现运行冲突。为了避免冲突，你需要在jquery加载到页面和尝试在页面中运用jquery之前，将jquery转变成非冲突模式。

    在jquery进入非冲突模式的时候，你有机会设置一个变量名来代替$.

例4.4：把jquery设置成非冲突模式

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

    你可以继续用标准的$来包裹你的自执行的匿名函数；当作者并不知道另一个类库是否占用了$的时候， 这种方式对于控件制作是标准的模式。

例4.5：在一个自执行匿名函数中用$

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function($) {
   // your code here, using the $
})(jQuery)
</script>