项目总结之--JS篇

最新推荐文章于 2021-07-13 20:07:45 发布

原创最新推荐文章于 2021-07-13 20:07:45 发布 · 465 阅读

CC 4.0 BY-SA版权

本文是对一个项目中JavaScript知识点的总结，包括form表单数据的格式化处理，使用AJAX上传，以及JQuery的DOM节点监听。在表单处理上，serializeArray()方法在前端校验数据时十分便利。此外，还介绍了DOM的多种监听事件，如DOMNodeInserted和DOMNodeRemoved等。

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

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

1.form表单数据处理

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

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

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

但是在前端使用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);