jQuery源码历代记3
?
前面讲解过了jQuery构造器的each方法，并顺道将jQuery的工具方法jQuery.each()也讲解了一下。
下面继续讲解jQuery 1.01构造器中的index方法，先上代码：?
?
?
JS内容：
$('#greatphoto').attr('alt', 'Beijing Brush Seller');
将修改img的属性alt为：Beijing Brush Seller
$('#greatphoto').attr('title', 'Photo by Kelly Clark');
将为img添加一个新的属性title
如果想同时做上述2个动作则：
$('#greatphoto').attr({
? ? alt: 'Beijing Brush Seller',
? ? title: 'photo by Kelly Clark'
});
请注意如果想修改class属性则只能使用最后一种方式。?
//****************************讲解代码的分割线**************************
我们看下attr方法的代码：
?
??一开始有一个fix的对象，里面将一些值转换成了字符串。将class转换为js调用class时需要使用的className。为什么要这样呢？
jQuery的API中有一个很重要的提示：
Note: Attribute values are strings with the exception of a few attributes such as value and tabindex.?
好吧，英文看不懂的童鞋请google翻译吧。
jQuery的attr工具方法不仅仅用来对DOM属性进行复制也肩负着修改DOM css属性的作用。
看这个代码其实很简单，首先判断待修改的属性名是否属于“需修正的属性”如果是则使用修正后的属性名进而对该属性进行赋值。
如果不属于待修正的属性则直接调用getAttrbute进行修改（这里的第2个参数那个数值2没用任何作用，怀疑是bug）
最下面的else就是用来匹配css的了。（哭了，css一直是我的死穴，看不懂直接飘过吧。。。。）
综上我们得出结论就是jQuery的attr工具方法的作用就是在elem上找到name属性并值赋值为value。
//***************************这是重要的分界线**********************
attr方法在后面的讲解中还会重复出现哦，并且由于这是jQuery体系中非常非常重要的一个基础方法，所以在jQuery升级的过程中几乎每一个版本都会对其进行重构哦。
好了，下面我们讲解下一个方法：css
?
?从代码就可以看出构造器的css方法其实就是attr方法的style属性简化版。
其中用到了attr的第3属性哦，还记得此属性的作用吧：
直接调用jQuery.curCSS();
?
??这个方法呢~~就是把css属性换成js写法background-color准换成backgroundColor。
css我是不熟悉的，等待高人补充吧。诶。。。后台转前台的人伤不起啊。。。。
//*********************************再次出现一个重要的分割线***************************
下面是我非常常用的一个方法text
照例先看下API中对于此方法的描述
Description: Get the combined text contents of each element in the set of matched elements, including their descendants.?
?text()方法可以处理HTML和XML文档，例如：
HTML文档：
<div ){ return this.empty().append( document.createTextNode( e ) ); } var t = ""; jQuery.each( e || this ,function() { jQuery.each( this.childNodes , function() { if ( this.nodeType != 8 ) t += this.nodeType != 1 ? this.nodeValue : jQuery.fn.text( [this] ); }); }); return t;}
?
从代码中我们看出变化的内容下半部分主要是将迭代变更为使用jQuery.each来实现增加复用性。
上半部分中添加了如果参数为字符串则先清空当前节点而后在当前节点下创建文本节点的代码。当然这段代码还是有一些局限性的。
?还有一个bug是如果我们这样设置：
var str = new String("<p>");
console.log(typeof str == "string");
我们可以看到结果是false，所以新的方法一般会用如下代码进行验证：
var str = new String("<p>");
var str1 = "a";
console.log(str.constructor == String);
console.log(str1.constructor == String);
执行后我们可以看出2个验证均返回true。
到了jQuery 1.2以后这句有些问题的代码变更为：
?
?含义将来再说。嘿嘿。。
?
//**************************传送门的分割线******************
我们回到jQuery 1.0是的代码：jQuery.fn.text( [?r [ i ] ] );
这一句中的jQuery.fn.text为什么是调用自身呢？
我们在最开始的代码中可以看到：
jQuery.fn = jQuery.prototype = {
jquery : "$Rev: 509 $",
... ..... ....
所以调用jQuery.fn.text就是调用jQuery.prototype.text所以就是调用本身即迭代调用。
?
?
