zoukankan      html  css  js  c++  java
  • web开发中经常使用的js

    将自己在web开发中经经常使用到的一些JS总结一下。

    1.改动标签和表单的值

    改动标签的值:
    var customer = document.getElementById("custm" ).innerHTML;
    alert(customer);
    document.getElementById( "custm").innerHTML = "name"

    改动控件(input)的值:
    var userName = document.getElementById("userName");
    alert(userName.value);
    userName.value = "new value" ;

    2.js提交form表单
    function updateInfo(formName) {
        var form = document.getElementById(formName);
        form.submit();
    }

    3.自己定义html中file控件
    <input type= "file" id ="fileupload" name= "fileupload" style="display :none"/>
    <input type= "button" onclick ="fileupload.click()" id="uploadFileButton" value="浏 览 ..." class ="btn"/>
    <input type="submit" name= "submit" value ="上传"  onclick="return ajaxFileUpload();" class="btn">

    4.实现多个复选框的多选和单选

    全选
    function checkAll(checkall_id, checkName) {
         var checkArr = document.getElementsByName(checkName);
         var checkAll = document.getElementById(checkall_id);
         if(checkAll.checked == true ) {
              for (var i=0; i<checkArr.length; i++) {
                 checkArr[i].checked = true ;
             }
        } else {
              for (var i=0; i<checkArr.length; i++) {
                 checkArr[i].checked = false ;
             }
        }
    }
    单选
    function checkSingle(single_id, checkName) {
         var checkArr = document.getElementsByName(checkName);
         var checkSingle = document.getElementById(single_id);
         for( var i=0; i<checkArr.length; i++) {
              if (checkArr[i].value != single_id) {
                 checkArr[i].checked = false ;       
             } else {
                 checkArr[i].checked = true ;
             }
        }
    }

    4.在载入页面的时候调用js方法
    <script type="text/javascript">
    window.onload=function() //用window的onload事件,窗口载入完成的时候
    {
       //do something
    }
    </script>


  • 相关阅读:
    MVC视图展现模式之移动布局解析-续集
    网站就必须用响应式布局吗?MVC视图展现模式之移动布局
    用Word写博客园文章
    扩:new and override
    通告
    List-style-type属性失效
    在线浏览PDF之PDF.JS (附demo)
    08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储
    07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
    06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/6756295.html
Copyright © 2011-2022 走看看