美文网首页JavaScript学习指南JQuery技术分享学习
常用的JS/jQuery技术和技巧(转载)

常用的JS/jQuery技术和技巧(转载)

作者: 猿来独往 | 来源:发表于2017-06-15 19:14 被阅读26次

    转载一篇博客
    原文链接为:http://blog.csdn.net/zollty/article/details/53944071

    1. 获取指定id的某个属性的值:

    例如获取id=myForm的表单的action属性的值
    document.getElementById("myForm").action
    也可以设置它的值:
    document.getElementById("myForm").action = "/cqrd/aa.action"
    获取指定name的某个属性的值,例如
    document.myForm.action

    2. 通过js去提交表单:

    document.getElementById("myForm").submit();
    即使myForm这个表单中没有<input type="submit" value="查询"/>
    也可以用此方法去提交表单。

    3. 跳转:

    document.location.href = "${ctx}/emp/delEmp.action?id="+id ;
    跳转实例:{根据所选的option的值执行跳转}
    onchange="location.href=this.options[this.selectedIndex].value">

    4. 正则表达式: 验证日期格式 2014-11-30

    如下:

    function validDate(str) {
    
       var reg = new RegExp("^201[0-9]-((0[1-9])|10|11|12])-((0[1-9])|(1[0-9])|(2[0-9])|30|31)$");
    
       return reg.test(str);
    
    }```
    
    正则表达式特殊符号转义,例如点、星号,反斜杠转义为 \.和\*
    ####5. 判断字符串长度:【中文算3个字符】
     方法如下:
    `var len = $("#taskName").val().replace(/[^\x00-\xff]/g,"***").length;`
    ####6. URL跳转:
    

    <body onload="JavaScript:document.location.href='${ctx}/dept/query.do'"></body>```

    7. JS字符串替换:

    replace(expr, target),第一个为正则表达式
    所以replace("a","b")只会替换第一个(匹配一次)。
    要全部替换,用:(匹配全部)
    replace(new RegExp(/(a)/g),'b') 注意不要在(a)上加单、双引号。

    8. 获取多选按钮的值:

    $("input[name='RA_CHO']").click(function(){ 
      var RA_CHO_value = ''; 
      $("input[name='RA_CHO']:checked").each(function(){ 
       RA_CHO_value += $(this).val() + ","; 
      }); 
      if(RA_CHO_value.length>0){ 
       RA_CHO_value = RA_CHO_value.substring(0, RA_CHO_value.length-1); 
      } 
      alert(RA_CHO_value); 
     });```
    ####9. jQuery设置标签为隐藏或显示动画(注意不是style)
    

    $(this).hide("fast");
    $(this).show("fast");
    //jquery判断标签是否为隐藏或显示状态
    if($("#a").is(":visible"))
    if($("#a").is(":hidden"))```

    10. jQuey AJAX模板:

    $.ajax({
        url: '/ax/text',
        type: 'POST',
        data: {
            eftDateBegin: $("#eftDateBegin").val(),
            eftDateEnd: $("#eftDateEnd").val()
        },
        dataType: 'json',
        timeout: 1000,
        success: function(data) {
            $("input#showTime").val(data[0].demoData);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert();
        }
    });```
    ####11. 常用JS函数:
    

    //判断是否为空
    function isNull(value) {
    if ((value == "") || trim(value).length == 0) return true;
    return false;
    }

    //是否以中文开头
    function isChinese(str) {
    if (trim(str) == "") {
    return false;
    }
    if (str.charCodeAt(0) < 0x4e00 || str.charCodeAt(0) > 0x9fa5) {
    return false;
    } else {
    return true;
    }
    }

    //验证字符串为数字
    function checkNum(tt, viewobj) {
    var reg = /\D/; /数字字符/
    if (reg.test(tt)) {
    if (viewobj && viewobj.tagName.toUpperCase() == 'SPAN') {
    viewobj.className = 'alertcolor';
    viewobj.innerHTML = '请输入数字';
    }
    return false;
    }
    return true;
    }```

    12. 异步加载js:

    //该匿名函数用于异步加载js
    (function()  {
        function  async_load()  {
            var  s  =  document.createElement('script');
            s.type  =  'text/javascript';
            s.async  =  true;
            s.src  =  'js/config.js';
            var  x  =  document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s,  x);
        }
        if  (window.attachEvent) {
            window.attachEvent('onload',  async_load);
        } else {
            window.addEventListener('load',  async_load,  false);
        }
    })();```
    ####13. JSON操作:
    
     1、字符串转换成JSON对象:
    用jQuery:
    `jQuery.parseJSON( data );`
    2、JSON对象转字符串
    用json2.js
    `text = JSON.stringify( jsonObj );`
    
    ####14. IE(<10)下面无法往table里面插入 innerHTML:
    例如:
    

    <html>
    <head>
    </head>
    <body>
    <table id="demo"></table>
    <P id="PP"></P>
    <script type="text/javascript">
    alert("xxxxxxxxxx");
    document.getElementById("PP").innerHTML= "ZZZZZZZZZZZZZZZZZZZZZ";
    document.getElementById('demo').innerHTML= "<tr><td>0000000000000000000</td></tr>";
    $("#demo").html("<tr><td>0000000000000000000</td></tr>");
    alert("ddddddddddd");
    </script>
    </body>
    </html>```

    table中是无法插入的innerHTML的。

    15. JS函数调用时,传字符串时一定要加上''(单引号):

    例如:
    download('${task.taskNo}'),如果不加'',则download函数无法执行
    如果是数字时,就无需加''(单引号)。

    16. 跨域访问:

    出 于安全的考虑,Web 浏览器从很早之前就定下“同域安全策略”的标准,默认情况下同一域名下的页面只能向同域(包括 CNAME 域名、端口)下的 URL 发送所有类型的 HTTP 请求。而向不同域的地址发送非 GET 请求时,默认情况下只能返回同域安全策略错误。

    对此,在发起上传或下载请求的时候,七牛的服务会返回相应的支持跨域的 Header:
    上传(upload.qiniu.com)

    Access-Control-Allow-Headers: X-File-Name, X-File-Type, X-File-Size
    Access-Control-Allow-Methods: OPTIONS, HEAD, POST
    Access-Control-Allow-Origin: *```
    
    
     下载(<bucket>.qiniudn.com)
    `Access-Control-Allow-Origin: *`
    
    **注意:本文来自转载,如有侵权,请联系作者删除**

    相关文章

      网友评论

        本文标题:常用的JS/jQuery技术和技巧(转载)

        本文链接:https://www.haomeiwen.com/subject/dvyuqxtx.html