前端操作笔记

一、根据下标删除某个元素

// 获取被删除的下标值
var parentChild
if(window.navigator.userAgent.indexOf("MSIE")>0){
    //IE内核浏览器  针对IE8及以下 IE8以上都是使用的w3c内核
    // console.log("当前浏览器为IE标准");
    parentChild = document.getElementById(img_id).parentElement;
}else{
    //w3c内核浏览器
    // console.log("当前浏览器为W3C标准");
    parentChild = document.getElementById(img_id).parentNode;
}
var img_index = 0;
// 如果当前标签之前还有元素，则img_index+1
while((parentChild = parentChild.previousSibling) != null){
    img_index++;
}

// 删除数组中对应的图片路径，下标值 i 开始，删除1个
parent.Arraydata.splice(img_index, 1)

// 删除的是container列表中的某个div项
var containerList = document.getElementById('container');  // 获取container元素
// 检查下标是否有效
if (img_index >= 0 && img_index < containerList.childNodes.length) {
    containerList.removeChild(containerList.childNodes[img_index]); // 删除指定下标的div子元素
}

二、在列表中的第一个标签元素前插入一个标签元素 

var container = document.getElementById('container');
var newchild = document.createElement("div");
var img_id = "cy" + String(Math.random());
newchild.setAttribute("style", "float:left");
newchild.innerHTML = "<img class='pic'  id='" + img_id + "' width='105px' style='margin: 0 3px' height='85px' src='" + "data:image/jpg;base64," + imgPath + "'/>";
if(container.childNodes.length > 0){
    // 倒序增加预览图
    container.insertBefore(newchild, container.children[0]);
}else {
    container.appendChild(newchild);
} 

三、图片防拖拽

.img{
    -webkit-user-drag: none;
}

 四、a标签防拖拽

// a标签阻止拖拽
$("body").on("mousedown", "a", function (e) {
    e.preventDefault();
});

五、获取上层元素（这里是获取上层元素的上层元素）

var parentChild
if(window.navigator.userAgent.indexOf("MSIE")>0){
    //IE内核浏览器  针对IE8及以下 IE8以上都是使用的w3c内核
    parentChild = val.parentElement.parentElement;
}else{
    //w3c内核浏览器
    parentChild = val.parentNode.parentNode;
}

六、使用过滤方法删除数组的某个值

// 删除的是container列表中的某个div项
var containerList = document.getElementById('container');  // 获取container元素
// 检查下标是否有效
if (img_index >= 0 && img_index < containerList.childNodes.length) {
    var img_div = containerList.childNodes[img_index]
    // 获取图片base64码路径进行删除 (div里面的第一个元素)
    var base64Src = img_div.firstElementChild.src;
    var base64pathItem = base64Src.split("data:image/jpg;base64,")[1]
    parent.Arraydata = parent.Arraydata.filter(function(item) {
        return item !== base64pathItem
    });
    // 获取图片路径进行删除 (div里面的最后一个元素存放图片路径)
    var filepathItem = img_div.lastElementChild;
    parent.FilePathArraydata = parent.FilePathArraydata.filter(function(item) {
        return item !== filepathItem.value
    });
    // 删除指定下标的div子元素
    containerList.removeChild(img_div);
}

七、遍历某个class修改值

    // 重新赋值角标数值
    $($('.img').toArray().reverse()).each((index, val) => $(val).text(index+1))

八、在JavaScript中获取当前时间 YYYYMMDDHHmmss

var formattedTime = moment().format('YYYYMMDDHHmmss');