JS

js常用代码记录

记录一些js常用代码

Posted by wenfengSAT on March 24, 2018

js常用代码记录

本篇博客用于记录使用EasyUI时遇到的问题

//js动态实现不可编辑状态
$("#id").attr("readOnly",true); 不可编辑,可以传值

$("#id").attr("disabled",true);不可编辑,不可以传值
 
//去除空格
function trim(str){ 
  return str.replace(/(^\s*)|(\s*$)/g, ""); 
}
	
//保存小数点两位数
console.log(parseFloat("1").toFixed(2));

JS设置checkbox 为选中和未选中状态
$("#checkAll").attr("checked",false);//重新请求数据的时候把全选框变为未选中
if ($("#checkbox-id")get(0).checked) {
    // do something
}
方法二:
if($('#checkbox-id').is(':checked')) {
    // do something
}
方法三:
if ($('#checkbox-id').attr('checked')) {
    // do something
}

//显示隐藏
$('#autoValidateCodeTd,#autoValidateCodeOther').fadeIn();
$('#autoValidateCodeTd,#autoValidateCodeOther').fadeOut();

show()  hide()


CSS用word-spacing属性来设置单词的间距


js调用父框架函数
window.parent.frames.父框架函数名()

js获取元素并且循环语法示例:
 $("#issue_tracker_id, #issue_status_id").each(function(){
    $(this).val($(this).find("option[selected=selected]").val());
  });

JSON转JS对象,JS对象转JSON
一、从服务端发来的json字符串,怎么才能作为JavaScript对象(JSON对象)在web端调用呢?

1、如果使用jQuery,就很方便了,可以在ajax一系列函数中,把参数Datatype传json即可,返回的data即为JSON对象。

PS:如果要对表单处理为json字符串,可以使用.serialize()与.serializeArray()处理,如果要作为URL调用,则可以使用jQuery.param()处理。

2、$.parseJSON( jsonstr)

3、浏览器自带的JSON.parse(jsonstr)

4、使用字符串转代码功能

  eval('(' + jsonstr + ')');(不推荐,会执行代码)

5、使用json官方的json.js

  parse()方法

二、json对象转字符串

1、JSON.stringify(jsonobj);

2、obj.toJSONString()


JS循环遍历json,拼接想要的格式,可以用来做博客分页处理
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">

        .p1{
            font-size: 14px;
            color: #000;
        }
        .p2{
            font-size: 12px;
            color: #b0b0b0;
        }
        .p3{
            font-size: 14px;
            color: #ff5f19;
        }
        .product{
            width:100%;
            position: relative;
            margin: 20px 0 5px 0;
            height: 100px;
            background: #fafafa;
        }

        .img{
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 20px;
        }
        .p{
            display:inline-block;
            float:left;
            width:50%;
            margin-top:6px;
            font-family: Microsoft YaHei;
        }
        .p1{
            margin-top:16px;
        }



    </style>
    <script>
        //页面加载   获取全部信息
        $(function(){
            $.ajax({
                type: "get",//请求方式
                url: "https://raw.githubusercontent.com/wenfengSAT/data/master/v2ex/api/nodes/all.json",
                dataType: "json",
				success: function(result){
					addBox(result);
                }
            });
            /*$.get("item.json",function(result){
                //result数据添加到box容器中;
                addBox(result);
            });*/
        });
        function addBox(result){
            //result是一个集合,所以需要先遍历
            $.each(result,function(index,obj){
                $("#box").append("<div class='product'>"+//获得图片地址
                    "<div><img class='img' src="+obj['url']+"/></div>"+
                    //获得名字
                    "<div class='p1 p'>"+obj['name']+"</div>"+
                    //获得性别
                    "<div class='p2 p'>"+obj['sex']+"</div>"+
                    //获得邮箱地址
                    "<div class='p3 p'>"+obj['email']+"</div>"+
                    "</div>");
            });
        }
    </script>
</head>
<body>
<!-- 构建装一个容器 -->
<div id="box">
</div>
</body>
</html>