项目总结之--JS篇

近期刚结束了一个小的项目, 在此对项目的(我之前所不了解的)知识点做一个总结记录... 加深印象

知识点大部分网上都有现成的解决方案... 在此只是做一个总结归纳...

 

 

1.form表单数据处理

var data = $('#formid').serialize();
var dataArray = $('#formid').serializeArray();
console.log(data);
console.log(dataArray);

项目总结之--JS篇_第1张图片

该方法可以直接讲对应的form表单的数据进行格式化,然后通过ajax进行上传数据

本人使用TP框架,两种方式通过input获取到的数据都是一样的...

项目总结之--JS篇_第2张图片

但是在前端使用JQ进行数据校验方面则使用serializeArray()方便的多:

 $.each(arr, function(key, field){
      switch(field.name){
        case:'abc':
        break;
        default:
        break;
    }
}

 

 

 

2.JQ--DOM节点监听

$(document).ready(function () {
    $('#id').bind('DOMSubtreeModified',function (e) {
        console.log()
    })
})

 

无论是刚渲染界面还是动态的添加或删除其子元素的DOM节点...都会触发该函数;

还没用到以下总结... 之后遇到再看

1.DOMSubtreeModified: 在DOM结构发生任何变化的时候。这个事件在其他事件触发后都会触发;

2.DOMNodeInserted: 当一个节点作为子节点被插入到另一个节点中时触发;

3.DOMNodeRemoved: 在节点从其父节点中移除时触发;

4.DOMNodeInsertedIntoDocument: 在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在      DOMNodeInserted 之后触发;

5.DOMNodeRemovedFromDocument: 在一个节点被直接从文档移除或通过子树间接从文档移除之前触发。这个事件在       DOMNodeRemoved 之后触发;

6.DOMAttrModified: 在特性被修改之后触发;

7.DOMCharacterDataModified: 在文本节点的值发生变化时触发;

 

 

3.获取background-image()里面的相对路径

protocol = document.location.protocol;//获取协议
host = window.location.host;//获取主机名
domain = document.location.protocol+'//'+window.location.host;//域名
url = $('#test').css('background-image');
changeUrl = $('#test').css('background-image').replace('url("'+domain,'').replace('")','');
console.log(protocol);
console.log(host);
console.log(domain);
console.log(url);
console.log(changeUrl);

项目总结之--JS篇_第3张图片

你可能感兴趣的:(项目总结之--JS篇)