咱们接着昨天继续讲解。
回顾下昨天所学的，
我先来写个程序给大家进行讲解。
<script src="jquery-2.0.3.min.js"></script>
<!-- 我现在先写个ul，在下面在写几个li-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 然后把li的背景色变成红色 -->
<script>
$(function(){
$('li').css('background','red');
});
</script>
相信用过jQuery的小伙伴都知道，
li 的背景色会变成红色。
咱们主要来看一看$('li').css('background','red');，
看一看这个是一个什么东西？
其实，我们发现这样写这三个 li 颜色就可以变红了，
想一想，我们都知道用原生去写的话，
首先得获取到这三个 li ,
然后对这三个li 进行循环操作，
分别让它循环的时候给它的背景色变成红色，
就是酱紫的过程，
但在jQuery当中,咱们来看一下，
现在的这一块$('li')是一个函数(创建对象），
这一块css('background','red');，就是对象下面的方法，
去添加样式的方法，
这两块的话，它分别做了哪些事情，
// 假如这时$('li')做的是如下：
var aLi = document.getElementsByTagName('li');
// .css('background','red')做的是如下：
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.background = 'red';
};
这时大家可以发现，是不是这个效果就出来了。
但是，jQuery当中到底是怎么做的呢？
// this
// 既然this是共享的、共用的
// this本身就是一个对象，
// 这个对象很大里面有很多方法和属性
// 如果说要选择到这三个li
// 这时候this会变成这样
this = {
0 : 'li',
1 : 'li',
2 : 'li',
// 不光有有属性和value值
// 还有个比较重要
length : 3 // 这里获取的是3个li，所以length是3。
// 里面还有很多，我只是把咱们要说的列了出来
};
所以说$('li')做了这样的处理，
那我们来想想css方法这边该怎么办，
我们都知道对象字面量没办法进行for循环，
因为它没有长度，所以只能进行for in 循环，
但是这个JSON比较特殊，
特殊之处，就是它这个属性是以下标的形式出现的，
而且，它里面还有一个length是3的东西，
所以说虽然它是一个JSON，但是它能不能for循环呢？
其实是可以的，我们来看一下，比如我来这样去写，
for(var i = 0; i < this.length ; i ++){
// 然后让this的每一个背景色变成红色
this[i].style.background = 'red';
};
其实这边这个length，
有属性的话是不是可以直接写到这里了，
接下来，在这儿里面虽然this不是数组的话，
这边下标的话是不是也可以，
因为它的属性是0,1,2是不是也可以，
这样我们就知道了在css方法真正运作的
其实是这样的结构。
然后，我们打印一下，看一下。
是不是像之前我们说的有0,1,2的下标，
length等于3，
其实在咱们简化版里面是有的，
所以说感觉上这个JSON和这个数组差不多，
在源码上我们也可以看到，正好200行，
// The default length of a jQuery object is 0
length: 0,
它默认的这个长度是0，对吧，
你把里面存了几个元素，
这里面就是几，
它这个代码做了处理会跟着变。
所以说我们了解 了这个原理了之后，
// 选择到了这三个对象是不是就是创建出来的那个对象啊
// 对象在源码中是不是就是this
// 既然是this，我们就知道了它的结构
// 那我们是不是可以通过它找到中间的li
$('li')[1]
// 注意啊，这里面几个li存的都是原生的li
// 既然找到了中间的这个li就可以单独的进行操作
$('li')[1].style.background = 'red';
// 是不是就可以这样去写了
可以看到中间这个li变红了。
大家了解了解。
OK,咱们这段暂时讲到这里！
回看上一集：
原文中此处为链接，暂不支持采集
别走开，下集更精彩。
喜欢文章的小伙伴，
希望大家多多转发分享，
你的分享就是我的动力！
喜欢 分享 or
网友评论