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].onkeyup=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