javascript/jquery 常见功能实现(持续更新...)

1. input 只能输入整数数字和字母

$(document).on('keyup','#no',function(){
var val = $.trim($(this).val());
if(val == null || val == '')
return; $(this).val(val.replace(/[^0-9a-z]+/ig,'')); // 只能输入整数数字和字母
});

用 baidu 出来的很多其它实现方式的都是有问题的。它们不能够精确的表示“只能输入数字和字母”,因为它们预先输入标点符号,比如允许输入小数点 . 等符号。比如下面一个百度出来的答案:

value=value.replace(/[^\w\.\/]/ig,'')
value=value.replace(/[^\d|chun]/g,'')
value=value.replace(/[^\w\.\/]/ig,'')

上面答案都是有问题的。

$(this).on("keyup", function (event) {
var inputVal = $(this).val();//值
if (isNaN(inputVal)) {
alert("只能输入数字");
$(this).val("");
return;
}

实现只能输入数字,可以是小数。

2. email格式验证

function validate_email(myThis){
var val = $.trim($(myThis).val());
if(val == null || val == ""){
$("#email_error").text("email不能为空");
$(myThis).focus();
return;
} if(val != null && val != ""){
if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9]+)+$/g.test(val)){
$("#email_error").text("email格式错误");
$(myThis).focus();
return;
}
}
$("#email_error").text("");
}

email的正则表达式,还可以更加简单些,可以使用大小写忽略的写法:

if(!/^[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9]+)+$/gi.test(val))

i : 表示 insensitive(大小写不敏感), g:表示global.

3. 从字符串中提取整数数字和英文字母

$(function(){
var a = 'testAbc,。、,./电饭锅123def';
b = a.replace(/[^0-9]+/ig,"");
alert(b);
b = a.replace(/[^a-z]+/ig,"");
alert(b);
});

2,3的正则表达式正好说明了 ^ 的两种用法:1)表示以什么开始;2)表示否定;

4. jquery cookie插件使用

    var isFs = $(this).attr("datas");
$.cookie("isFs",isFs,{ expires: 7 });

5. 防御性编程:

        $.post("/ems/validateNo",indata, function(data){
if(data != null && data.result == 'error'){
$("#no_error").text(data.msg);
return false;
}
},'json');

在使用 data.result 之前,始终判断 data != null

等同于下面的更加简洁和专业的写法:

        $.post("/ems/validateNo",indata, function(data){
if(data && data.result == 'error'){
$("#no_error").text(data.msg);
return false;
}
},'json');

也就是将 if(data != null && data.result == 'error') 换成:if(data && data.result == 'error')

6. 单选 radio 的操作:

   学期:<input type="radio" name="which_term" value="1" />上学期
<input type="radio" name="which_term" value="2" />下学期

1) 获取选中的值:var term = $.trim($("input[name='which_term']:checked").val());

2) 选中特定的选项:$("input[name='which_term']:eq(0)").attr("checked",'checked');

7. 获取 多选 checkbox 的多个值:

          <c:forEach var="priv" items="${list }">
<tr class="odd gradeX">
<td><input type="checkbox" name="priv_id" value="${priv.id}" /></td>
<td><c:out value="${priv.name}"/></td>
<td><c:out value="${priv.permission}"/></td>
</tr>
</c:forEach>

使用jquery获取 <input type="checkbox" name="priv_id" value="${priv.id}" /> 被选中的所有的 priv_id 组成的数组:

            //jquery获取复选框值
var priv_ids =[];//定义一个数组
$('input[name="priv_id"]:checked').each(function(){ // 遍历每一个name为priv_id的复选框,其中选中的执行函数
priv_ids.push($.trim($(this).val())); // 将选中的值添加到数组priv_ids中
});
console.log(priv_ids);

(注意:定义数组的方式:var arr = []; 定义对象的方式: var obj = {}; )

8. 下拉框 select 值的获取

     学年:<select id="learn_time" name="learn_time">
<option value="2014">2014</option>
<option value="2015" selected = "selected">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>

获取select中被选中的项对应的value:

var time = $.trim($("#learn_time").val());

注意 select下拉框选中是用: selected = "selected", 而单选 input type="radio", 多选 input type="checkbox", 选中都是使用 checked="checked"

注意:区分一下 input type="radio", input type="checkbox", 以及 select 下拉框.

select分页时选择:

    //var currentPage = $("#pageNum").val();
//$("#selectPages").find("option").eq(currentPage-1).attr('selected', 'selected');

9. table 表格获取行数,所在行,所在列

//获取表的总行数 tr

$("table[id='st_table']>tbody").children("tr").length;

或者:

$("#st_table > tr").length;

//获取所在行的行号

$(this).parent().prevAll().length + 1;  //行号

//获取所在列的列号

$(this).prevAll().length + 1;  //列号

10. 取页面上table中的数据

    var data = [];
var tr_list = $("table[id='sc_table']>tbody").children("tr"); for(var i=0; i<tr_list.size(); i++){
var tr = tr_list.eq(i);
var name = $.trim(tr.children("td").eq(0).text());
var count = parseInt($.trim(tr.children("td").eq(1).text()));
data[i] = { label: name, data: count };
}

上面的代码,取页面上 id='sc_table' 的表格的每一个行的第一列和第二列的数据,组成一个对象,所有对象组成一个数组。

11. 日期选择器 My97DatePicker

<script language="javascript" type="text/javascript" src="${ctx}/js/My97DatePicker/WdatePicker.js"></script>

<input class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" name="begintime" id="begintime" />
<input class="Wdate" type="text" onClick="WdatePicker()" name="deadtime" id="deadtime" />

默认的 WdatePicker()等价于:WdatePicker({dateFmt:'yyyy-MM-dd') 没有 时分秒,只有年月日。

12. jqGrid jquery插件,ajax分页,显示表格数据

http://blog.mn886.net/jqGrid/

. jquery 客户端防止用户快速点击提交

// 所有ajax请求的通用前置filter
var pendingRequests = {};
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
  if(key.indexOf('.html') != -1)
    return;
var key = options.url;
if (!pendingRequests[key]) {
pendingRequests[key] = jqXHR;
} else {
jqXHR.abort(); // 放弃后触发的重复提交
//pendingRequests[key].abort(); // 放弃先触发的提交
} var complete = options.complete;
options.complete = function(jqXHR, textStatus) {
pendingRequests[key] = null;
if ($.isFunction(complete)) {
complete.apply(this, arguments);
}
};
});

其实还是要在服务端也实现一遍。

. 判断是否是数字,包括小数

function isNumeric(s){
if (s!=null && s!=""){
return !isNaN(s);
}
return false;
}

15. 数组去重

function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}

利用的原理是:对象的属性,其实就相当于一个 map,属性名就是 map的key,属性值就相当于map的value。所以其实是利用map来去重的。我们知道map的key是不可能重复的。对象的属性名也不可能重复。

上一篇:关于无法下载android开发工具的解决方法


下一篇:Android Studio重构之路,我们重新来了解一下Google官方的Android开发工具