七、jquery对象的学习,有难度

使用jquery的第一件事就是要使用jquery对象,jquery对象和javascript中的DOM对象是不同的。

什么是jquery对象?jquery将一个DOM对象转化为jquery对象后就可以使用jquery类库提供的各种函数。可以将jquery对象理解为一个类,并且封装了很多的方法,而且可以动态的通过加载插件扩展这个类,类似于C#中的分布类partial class。

除了jQuery工具函数,jQuery的操作都是从jQuery对象开始。比如:

attr(key,value)

<img id="myphoto" alt="my photo" src=""/>

$("#myphoto").attr("src","/pic/1.jpg");

 

jQuery对象是一个特殊的集合对象。即使只有一个元素,jQuery对象仍然是一个集合。说其特殊是因为实际上jQuery对象是包含一个集合对象和各种函数的类。

 

    var array = new Array();
    array.push("1234");
    array.push("5678");
    alert("Array:" + Object.prototype.toString.call(array));
    alert("jQuery Object:" + $("#myphoto").toString());

这段代码看懂但是没理解。

集合存储的是DOM对象。

一个jQuery对象实际上是jQuery.fn对象的引用,下面是jQuery内部的实现语句:jQuery.fn = jQuery.prototype = {...}。

 所有的jQuery对象都是jQuery.fn对象的实例!下面是获取jQuery对象的核心方法:

jQuery = window.jQuery = window.$ = function(selector,context){return new jQuery.fn.init(selector.context);}

一个jQuery对象实际上就是jQuery.fn.init()方法的返回结果。

 

只有jQuery对象才能调用jQuery类库的各种函数,同样有些DOM对象的属性和方法在jQuery上也是无法调用的。

jQuery对象的索引保存的是DOM对象,所以可以通过索引将jQuery对象转化为DOM对象(实际上是获取保存在jQuery对象中的DOM对象)。$("#myphoto")[0];  alert($("#myphoto")[0].src);如果想要遍历jQuery对象中的每个元素,通常使用each()函数。

each(callback);callback()是一个回调函数,此函数中的this也指向DOM元素。

 

把所有的this都转化为jQuery对象。因为即使一个对象已经是jQuery对象也不会出错。

 

如果已经获得了一个DOM对象,使用jQuery(elements) 函数将其转化为jQuery对象。

 

jQuery对象的链式操作,首先看一个例子#("#myphoto").css("border","solid 2px #FF0000").attr("alt","mufan");

之所以可以进行链式操作,是因为其中每个函数返回的都是jQuery对象本身。除了某些函数是获取数据的,比如获取属性值,获取集合大小。其他jQuery函数都可以用于链式操作。

 

$变量的使用,jQuery变量是全局变量,jQuery对象是指jQuery.fn。jQuery变量类似静态类,在任何时刻都可以用。jQuery.fn是实例方法,只能在jQuery对象上调用。内部实现:

jQuery = window.jQuery = window.$

所以jQuery和$实际上是window对象的属性,也就是全局变量,在任何地方都可以用。

 

当一个页面需要同时使用两个脚本库时,就会产生冲突。导致$变量的引用不明确。

jQuery提供了jQuery.noConflict()及其重载来解决此问题。jQuery.noConflict()和jQuery.noConflict(extreme)。

jQuery.noConflict()的作用是将变量$的控制权交给第一个实现他的那个库。如果extreme的参数为true即表示同时将jQuery变量的控制权也转交出去。也许有的脚本中将jQuery都占用了。

 

jQuery.noConflict()对象返回jQuery变量本身,因此可以通过这样来改变变量引用的名称:

$$ = jQuery.noConflict();

另外解决冲突的方法:

1、在jQuery变量不冲突的情况下,页面中不使用$,全部使用jQuery.

2、先引入jQuery类库,再引入其他类库。此时$的控制权会被其他类库占用。

如果一定想要使用$变量引用jQuery类库,在插件开发中常常使用下面的技巧:使$变量作为参数,只在函数内部代表jQuery的引用,不影响全局的$变量:

(function($)

{

$("#divMsg").html($("#divMsg").html()+"<br/>"+"written by jquery");

})(jQuery);

上面语法其实是首先声明了一个匿名函数,接受一个参数,然后马上调用了jQuery作为参数传入,函数中的$就代表了jQuery变量。

 

posted @ 2012-07-31 11:41  木饭  阅读(1876)  评论(0编辑  收藏  举报