小知识随手记（二）

13、验证文件名：（亲测有效）

var reg = /^(?!.)[^\/:*?"<>|]{1,255}$/;
var str = 'gggggggggggkkkk';
reg.test(str);

微软文件名命名规则：（1）不允许添加： / " ? < > * | 等9个字符；（2）不超过255字符。

//验证文件名是否合法
function validateFileName(val){
    var reg = /^(?!.)[^\/:*?"<>|]{1,255}$/;
    if(!reg.test(val)){
        return false;
    }
    return true;
}

给数据网格加事件委托：

$("#shareFtable").on("blur",".editable",function(){
        var id = $(this).attr("rowid");
        var text=$(this).val();
        if(text != "" && !validateFileName(text)){
            dialogMsg("文件名不合法，请重新输入！",0);
            $("#shareFtable").jqGrid("delRowData",id);
        }
        var vals = $("#shareFtable").jqGrid("getRowData");
        if (vals != '') {
            for (var i = 0; i < vals.length; i++) {
                if (vals[i].allowCode.toLowerCase() == text.toLowerCase()) {
                    dialogMsg("请输入不同的信任共享名！",0);
                    $("#shareFtable").jqGrid("delRowData",id);
                }
            }
        }
        
        if($.isNullOrEmpty(text)){
            $("#shareFtable").jqGrid("delRowData",id);
        }else{
            $("#shareFtable").jqGrid("saveRow",id);
            setsharedNameDb();
        }
    });

15、让input输入框与img在同一行居中对齐，由于经常会使用到，默认情况下将input和img放同一行，img标签总是比input高出一个头。

在写css时，使得input和img在同一行居中对齐的方法：行内元素均加上vertical-align:middle

input,img{
    vertical-align:middle;
}

16、关于"：hover " 定义和用法：

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

.input-group-addon:hover{
    cursor:pointer;
}
//作用于span元素

17、jQuery的toggle()方法使用：（toggle()里面2个函数）

$("#ulParent > li > .divParent").find("img").remove();//删除div下的img元素
$("#ulParent > li > .divParent").append('<i class="fa fa-angle-double-up" aria-hidden="true" style="float: right;line-height: 44px;margin-right: 15px;"></i>');
//给div追加字体图标i标签
//toggle()方法：2个函数，点击互换字体图标
$("#ulParent > li > .divParent").toggle(function(){
      $(this).find("i").removeClass("fa-angle-double-up");
      $(this).find("i").addClass("fa-angle-double-down");
   },function(){
      $(this).find("i").removeClass("fa-angle-double-down");
      $(this).find("i").addClass("fa-angle-double-up");
});

18、attr()与removeAttr()：

一、attr():返回值string

.attr(name|properties|key,value|fn)

1>、获取元素的属性：

$("img").attr("src");

2>、设置元素属性：

$("img").attr("src","test.jpg");   //单一
$("img").attr({src:"test.jpg",alt:"abc"});//多个

3>、可为函数：

$("img").attr("title", function() { return this.src });

二、removeAttr(name)：返回值jQuery

$("img").removeAttr("src");//删除一个属性
$("img").removeAttr("src alt");//删除多个属性
$("img").attr({src:"",alt:""});

19、用坐标定位背景图标：下面是所有图标放进去的大图

    .skin-green .computerStyle{
        background:url(${basePath}/images/public/icon_skin1.png) no-repeat 0px -40px;
    }
    .skin-red .computerStyle{
        background:url(${basePath}/images/public/icon_skin1.png) no-repeat 0px -120px;
    }
    .skin-purple .computerStyle{
        background:url(${basePath}/images/public/icon_skin1.png) no-repeat 0px -80px;
    }
    .skin-blue .computerStyle{
        background:url(${basePath}/images/public/icon_skin1.png) no-repeat 0px 0px;
    }
    .skin-yellow .computerStyle{
        background:url(${basePath}/images/public/icon_skin1.png) no-repeat 0px -160px;
    }

根据红色坐标去定位大图里的小图标

20、table布局相关

<td colspan="3"> </td>

colspan：列合并，后面是是合并的数量

rowspan：行合并，后面是是合并的数量

border-collapse:collapse;为表格设置合并边框模型