jquery源码分析（2） jQuery对象的一些方法和属性 2

本文分析一个例子

<ul>

<li></li>

<li></li>

<li></li>

</ul>

<script src="jquery.js"></script>

<script type="text/javascript">

$('li').css('background-color' , 'red');

</script>

其中$('li') 做了这样一个事情

    var aLi = document.getElementbyTagName('li');

css('background-color' , 'red');做了这样一个事情

  for(var i = 0 ; i<= aLi.Length() ; i++){

aLi[i].backgroundColor = 'red';

}

如下图表示：

   

但是这里有一个问题，在对面对象中，变量aLi是局部变量，在右面for循环中是找不到的，所以必须通过this搭桥

于是this就这样设计

 this = {

0 : 'li',

1: 'li',

2 : 'li',

length: 3;

    

}

对于一般的josn来讲，因为没有下标不能进行for循环，只能进行for-in循环，但是this这个json因为有长度其实可以进行for循环的

for(var i = 0 ;  i <= this.length ; i++){

this[i].style.backgroundColor = 'red';

}

所以整个jquery的实现效果如下

打开firebug验证一下

所以$('li')就存成了this

所以$('li')[0].style.backgroundColor = 'red'也是可行的

本篇完结！ 

本篇旨在对jquery的运行原理有个大概的认识，下一篇将介绍init()方法