JavaScript 与 Jquery的对应代码

document.onreadystatechange = function(){
	if(document.readState == "complete"){
		alert("页面加载完毕，" + document.radyState);
	}
	//do something
}


$(document).ready(function(){
	alert("Jquery loaded")	;
	//do something
});

//------------------------------------------

var textbox1 = document.getElementById("textbox1");
if(textbox1 != null && textbox1 != undefined){
	alert(textbox1.value);
}

$("#TextBox1").val();


//------------------------------------------------------

var tb_list = document.getElementsByTagName("input");
for(var i=0; i< tb_list.length; i++){
	alert(tb_list[i].name);
}

$("input").each(function(){
	alert($(this).attr("name"));
})

//----------------------------------------------

var tb_list = document.getElementsByTagName("input");
for (var i=0;i<tb_list.length; i++){
	if(tb_list[i].name.indexOf("TextBox") != -1){//indexOf参数区分大小写
		alert(tb_list[i].name);
	}
}

$("input[name*=\"TextBox\"]").each(function(){
	alert($(this).attr("name"));
})


//---------------------------------
var tb_list = document.getElementsByTagName("input");
for (var i=0;i<tb_list.length; i++){
	if(tb_list[i].name.indexOf("TextBox") != -1){
		tb_list[i].onclick = function(){
			alert(this.name);
		}
	}
}

$("input[name*=\"TextBox\"]").click(function(){//这个name*=\"TextBox\"区分大小写
	alert($(this).attr("Name")); //attr("Name不区分大小写")
})

//-----------------------------------------------

//设置所有的checkbox为选中状态
var cb_list = document.getElementsByName("input");
var checked = "5";
for(var i=0; i<cb_list.length; i++){
	if(cb_list[i].type == "checkbox"){
		cb_list[i].checked = true;
	}
}



$("input[type=\"checkbox\"]").attr("checked",true);

//或者下面这样
$("input[type=\"checkbox\"]").each(function(){
	$(this).attr("checked",true);
})

//设置所有的checkbox为非选中状态    只需要把true 改成  false




//--------------------------------------------------------------------------------



//带条件获取控件集合并修改样式
var tb_list = document.getElementsByTagName("input");
for(var i=0;i<tb_list.length;i++){
	if(tb_list[i].name.indexOf("TextBox") != -1){
		tb_list[i].style.width = "100";
		tb_list[i].style.height = "30";
		tb_list[i].style.border = "solid 1px red";
	}
}


$("input[name*=\"TextBox\"]").each(function(){
	$(this).css("height","30px").css("width","100px").css("border","solid 1px red");
	//或者
	$(this).css({height: "30px", width: "100px", border: "solid 1px red"});
	//或者
	$(this).height(30);
	$(this).width(100);
	$(this).css("border","solid 1px red");
})

//--------------------------------------------------------------------------------
//选择某控件的子控件集合
var parent = document.getElementById("div1").getElementsByTagName("input");
for(var i=0;i<parent.length;i++){
	parent[i].value = i;//0 1 2 3 4 5 6
}

$("#div1 > input").each(function(){
	$(this).val(i);
})

//--------------------------------------------------------------------------------
//添加onmouseover和onmouseout
var div_list = document.getElementById("divframe").getElementsByTagName("div");
for(var i=0;i<div_list.length;i++){
	div_list[i].onmouseover = function(){
		this.className = "f8";
	};
	div_list[i].onmouseout = function(){
		this.className = "";
	};
};


$("#divframe > div").mouseover(function(){
	$(this).addClass("f8");
}).mouseout(function(){
	$(this).removeClass("f8");
})







//--------------------------------------------------------------------------------
//禁用或启用选中的控件
var tb_list = document.getElementsByTabName("input");
for(var i=0;i<tb_list.length;i++){
	if(tb_list[i].type == "text"){
		tb_list[i].disabled = true;//禁用
		tb_list[i].disabled = false;//开启
	}
}

$("input[type=\"text\"]").attr("disabled",true);
$("input[type=\"text\"]").attr("disabled",false);

//---------------------------------------------------
键盘事件
var tb_list = document.getElementsByTagName("input");
for(var i=0;i<tb_list.length;i++){
	if(tb_list[i].type == "text"){
		tb_list[i].οnkeyup=function(){
			event.cancelBubble = true;
			event.returnValue = false;
			alert(event.keyCode);
		}
	}
}

$("input[type=\"text\"]").keyup(function(event){
	event.cancelBubble = true;
	event.returnValue = false;
	alert(event.keyCode);
});

//--------------------------------------------------------------------------------

Attribute.indexOf(value);

//其中的常用的选择器
Attribute                包含该特性
Attribute=value          与value值相等
Attribute!=value         与value值不相等
Attribute^=value         以value开头
Attribute$=value         以value结尾
Attribute*=value         包含value

for example:
$("input[id][name$=\"4\"][type=\"text\"]").val("i");
筛选条件：
1 input控件
2 含有id属性
3 含有name属性，并且name值以4结尾
4 含有type属性，并且type的值为text

操作：
为符合以上条件的控件赋值：i