js技术积累--个人笔记(一)

2018-09-14 window.location.search.substring(1) 的作用?

JS 脚本捕获 当前页面 GET方式请求链接 GET 的请求参数,其实直接使用 window.location.search 获得,然后通过 split 方法结合循环遍历自由组织数据格式。

2018-07-30 js脚本的几种使用情况

//1.行内样式使用js脚本
<html>
    <head>

    </head>
    <body>
        <!--行内样式使用js脚本-->
        <p onclick="javascript:alert('helloword');">点我</p>
        <p onclick="javascript:alert('helloword');">点我</p>
    </body>
</html>

//2.js内嵌
<html>
    <head>
        <!-- html的注释 -->
        <script type="text/javascript">
            //js的单行注释
            /*
            js的多行注释
            */
            alert("内嵌样式的js脚本");
        </script>
    </head>
    <body>
    </body>
</html>
//3.js外链
<html>
    <head>
        <script src="js/helloword.js">
        </script>
    </head>
    <body>
    </body>
</html>

2018-07-13 js中遍历数组或者集合 arr.forEach(function(e){ })

if(selectedRows && selectedRows.length > 0) {
            var arr = [];
            selectedRows.forEach(function(e) {
                arr.push(e.getSimpleData());
            })
            viewModel.events.AuditPage(arr);
 }

2018-07-11 js和jquery的最主要的区别:
 JS操作样式的方法只能获取内联样式,不能取内嵌的和外部的!!!!!JQUERY操作样式的方法可以是内联的也可以是内嵌的
 除了这个区别外,主要的区别在于用法上:

 js:document.getElementById("a")
 jquery:$("#a")

2018-07-06 zTree点击树的节点时,这个节点展开、
如下图:当我点击001-001时,001的子节点就显示出来。而不是点中无效果,先左侧的小箭头在下拉,太反人类了。
这里写图片描述
对应这部分的代码如下:

var treeObj = $.fn.zTree.getZTreeObj(treeId);
var node = treeObj.getSelectedNodes()[0];
var parentZNode = treeObj.getNodeByParam("id", node.id, null);
if(parentZNode.check_Child_State == "-1"){
parentId=node.id;
viewModel.events.expand();//更新数据方法
}

expand : function(){
                $.ajax({
                    type : 'GET',
                    url : ctrlBathPath+'/getTreeByParentId',
                    data : {"parentId":parentId},
                    m_meta:m_meta,
                    success : function(result) {
                        if(result.flag == 'SUCCESS'){
                            var dataObj = result.data;
                            var zNodes = [];
                            var treeObj = $.fn.zTree.getZTreeObj(treeId);
                                /*子节点*/
                                var parentZNode = treeObj.getNodeByParam("id", parentId, null);
                                if(parentZNode.check_Child_State == "-1"){
                                    for (var i =0; i< dataObj.length; i++){
                                        console.info(dataObj[i].depmethodCode);
                                        var newNode = {id:dataObj[i].id,pId:dataObj[i].parentId,name:dataObj[i].code + '-' +dataObj[i].name,code:dataObj[i].code,isLeaf:dataObj[i].isLeaf,levelNum:dataObj[i].levelNum,jildw:dataObj[i].jildw,netSalvageRate:dataObj[i].netSalvageRate,yujsynx:dataObj[i].yujsynx,depmethodName:dataObj[i].depmethodName,description:dataObj[i].description};
                                        treeObj.addNodes(parentZNode, newNode);
                                    }
                                }

                                if(dataObj.length<1){
                                    parentZNode.isParent=false;
                                    treeObj.updateNode(parentZNode);
                                }
                            for(var i=0;i<dataObj.length;i++){
                                var node=treeObj.getNodeByParam("id", dataObj[i].id, null);
                                if(dataObj[i].isLeaf == 0){
                                    node.isParent=true;
                                    treeObj.updateNode(node);
                                }
                            }
                        } else {
                            u.showMessage({msg:result.msg, msgType:"error"});
                        }
                    }
                });
            },

2018-07-05 两种参数传递的ajax方式
1.GET方式传递简单的参数

$.ajax({
        type : 'GET',
        url : ctx + '/allocationStandard/getAssetType',
        data : {id:id},
        async:false,
        success : function(result) {
            if(result.flag == 'SUCCESS'){

            } else {

            }
        }
});

2.POST方式传递复杂的封装为实体的参数

$.ajax({
          type : 'POST',
          url : ctrlBathPath+'/CopyAssetTypeInfo',
          contentType: 'application/json',
          data:JSON.stringify(queryData),
          success : function(result) {
                if(result.flag=='SUCCESS'){

                }else{

                }
          }
});

2018-07-05 class选择器绑定事件加载次数多了发现绑定触发的方法也多次执行的解决办法:每次都是先解绑后在绑定!

.off(‘click’):解绑点击事件
on(‘click’,function(){…}):重新绑定事件

$(".startUse").off('click').on("click",function(){
      var id= $(this).parent().parent().attr('id');
      var version= $(this).parent().parent().attr('version');
      var params={};
      params['id']=id;
      params['version']=version;
      params['status']="1";
      viewModel.events.updateAssetTypeStatus(params);
});

2018-07-04 ajax传递实体类,在controller层自动封装为实体的前后台

1.前台js封装数据

            var addObj={};
            addObj['classifyId']=classifyId;
            addObj['classifyCode']=classifyCode;
            addObj['classifyName']=classifyName;
            addObj['code']=code;
            addObj['name']=name;
            addObj['description']=description;
            addObj['yujsynx']=yujsynx;
            addObj['netSalvageRate']=netSalvageRate;
            addObj['depmethodCode']=zjffCode;
            addObj['depmethodName']=zjffName;
            addObj['jildw']=jldwCode;
            viewModel.events.addOneAssetTypeClassify:function(addObj);

2.格式化数据并ajax POST到后台,主要注意数据类型:application/json,格式化用JSON.stringify()格式化

addOneAssetTypeClassify:function(queryData){
             $.ajax({
                 type : 'POST',
                 url : ctrlBathPath+'/addOneAssetType',
                 contentType: 'application/json',
                 data:JSON.stringify(queryData),
                 success : function(result) {
                     if(result.flag=='SUCCESS'){
                         u.showMessage({msg:"新增成功!",msgType:"success"});
                         $('#standardModal').modal('hide');
                         viewModel.events.queryAssetSortList();
                     }else{
                        u.showMessage({msg:result.msg,msgType:"error"});
                     }
                 }
             });
  }

3.后台controller接受数据:@RequestBody转换成实体。你也可以用request.getParameter(“”)方法获取后,用JSONObject.parseObject(a,a.class);来转换。

    @RequestMapping(value="/addOneAssetType",method = RequestMethod.POST)
    @ResponseBody
    public  Object addOneAssetType(@RequestBody SysEleAssettypeClassify params){
            Map<String, Object> result = new HashMap<String, Object>();
           try {
               //判断编码有无重复
               int count = sysEleAssettypeClassifyService.getAssetSortCountByCode(params.getCode());
               if(count==0){
                 //执行新增
               }else{
                   result.put("flag", RESULTFLAGS.ERROR.toString());
                   result.put("msg", localMessageSource.getMessage("10112"));
               }

           } catch (Exception e) {
               result.put("flag", RESULTFLAGS.ERROR.toString());
               result.put("msg", localMessageSource.getMessage("10114"));
               logger.error(localMessageSource.getMessage("10114"), e);
           }
           return result;
    }

2018-07-04 对搜索框绑定输入实时查询事件

这里写图片描述
页面的搜索框:<input type="text"placeholder="请输入检索条件......" class="gs-input" id="tree-searchInput"/>
js绑定事件:

   /*按下回车键触发*/
        $(".gs-input").keydown(function(event){
            if(event.keyCode == "13"){
                //执行查询的方法。。。
            }
        });
        /*搜索输入框*/
        $(".gs-input").keyup(function(event){
            if($.trim($(this).val()) == ''){
                //清空查询条件后才搜索
            }
        });

2018-07-04 js中对字符undefined和null的判断
如果想判断var exp是不是为null或者为undefined,可以通过这个判断:

if (exp == undefined){
    alert("字段为空!")
}else{
    alert("字段有值!")
}

因为当exp为null时,也会进第一个方法。
如果就想去分开undefined和null,就要用typeof

if(typeof(exp) == "undefined"){
    alert("字段未定义!")
}

2018-06-06 输入框输入值随时查询的动作js

input输入框:
  <div class="global-search  pull-left">
     <input type="text" placeholder="请输入检索信息......" id="params" class="gs-input" maxlength="50" />
           <i class="fa fa-search" id="searchParams"></i>
  </div>
对应js:
 /*搜索按钮*/
        $('#searchParams').on('click',function(){
            viewModel.events.queryBill();
        });

        /*按下回车键触发*/
        $("#params").keydown(function(event){
            if(event.keyCode == "13"){
                viewModel.events.queryBill();
            }
        });

        $("#params").keyup(function(event){
            if($.trim($(this).val()) == ''){
                viewModel.billDataTable.pageIndex(0);
                viewModel.events.queryBill();
            }
        });

2018-06-05 js操作checkBox

首先页面元素是这样的。
<div class="orginfo-item clearfix">
    <div class="orginfo-title pull-left">是否主管部门:</div>
     <div class="orginfo-detail pull-left">
         <label class="u-checkbox" id="chk">
             <input type="checkbox" id="disableChk" class="u-checkbox-input">
             <span class="u-checkbox-label"></span>
         </label>
     </div>
 </div> 

对应页面效果:
这里写图片描述
1.设置为勾选中

 $("#chk").addClass('is-checked');

2.设置为不可操作

 $("#disableChk").attr('disabled',true);

如果有绑定事件,解绑的js为:

<div class="orginfor-group">
     <div class="orginfo-item clearfix">
          <div class="orginfo-title pull-left">主管部门:</div>
          <div class="orginfo-detail pull-left">
              <div class="orgname clearfix">
                  <input type="text" id="depart-head" readonly="readonly" class="orgname-text pull-left"/>
                  <em class="fa fa-search search-unit"></em>
              </div>
          </div>
      </div>
  </div>
其对应的绑定事件:
   /*选择主管部门的查询按钮时对应动作*/
 $('.search-unit').on('click', function() {
    viewModel.events.querySuperOrgOfSameRegion();
    $('#directorModal').modal('show');
  });
 对应的解绑事件:
$('.search-unit').unbind('click');

2018-05-22 js获取UUID

 var uuid = function uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; 
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
        s[8] = s[13] = s[18] = s[23] = "-";     
        var uuid = s.join("");
        return uuid;
    };

2018-05-14 页面绑定点击事件的两种情况

今天为了让连个相识的功能公用一个js中的方法,想通过绑定事件时,在方法中写死一个参数来区分。结果发现在页面加载时就触发了这个点击事件。

这个第一种情况:在方法中写死一个参数,这种方式就会在页面加载时触发。

<button class="margin-right-20" id="sendTaskBut" data-bind="click:events.giveTask('0')">下 达</button>

还有一种是不传任何参数,这种方式页面加载时不会触发。:

<button class="margin-right-20" id="sendTaskBut" data-bind="click:events.giveTask">下 达</button>



1.功能实现:为一个html页面下隐藏的 <div>标签增加下拉选项,并显示

html页面中的div是这样的:
<div class="divTest" style="display:none"></div>
js为这个div内增加下拉菜单,并显示出来。
  $.ajax({
        type:"get",  
        url:ctx+'/printManagement/queryModleFromIndex', 
        data : {"moduleId":moduleId,"appId":appId},
        dataType : 'json',
        success:function(result){
            if(result.flag == 'SUCCESS'){
                if(result.data){
                    $(".divTest").show();
                    $(".divTest").append('<select id="select_model"></select>');
                    $(".divTest").append('<i class="fa fa-caret-down"></i>');
                    $(".divTest").append('<i id="template-print-btn" class="fa fa-print"></i>');
                    for(var i=0,length=result.data.length;i<length;i++){
                        var tempModel=result.data[i];
                        $("#select_model").append("<option value='" + tempModel.fileId+    "'>" + tempModel.fileName + "</option>");  
                    }
                }
               }
            }
            });

2018-04-24 js封装数组的方法push,以及post方法把数组传到后台接受参数

var selectData = viewModel.dataTable1.getSimpleData({type:'select',fields:['id']});
if (selectData.length < 1) {
    u.messageDialog({
        msg: "请选择要删除的数据!",
        title: "提示",
        btnText: "OK"
    });
    return;
}
var ids = [];
for(var i = 0, length = selectData.length; i < length; i++){
    ids.push(selectData[i].id);
}

$.ajax({
        type : 'POST',
        url : basePath+'/test',
        contentType:'application/json',
        data : JSON.stringify(ids),
        dataType : 'json',
        success : function(result) {
            if(result.flag == 'SUCCESS'){
            }
        }   
});

//后台接受参数:
  @RequestMapping(value = "deleteChoosedFromTempBox", method = RequestMethod.POST)
    @ResponseBody
    public  Object deleteChoosedOperationuseTemp(@RequestBody List<String> assetIds) {

        Map<String, Object> result = new HashMap<String, Object>();
        ...
        return result;
    }

2018-04-24 有关js获取列表中的选中项的问题【prop和attr的使用案例】。

var dataArray = [];
    $(".auditLog-list input[type='checkbox']").each(function(){
        if($(this).prop('checked')){
            var data = {};
            data.operationbusinessTypeCode=$(this).attr("code");
            data.operationbusinessTypeName=$(this).attr("name");
            dataArray.push(data);
        }
     });

2018-04-27 + - ! function($) (), function 前面的符号意思

无论是括号,还是感叹号,让整个语句合法做的事情只有一件,就是让一个函数声明语句变成了一个表达式。

function a(){alert('iifksp')}  这是一个函数声明,并不是表达式。

1.函数可以有返回值,但是函数声明是没有返回值的,或者说返回值是undfined
2.函数声明在加载js时就会解析,但是函数则在被调用时才解析,加载。
3.赋值,逻辑,甚至是逗号,各种操作符都可以告诉解析器,这个不是函数声明,它是个函数表达式。并且,对函数一元运算可以算的上是消除歧义最快的方式,感叹号只是其中之一,如果不在乎返回值,这些一元运算都是有效的:

!function(){alert('iifksp')}()        // true
+function(){alert('iifksp')}()        // NaN
-function(){alert('iifksp')}()        // NaN
~function(){alert('iifksp')}()        // -1

表达式以括号和加减号最优(经相关人员测试得出)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万米高空

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值