JavaScript备忘

最新推荐文章于 2022-12-17 16:21:47 发布

原创最新推荐文章于 2022-12-17 16:21:47 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

欢迎转载，转载请注明原地址，谢谢！

文章标签：

#javascript

Web前端专栏收录该内容

99 篇文章

订阅专栏

js创建数组的方式

var arr=new Array()
arr.push("zhangsan");
arr[1]="lisi";

或

var arr=["zhangsan"];//var arr=[];
arr.push("lisi");
arr[2]="wangwu";

js创建对象（以及键值对、Map）的方式

var obj=new Object();
obj.name="zhangsan";

或

var obj={name:"zhangsan"};//var obj={};
obj.sex="1";

或

var obj=function(){}
obj.name="zhangsan";

找出元素在数组中的索引

js数组没有indexOf方法，不过可以借助JQuery的inArray方法

$.inArray(element,array)

字符串转数字

new Number(str)
Number(str)
parseInt(str)
parseInt(str,进制)
parseFloat(str)

判断checkbox是否选中：

document.getElementById(checkbox_id).checked
$(checkbox_id).get(0).checked
$(checkbox_id).is(":checked")
$(checkbox_id).attr("checked")

dwr设置同步与异步

DWREngine.setAsync(false);//设置dwr为非异步（同步）
...//dwr调用
DWREngine.setAsync(true);//还原dwr为异步

或者

dwr.engine.setAsync(false);//设置dwr为非异步（同步）
...//dwr调用
dwr.engine.setAsync(true);//还原dwr为异步

设置和获取属性值

document.getElementById(id).setAttribute(attrName,attrValue);
attrValue=document.getElementById(id).getAttribute(attrName);

$(id).attr(attrName,attrValue);
attrValue=$(id).attr(attrName);

//data方式常用于存放数据
$(id).data(attrName,attrValue);
attrValue=$(id).data(attrName);

格式化小数

不四舍五入保留2位小数，不够位数，则用0填充

var result=num.toFixed(2);

四舍五入保留2位小数，不够位数，则用0填充

function toFixedAndRound(num) {
  var result = parseFloat(num);
  if (isNaN(result)) {
    return result;
  }
  result = Math.round(num * 100) / 100;
  var s= result.toString();
  var i= s.indexOf('.');
  if (i< 0) {
    i = s.length;
    s+= '.';
  }
  while (s.length <= i+ 2) {
    s += '0';
  }
  return s;
}

iframe获取兄弟节点iframe对象

var brotheriframe = window.parent.兄弟节点iframe的id或name;

校验

jqueryvalidation

官网：
jquery校验插件官方网站
示例：

validation-engine

地址：http://code.ciaoca.com/jquery/validation-engine/
示例：

自己写统一校验方法

function verifyForm(){
        var requireds = $("input[required=required]");//还可以根据length属性校验长度，根据type属性校验数据类型以此类推，甚至可以在输入元素里增加regex属性，直接用正则判断是否合法。
        for(var i=0;i<requireds.length;i++){
            var box=requireds[i];
            if(box.value==""){
                $("#msg").html(box.name+"为空");//box.name可以使用某种方法替换成对应中文，如在属性里加个zh_name
                return false;
            }
        }
        return true;
    }

表单工具

jquery.form

树tree

zTree

dTree

table框架

datatables

官网：
示例：

文件操作框架

文件上传框架

plupload

plupload支持进度条功能，在上传多个文件时，是把每个文件分开上传处理的，就是说一次请求服务器只会收到一个文件，plupload会多次请求来上传多个文件，并且每上传一个文件成功后，进度都会刷新。

官网：http://www.plupload.com/
示例：

uploadify

示例：

<a href="javascript:;" id="uploadify">浏览</a><br/>
<script>
            $("#uploadify").uploadify({
                swf             : "assets/Plugin/uploadify/uploadify.swf",
                queueID         : "queuediv",
                buttonClass     : "btnCls",
                onUploadSuccess : function(file, data, response) {
                    var json = eval("("+data+")");
                    if(json.success){
                        $("#artImgInput").val(json.newName);
                        $("#artImg").attr("src",json.spath+"/"+json.newName);
                    }
                }
            });
</script>

日期选择器

图标工具

fontawesome

官网：http://fontawesome.dashgame.com/
官网2：www.bootcss.com/p/font-awesome/design.html

下拉框

bootstrap下拉框

bootstrap-select

多选下拉框

jquery-multi-select

带搜索下拉框

select2
官网：https://select2.org/

加载模态显示

showLoading

图片拖拽工具

图片缩略图、裁剪工具

图片大图展示、翻页图片工具

jquery.boilerplate

官网：
http://plugins.jquery.com/boilerplate/
https://jqueryboilerplate.com/
https://github.com/jquery-boilerplate/jquery-boilerplate

富文本编辑器

kindeditor

官网：http://kindeditor.net/
示例：

<script type="text/javascript" src="assets/Plugin/kindeditor/kindeditor.js"></script>
<textarea id="newsContent" name="newsEn.newsContent" style="width:1010px; height:380px;">${requestScope.newsEn.newsContent }</textarea>
<script>
            editor = KindEditor.create("textarea[id='newsContent']",{
                formData: {"folder":"fixed"},
                resizeMode : 1,
                allowImageUpload : true,
                urlType : 'absolute',
                allowPreviewEmoticons:false,
                uploadJson : "uploadAction!HtmlEditorUpload.action",
                items:StaticParam.items
            });
</script>

<script type="text/javascript" src="<%=path%>/resources/js/kindeditor-4.1.10/kindeditor.js"></script>
<script type="text/javascript" src="<%=path%>/resources/js/kindeditor-4.1.10/plugins/code/prettify.js"></script>
<script type="text/javascript" src="<%=path%>/resources/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<textarea type="text" value="" name="content" style="height:500px;" class="edit_text" id="article.content1"></textarea>
<script>
    KindEditor.ready(function(K) {

        var editor1 = K.create('textarea[id="article.content1"]', {

            uploadJson : '<%=path%>/upload_json.jsp',

            // 获取远程服务器的文件
            fileManagerJson : '<%=path%>/file_manager_json.jsp',

            allowFileManager : true,

            afterBlur:function(){this.sync();}
        });

        prettyPrint();

    });
</script>