index:
$.fn = {
......
indexOf: emptyArray.indexOf,
}
index: function(element){
//这里的$(element)[0]是为了将字符串转成node,因为this是个包含node的数组
//当不指定element时，取集合中第一条记录在其父节点的位置
//this.parent().children().indexOf(this[0])这句很巧妙，和取第一记录的parent().children().indexOf(this)相同
return element ? this.indexOf($(element)[]) : this.parent().children().indexOf(this[])
},
obj.index(element) : 如果element有，则obj作为一个数组，取element在这个obj中的索引。如果element没有，则此函数的意思是取dom节点所在父类中的索引。
<div id="first" class="test">
<div id="second" class="test">
</div>
</div> 测试： $(".test").index($("#second")); $(".test").index($("#second")[]); $(".second").index();
-
$("#second").index();
hasClass：
/**
* 是否含有指定的类样式
* @param name
* @returns {boolean}
*/
hasClass: function(name){
if (!name) return false
//some ES5的新方法 有一个匹配，即返回true 。
return emptyArray.some.call(this, function(el){
//this是classRE(name)生成的正则
return this.test(className(el))
}, classRE(name))
},
array.some(function(curentValue,index,arr){},thisValue),thisValue作为回调函数中的this，若没有指定thisValue，则回调函数中的this为undefined，
className(el) ：一般取el.className（svg除外）,classRE(name) 生成一个name的正则表达式，
test是RegExp的方法，参数是字符串，返回值是boolean类型。
match是String的方法，参数是正则表达式，返回值是数组。
classRE：
/**
* 将参数变为正则表达式
* @param name
* @returns {*}
*/
function classRE(name) {
//classCache,缓存正则
//TODO 缓存可以理解，但应该在重复使用第二次时再缓存吧，直接缓存？
return name in classCache ?
classCache[name] : (classCache[name] = new RegExp('(^|\\s)' + name + '(\\s|$)'))
}
className：
/**
* 对SVGAnimatedString的兼容？
* @param node
* @param value
* @returns {*}
*/
function className(node, value){
var klass = node.className || '',
svg = klass && klass.baseVal !== undefined if (value === undefined) return svg ? klass.baseVal : klass
svg ? (klass.baseVal = value) : (node.className = value) //class设值
}
addClass：
/**
* 增加一个或多个类名
* @param name 类名/空格分隔的类名/函数
* @returns {*}
*/
addClass: function(name){
if (!name) return this //遍历增加
return this.each(function(idx){
//已存在，返回
if (!('className' in this)) return
classList = []
var cls = className(this), newName = funcArg(this, name, idx, cls) //修正类名，处理name是函数，SVG动画兼容的情况 //多个类，空格分隔为数组
newName.split(/\s+/g).forEach(function(klass){
if (!$(this).hasClass(klass)) classList.push(klass)
}, this) //设值 如果所有的都是重复的，就不会执行
classList.length && className(this, cls + (cls ? " " : "") + classList.join(" "))
})
},
addClass(name)的name参数可以为函数，newName.split(/\s+/g) ：根据空格分为数组，这是一个技巧，这里是先对newName过滤，把重复的class去掉，
然后以字符串的形式连接原来的className并赋值给dom
removeClass：
/**
*删除一个或多个类名 同addClass
* 原理： className.repalce 替换撒谎年初
* @param name 类名/空格分隔的类名/函数
* @returns {*}
*/
removeClass: function(name){
return this.each(function(idx){
if (!('className' in this)) return
if (name === undefined) return className(this, '')
classList = className(this)
funcArg(this, name, idx, classList).split(/\s+/g).forEach(function(klass){
//替换删除
classList = classList.replace(classRE(klass), " ")
})
className(this, classList.trim())
})
},
这里要删除一个字符串里面的指定的子字符串，可以使用replace(classRE," ")
toggleClass:
/**
* 切换类的添加或移除
* 原理 如果存在，即removeClass移除，不存在，即addClass添加
* @param name 类名/空格分隔的类名/函数
* @param when
* @returns {*}
*/
toggleClass: function(name, when){
if (!name) return this
return this.each(function(idx){
var $this = $(this), names = funcArg(this, name, idx, className(this))
names.split(/\s+/g).forEach(function(klass){
// 这里的when可以作为标记，来判断是add还是remove
(when === undefined ? !$this.hasClass(klass) : when) ?
$this.addClass(klass) : $this.removeClass(klass)
})
})
},
attr：
/**
* 设置属性
* @param node
* @param name
* @param value
*/
function setAttribute(node, name, value) {
//value为null/undefined,处理成删除，否则设值
value == null ? node.removeAttribute(name) : node.setAttribute(name, value)
} /**
* 元素的HTML属性读写
* 读：原理是getAttribute
* 写：原理是setAttribute
* @param name
* @param value
* @returns {undefined}
*/
attr: function(name, value){
var result;
//仅有name，且为字符串时，表示读
return (typeof name == 'string' && !( in arguments)) ?
//$是空的 或里面的元素非元素，返回undefined
(!this.length || this[].nodeType !== ? undefined :
//直接用getAttribute(name)读，
(!(result = this[].getAttribute(name)) && name in this[]) ? this[][name] : result
) : //否则是写，不管name为对象{k:v},或name value 都存在
this.each(function(idx){
if (this.nodeType !== ) return //非元素
//如果name为对象，批量设置属性
if (isObject(name)) for (key in name) setAttribute(this, key, name[key])
//处理value为函数/null/undefined的情况
else setAttribute(this, name, funcArg(this, value, idx, this.getAttribute(name)))
})
},
经整理后如下：
//如果只有一个参数，且name为string类型，则此函数为读模式
if((typeof name == 'string' && !( in arguments)) ){
if(!this.length || this[].nodeType !== ) return undefined; if((result = this[].getAttribute(name))){
// 如果dom有这个属性，则返回
return result;
}else{
// 如果dom没有这个属性，则从内存中获取并返回
if(name in this[]) return this[][name];
}
}else{
this.each(function(idx){
if (this.nodeType !== ) return //非元素
//如果name为对象，批量设置属性
if (isObject(name)) for (key in name) setAttribute(this, key, name[key])
//处理value为函数/null/undefined的情况，这里的funcArg函数在整个zepto中复用了很多次，
// 考虑参数为函数的情况在很大方法中出现，setAttribute处理value为null的情况，实际就是removeAttribute
else setAttribute(this, name, funcArg(this, value, idx, this.getAttribute(name)))
})
}
data：
/**
* 设置自定义数据
* 注意与jQuery的区别，jQuery可以读写任何数据类型。这里原理是H5的data-，或直接setAttribute/getAttribute，只能读写字符串
* @param name
* @param value
* @returns {*}
*/
/*getAttribute/setAttribute可以操作所有的dataset内容，dataset内容只是attribute的一个子集，
特殊就特殊在命名上了。那么为什么我们还要用data-*呢，
一个最大的好处是我们可以把所有自定义属性在dataset对象中统一管理，遍历啊神马的都哦很方便，
而不至于零零散散了，所以用用还是不错的。*/
data: function(name, value){
var attrName = 'data-' + name.replace(capitalRE, '-$1').toLowerCase() var data = ( in arguments) ?
this.attr(attrName, value) :
this.attr(attrName) return data !== null ? deserializeValue(data) : undefined
},
函数中的第一步是将驼峰命名的name转化为带“ - ”的小写命名：
var name = "aTcF";
name = name.replace(/([A-Z])/g, '-$1').toLowerCase();
console.log(name);
结果： a-tc-f
这里有一个不太懂的地方，就是如果value为对象的话，这里直接使用attr(attrName,value),最终属性值为"[object Object]"，取出后直接JONS.parse会出错
所以我觉得attr里面的value应该再校验一下是否为对象，若是，则value = JSON.stringify(value);
这里存取自定义属性，可以用dateset 并兼容attr,例子如下：
function data(name, value){
var attrName = name.replace(capitalRE, '-$1').toLowerCase();
if(isObject(value)) value = JSON.stringify(value);
if(this[0].dataset){
var data = (1 in arguments) ?
this[0].dataset[attrName] = value :
this[0].dataset[attrName];
}else{
attrName = 'data-'+attrName;
var data = (1 in arguments) ?
this.attr(attrName, value) :
this.attr(attrName)
}
return data !== null ? deserializeValue(data) : undefined
}
val:
/**
* 适合表单元素读写
* 写： 写入每个元素 element.value
* 读： 读第一个元素
* @param value 值/函数
* @returns {*}
*/
val: function(value){
return 0 in arguments ?
//只有一个参数是写，
this.each(function(idx){
this.value = funcArg(this, value, idx, this.value)
}) :
//如果是读
(this[0] && (this[0].multiple ? //对多选的select的兼容处理，返回一个包含被选中的option的值的数组
$(this[0]).find('option').filter(function(){ return this.selected }).pluck('value') :
this[0].value)
)
},
这里的this[0].multiple 可以判断是否为多选的select，select节点的value属性与被选中的option的value属性是相关联的。如下例子
select#third选中的option的value为1
console.log($("#third")[0].value);
结果：1 console.log($("#third")[0].value = 2);
select#third选中的option的value变为2
结果：2