常用的JS/jQuery技术和技巧
2013年02月10日


获取指定id的某个属性的值

例如获取id=myForm的表单的action属性的值

document.getElementById("myForm").action

也可以设置它的值:

document.getElementById("myForm").action = "/cqrd/aa.action"


获取指定name的某个属性的值,例如

document.myForm.action


通过js去提交表单:

document.getElementById("myForm").submit();

即使myForm这个表单中没有<input type="submit" value="查询"/>

也可以用此方法去提交表单。


跳转:

document.location.href = "${ctx}/emp/delEmp.action?id="+id ;


跳转实例:{根据所选的option的值执行跳转}

onchange="location.href=this.options[this.selectedIndex].value">


正则表达式: 验证日期格式  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);

}


正则表达式特殊符号转义,例如点、星号,反斜杠转义为 \.和\*



判断字符串长度。【中文算3个字符】
方法如下:
var len = $("#taskName").val().replace(/[^\x00-\xff]/g,"***").length;


URL跳转

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


JS字符串替换:

replace(expr, target),第一个为正则表达式

所以replace("a","b")只会替换第一个(匹配一次)。

要全部替换,用:(匹配全部)

replace(new RegExp(/(a)/g),'b')  // 注意不要在(a)上加单、双引号。


获取多选按钮的值:

$("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); 
 });


jQuery设置标签为隐藏或显示动画(注意不是style)

$(this).hide("fast");

$(this).show("fast");

jQuery判断标签是否为隐藏或显示状态

if($("#a").is(":visible"))

if($("#a").is(":hidden"))


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();
    }
});


常用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; 
}


异步加载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);
    }
})();


JSON操作
1、字符串转换成JSON对象
jQuery
jQuery.parseJSON( data )
2、JSON对象转字符串
json2.js
text = JSON.stringify( jsonObj );



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的。



JS函数调用时,传字符串时一定要加上''(单引号)
例如:
download('${task.taskNo}'),如果不加'',则download函数无法执行
如果是数字时,就无需加''(单引号)




跨域访问


出 于安全的考虑,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: *