JS库初学求答案

//等待页面加载完后，执行如下代码
window.onload=function () {
    //console.log(1);//扩展console输出的函数有哪些？    //捕捉登录按钮的单击事件
    //当被单击时
    document.getElementById("btnSubmit").onclick=function(){
        //console.log(1);        //获取用户输入的两个input值
        var tipsEl=document.getElementById("tips");        var userNameEl=document.getElementById("userName");
        var userNameVal=userNameEl.value;
        //判断是否符合验证逻辑
            //如果否，在按钮旁边 显示 红色的错误提示
        if(userNameVal==""){
            tipsEl.innerHTML="用户名必填！";
            userNameEl.style.borderColor="red";
            userNameEl.focus();
            return;
        }
        tipsEl.innerHTML="";
        userNameEl.style.borderColor='#90A9B7';        var passWordEl=document.getElementById("passWord");
        var passWordVal=passWordEl.value;
        if(passWordVal==""){
            tipsEl.innerHTML="密码必填！";
            passWordEl.style.borderColor="red";
            passWordEl.focus();
            return;
        }
        tipsEl.innerHTML="";
        passWordEl.style.borderColor='#90A9B7';
        //如果都符合，提交表单
        document.getElementById("loginForm").submit();
    };};//等待页面加载完后，执行如下代码
ready(function () {    //捕捉登录按钮的单击事件
    //当被单击时
    click("btnSubmit",function(){
        //获取用户输入的两个input值
        //判断是否符合验证逻辑
            //如果否，在按钮旁边 显示 红色的错误提示
        if(val("userName")==""){
            html("tips","用户名必填！");
            css("userName","borderColor","red");
            focus("userName");
            return;
        }
        html("tips","");
        css("userName","borderColor","#90A9B7");        if(val("passWord")==""){
            html("tips","密码必填！");
            css("passWord","borderColor","red");
            focus("passWord");
            return;
        }        
        html("tips","");
        css("passWord","borderColor","#90A9B7");
        //如果都符合，提交表单
        $("loginForm").submit();
    });});//按传入标签的ID获取对应标签的对象
function $(id){
    
}
//按传入标签的ID获取对应标签的Value值
//如果传入第二个参数，就理解为不是获取value，而是改变value
function val(id,content){ 
    
}
//按传入标签的ID以及HTML内容去改变对应标签的innerHTML
//如果没有传入第二个参数，就理解为获取innerHTML
function html(id,content){  
    
}
//按传入标签的ID以及样式名称、样式值去改变对应标签、对应样式的值
//如果没有传入第三个参数，就理解为获取对应标签、对应样式的值
function css(id,cssName,cssValue){ 
    
}
//按传入标签的ID聚焦
function focus(id){
    
}//当文档加载完成后执行
function ready(callback){
    
}
//当标签被单击时执行
function click(id,callback){
    
}将JS文件一分拆成下面两个JS文件，那么第三各JS的空应该怎样填？

解决方案 »

  1.   


     //按传入标签的ID获取对应标签的对象
      function $(id) {
        return document.getElementById(id)
      }
      //按传入标签的ID获取对应标签的Value值
      //如果传入第二个参数，就理解为不是获取value，而是改变value
      function val(id, content) {
        document.getElementById(id).value = content
      }
      //按传入标签的ID以及HTML内容去改变对应标签的innerHTML
      //如果没有传入第二个参数，就理解为获取innerHTML
      function html(id, content) {
        document.getElementById(id).innerHTML = content
      }
      //按传入标签的ID以及样式名称、样式值去改变对应标签、对应样式的值
      //如果没有传入第三个参数，就理解为获取对应标签、对应样式的值
      function css(id, cssName, cssValue) {
        document.getElementById(id).style[cssName] = cssValue
      }
      //按传入标签的ID聚焦
      function focus(id) {
        document.getElementById(id).focus()
      }  //当文档加载完成后执行
      function ready(callback) {
        callback()
      }
      //当标签被单击时执行
      function click(id, callback) {
        document.getElementById(id).onclick = function () {
          callback()
        }
      }
      

  2.   


     function ready(callback) {
      window.onload = function () {
       callback()
      }   
     }