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