现在的位置: 首页 > 综合 > 正文

jquery直接操作元素的方式

2013年02月09日 ⁄ 综合 ⁄ 共 1789字 ⁄ 字号 评论关闭

jquery给我的最大感觉是操作元素极其方便。可以方便的选择dom对象,然后操作。
jquery是如何实现选择到dom元素后直接使用方法的呢?
要让dom对象直接使用方法,要么直接给dom对象添加方法,或者追溯prototype中的方法

 

 1直接给对象添加方法

var ele=function(){return 得到dom对象}
var o={method1:function(){},method2:function(){},...}
把o中的方法手动一个个添加到ele对象中
 

 这样,速度好像比较慢。

 
2直接在Element构造函数上添加方法

var ele=function(){return 得到dom对象}
Element.prototype
={method1:function(){},method2:function(){}...}

因为所有的dom对象都继承自Element。所以在Element上添加的方法,dom元素都可以用到。
这样,从根本上解决了问题,相当方便。但是破坏了原生的属性,同时ie8和以下不支持Element构造函数

 

好像到此就为止了,因为dom对象要使用方法,那方法都要在dom对象里。
不过可以反过来,如果不是直接的使用方法,而是做间接的处理,然后使用方法,那就方便了

 

3间接的对象方式

3.1 纯对象的方式

//根据上面第一种方式,进行改进
var ele=function(){this[0]=function(){return dom对象}}
var o={method1:function(){},method2:function(){}...}
ele.prototype
=o
var a=new ele

其实这样就可以了,a可以操作o的方法。只是不能方便的返回dom

3.2 jquery的方式

var f=function(a){return new f.fn.init(a);}
f.fn=f.prototype={
init:function(a){this[0]=a;},
get:function(a){return a;},
}
f.fn.init.prototype=f.fn
console.info(f('body').get(3))

 其实这个和上面的对象方式几乎一样的。
这里只是在init中的属性都是dom元素和length。而prototype中的属性是一些方法。
现在console.log(f(m))显示的是一个对象,包含上面的方法。那为什么,我们在看jquery输出的内容的时候是一个数组呢?

 

3.3 jquery值显示为数组

var f=function(a){return new f.fn.init(a);}
f.fn=f.prototype={
init:function(a){this[0]=a;this.length=1;},//jquery这里return this。其实这里没啥用处
get:function(a){return a;},
splice: [].splice
}
f.fn.init.prototype=f.fn
console.info(f('body'))

 这时候显示的值就是数组了。这是firebug的显示问题。

 

4 其他思考
其实jquery对象得到的是,dom对象和方法组成的对象。而不是把其他方法放在dom对象的原型链或者直接在属性中。
jquery对象有两个特点。
    1:dom对象在构造函数里返回
    2:方法在原型中

其实我们还可以用其他办法来模仿jquery的这种方式。如下

var o={m1:function(a){return a;},method2:function(){}} 
var ele=function(s){
var m=function(){this[0]=s;this.length=1;}
m.prototype=o
m.prototype.splice = m; 
return (new m);
}
var s=new ele('body')
console.info(s)

 5 感叹

jquery的成功,让我感觉到,技术再牛B也是为了更好的服务群众,也是为了更好的为写js的朋友服务。所以更方便的使用js,跟懒的使用js。最好是能让所有人都能很快的上手js才是最大的成功。
只有最简单的,白痴都会用的方法才是最好的办法。

抱歉!评论已关闭.