8 practical tips for native JS/JQuery

Select all child elements (exclude the last one)

element:not(:last-child) {}

Customize the style of native input="file"

// 自定义上传样式
<li id="upload-btn" class="default-image">
    <img src="=" alt="">
    <div>请上传图片</div>
    <!-- 上传(隐藏原生的input) -->
    <input type="file" id="upload" class="hide">
</li>

// 模拟原生input点击事件
 $('#upload-btn').click(function() {
    $('#upload').click();
})

The difference between attr() and prop()

• attr represents the attributes of the HTML document node, prop represents the attributes of the JS object

<!-- 这里的id、class、data-id均为div的attr -->
<div id="demo" class="demo" data-id="1"></div>

// 这里的name、age均为obj对象的prop
let obj = {
  name: 'wen',
  age: 18
}

• The bottom layer of attr() relies on two methods, getAttribute() and setAttribute(), and prop() depends on the method of obtaining and setting object attributes in native JS.
• attr() is a function of jQuery 1.0 version, prop() is a new function of jQuery 1.6 version
• For the checked, selected, disabled and other attributes of form elements, before jQuery 1.6, the return value of attr() to obtain these attributes is Boolean: if it is selected (or disabled), it returns true, otherwise it returns false.
• But since 1.6, the return value of using attr() to get these attributes is String type. If it is selected (or disabled), it returns checked, selected or disabled, otherwise (that is, the element node does not have this attribute) returns undefined.
• In some versions, these attribute values represent the initial state values when the document is loaded. Even if the selected (or disabled) state of these elements is changed later, the corresponding attribute values will not change. Because jQuery believes that: attribute's checked, selected, and disabled are the values that represent the initial state of the property, and property's checked, selected, and disabled only represent the real-time state value of the property (the value is true or false).
• Therefore, in jQuery 1.6 and later versions, please use the prop() function to set or get checked, selected, disabled and other properties. For other operations that can be implemented with prop(), try to use the prop() function.

Native ajax export binary file (file stream)

var url = `/export?start_time=${start_time}`;
var xhr = new XMLHttpRequest();
// 也可以使用POST方式，根据接口
xhr.open("GET", url, true);
// 返回类型blob，XMLHttpRequest支持二进制流类型
xhr.responseType = "blob";
xhr.onload = function () {
    if (this.status === 200) {
        //使用response作为返回，而非responseText
        var blob = this.response;
        var reader = new FileReader();
        // 转换为base64，可以直接放入a标签href
        reader.readAsDataURL(blob);
        reader.onload = function (e) {
            // 转换完成，创建一个a标签用于下载
            var a = document.createElement("a");
            // 获取当前导出时间
            var nowDate = format(new Date());
            a.download = `文件名_${nowDate}.xlsx`;
            a.href = e.target.result;
            a.click();
        };
    }
};
xhr.send();

jquery realizes remote search (imitating iview)

// -----------远程搜索 start------------

    // 远程搜索接口路径
    var searchUrls = ["/productManager/index"];

    // 请求下拉列表
    function remoteSearch(val, idx) {
        var that = $("#" + val + "");
        $("#" + val + "-dropdown").show();
        $("#select-" + val + "-id").val("");
        var name = $(that).val().trim();
        var data = { name };
        $("#" + val + "-dropdown").html(
            '<div class="search-loading">加载中...</div>'
        );
        $.ajax({
            type: "GET",
            url: searchUrls[idx],
            data,
            success: function (res) {
                var list = res.data || [];
                var str = "";
                if (list.length) {
                    $.each(list, function (index, item) {
                        str += `
                        <li class="select-item" data-id=${item.id} data-name=${item.name}>
                        ${item.name}
                        </li>`;
                    });
                    $("#" + val + "-dropdown").html(str);
                } else {
                    $("#" + val + "-dropdown").html(
                        '<div class="empty-search">无匹配数据</div>'
                    );
                }
            },
            error: function (error) {
                console.log(error);
            },
        });
    }

    // 防抖函数
    function debounce(fn, delay = 500) {
        var timer = null;
        return function () {
            var context = this;
            var args = arguments;
            timer && clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        };
    }

    var debounceCategory = debounce(remoteSearch.bind(null, "category", 0), 500);

    // 绑定input事件
    $("#category").on("input", debounceCategory);

    // 失焦隐藏下拉列表
    function hideDropdown(str) {
        setTimeout(() => {
            var id = $("#select-" + str + "-id").val();
            if (!id) $("#" + str + "").val("");
            $("#" + str + "-dropdown").hide();
        }, 200);
    }

    // 失焦
    $("#category").blur(hideDropdown.bind(null, "category"));

    // 选择下拉列表某一项
    function selectItem(that, str) {
        var id = $(that).attr("data-id");
        var name = $(that).attr("data-name");
        $("#" + str + "").val(name);
        $("#select-" + str + "-id").val(id);
        $("#" + str + "-dropdown").hide();
    }

    // 选择
    $("#category-dropdown").on("click", ".select-item", function () {
        selectItem($(this), "category");
    });

JQuery switch popup state

function toggleModal(str, bool) {
    var modal = modalInfo[str];
    bool ? $(modal).stop().fadeIn(300) : $(modal).stop().fadeOut(300);
}

JQuery import file

// 点击导入
function selectFile() {
    $("#import-product-file").click();
}

// 导入文件
$("#import-product-file").change(function () {
    var fileItem = $(this)[0].files[0];
    var fileName = fileItem.name;
    $("#import-file-name").html(fileName);
});

// 确认导入
function submitImport() {
    var fileItem = $("#import-product-file")[0].files[0];
    if (!fileItem) return alert("请先选择文件！");
    var formData = new FormData();
    formData.append("file", fileItem);
    $("#import-product-file").val("");
    $.ajax({
        type: "POST",
        url: "/import",
        data: formData,
        contentType: false,
        processData: false,
        dataType: "json",
        success: function (res) {
            if (res.code === 0 && res.status) {
                alert("导入成功！");
                getList();
            } else {
                alert(res.msg || "导入失败！");
            }
        },
        error: function (error) {
            console.log(error);
        },
    });
}

JQuery to monitor the number of input words

// 监听键盘输入事件(实时字数)
$("#category-desc").on("input", function () {
    var currentCount = $(this).val().length;
    $("#category-current-count").html(currentCount);
});