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,'')

上面答案都是有问题的。

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

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 下拉框.

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

//获取表的总行数 tr

$("table[id='st_table']>tbody").children("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/