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 
  • 你可能感兴趣的:(JavaScript)