今天有做了几个asp.net结合Javascript的教程文章。现回顾头来看看那些Javascript脚本，有写得不太理想，过于复杂。现Insus.NET抽取出来，重构它们。
第一篇是http://www.cnblogs.com/insus/archive/2013/01/20/2868532.html 原来的Javascript脚本:
cb.checked = cb.checked ? false : true;
var gv = document.getElementById('<%=GridViewCouplets.ClientID %>');
var rc = gv.rows.length;
for (var i = 1; i < rc; i++) {
var input = gv.rows[i].cells[0].getElementsByTagName("input");
if (input[0].type == "checkbox" && input[0].checked) {
input[0].checked = false;
gv.rows[i].style.backgroundColor = "";
}
else {
input[0].checked = true;
gv.rows[i].style.backgroundColor = "#66ff33;";
}
}
}
function SelectedSingle(cb) {
var row = cb.parentNode.parentNode;
if (cb.checked) {
row.style.backgroundColor = "#66ff33;";
}
else {
row.style.backgroundColor = "";
}
}
经过重构之后的Javascript脚本:
var gv = document.getElementById('<%=GridViewCouplets.ClientID %>');
var rc = gv.rows.length;
for (var i = 1; i < rc; i++) {
var input = gv.rows[i].cells[0].getElementsByTagName("input");
if (input[0].type == "checkbox")
{
input[0].checked = cb.checked;
gv.rows[i].style.backgroundColor = input[0].checked ? "#66ff33;" :"";
}
}
}
function SelectedSingle(cb) {
var row = cb.parentNode.parentNode;
row.style.backgroundColor = cb.checked? "#66ff33;":"";
}
另外一篇http://www.cnblogs.com/insus/archive/2013/01/20/2868766.html 原来的Javascript脚本：
var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>");
var input = cbl.getElementsByTagName("input");
if (cb.checked) {
for (var i = 0; i < input.length; i++) {
input[i].checked = true;
}
}
else {
for (var i = 0; i < input.length; i++) {
input[i].checked = false;
}
}
}
重构之后的Javascript脚本：
var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>");
var input = cbl.getElementsByTagName("input");
for (var i = 0; i < input.length; i++) {
input[i].checked = cb.checked;
}
}
本文链接
前文对属性的设置、读取、删除方法做了分解，本文继续对jQuery attributes模块分解。
jQuery.fn.addClass
* value: 字符串或者是函数，字符串可以通过空格分隔className
*/
jQuery.fn.addClass = function( value ) {
var classes, elem, cur, clazz, j,
i = 0,
len = this.length,
proceed = typeof value === "string" && value;
//如果value是函数
if ( jQuery.isFunction( value ) ) {
//则对所有元素迭代运行addClass
return this.each(function( j ) {
jQuery( this ).addClass( value.call( this, j, this.className ) );
});
}
//如果value是字符串
if ( proceed ) {
// 对value字符串分割成数组
classes = ( value || "" ).match( core_rnotwhite ) || [];
//遍历元素
for ( ; i < len; i++ ) {
elem = this[ i ];
//如果节点是元素，则获取原来的className
cur = elem.nodeType === 1 && ( elem.className ?
( " " + elem.className + " " ).replace( rclass, " " ) : //替换掉换行符制表符等
" "
);
//如果cur不为false，即节点是元素
if ( cur ) {
j = 0;
//遍历classes组装成新的className应有的值
while ( (clazz = classes[j++]) ) {
if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
cur += clazz + " ";
}
}
//对className赋值，去掉头尾空白
elem.className = jQuery.trim( cur );
}
}
}
return this;
};
添加class的实现上还是比较简单的，利用elem.className来赋值。需要注意：
jQuery.fn.removeClass
var classes, elem, cur, clazz, j,
i = 0,
len = this.length,
//参数是否正确
proceed = arguments.length === 0 || typeof value === "string" && value;
//如果value是函数
if ( jQuery.isFunction( value ) ) {
//则对所有元素迭代运行removeClass
return this.each(function( j ) {
jQuery( this ).removeClass( value.call( this, j, this.className ) );
});
}
//如果参数正确
if ( proceed ) {
//分隔value成为class字符串数组
classes = ( value || "" ).match( core_rnotwhite ) || [];
//遍历
for ( ; i < len; i++ ) {
elem = this[ i ];
// 获取className并进行预处理
cur = elem.nodeType === 1 && ( elem.className ?
( " " + elem.className + " " ).replace( rclass, " " ) :
""
);
//如果是元素
if ( cur ) {
j = 0;
//遍历所有class字符串
while ( (clazz = classes[j++]) ) {
// 寻找是否有对应的字符串
while ( cur.indexOf( " " + clazz + " " ) >= 0 ) {
//有则去掉
cur = cur.replace( " " + clazz + " ", " " );
}
}
//给className赋值，并去掉头尾空格
elem.className = value ? jQuery.trim( cur ) : "";
}
}
}
return this;
};
删除class的实现和addClass非常像，只是通过indexOf和replace来替换掉需要删除的class。
jQuery.fn.toggleClass
var type = typeof value,
isBool = typeof stateVal === "boolean";
bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。
.bind(eventType[, evnetData], Handler(eventObject))
其中，参数eventType是一个字符串，包含一个或多个javaScript事件类型，例如click，submit或自定义事件的名称，指定多个事件类型时用空格分隔各个类型；eventData为Map类型，给出要传递给事件处理程序的数据，handler指定触发该事件时要执行的函数，eventObject表示事件对象。
.bind()方法将事件处理程序handler附加到匹配元素集合中的每个元素的eventType事件上，如果需要，还可以向事件处理程序传递数据。
live( )方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回jQuery对象。
.live(eventType,[eventData],handler)
其中，参数eventType是一个字符串，包含一个或多个javaScript事件类型，例如click，keydown或自定义事件的名称，eventData是可选参数，为Map类型，给出要传递给事件处理程序的数据，该参数是在jQuery1.4中添加的；handler是一个函数，当触发该事件时将执行这些函数
.live()方法将事件处理程序handler附加到每个匹配元素（包含当前存在的和将来添加的）的eventType事件上，必要时还可以使用参加eventData向事件处理程序传递数据。
.live()方法是基本的.bind()方法的一个变形，后者可以将事件处理程序附加到元素·，当调用.bind()时，jQuery对象匹配的元素将被附加上事件处理程序，但以后添加的元素并不会被附加该事件处理程序，因此，还需要对这些元素再次调用.bind()方法。
.one()方法将事件处理程序附加到匹配元素的指定事件并返回jQuery对象。所附加的事件处理程序最多只能执行一次。
.one(eventType,[eventData],handler(eventObject))
其中，参数eventType是一个字符串，包含一个或多个javaScript事件类型，例如click，submit或自定义事件的名称，指定多个事件类型时用空格分隔各个类型；eventData为Map类型，给出要传递给事件处理程序的数据，handler指定触发该事件时要执行的函数，eventObject表示事件对象。
.one()方法与.bind()类似，所不同的是，使用.one()绑定的事件处理程序在执行一次之后将自动取消绑定。
.delegate()方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素（现有的或将来的）的一个或多个事件上。
.delegate(selector,eventType[,eventData],handler)
其中，参数 selector是一个选择器，用于筛选触发事件的元素；eventType是一个字符串，指定一个或多个JavaScript事件类型（多个事件用空格分隔），例如click,keydown或自定义事件名称；eventData为映射类型，表示要传递给事件处理程序的数据；handler表示触发该事件时执行的函数。
.delegate()与.live()类似，可将每个事件的绑定委托给指定的DOM元素。