8個原生JS/JQuery實用技巧

選擇全部子元素（排除最後一個）

element:not(:last-child) {}

自定義原生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();
})

attr()和prop()的區別

• attr表示HTML文檔節點的屬性，prop表示JS對象的屬性

<!-- 這裏的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
}

• attr()底層依賴的是getAttribute()和setAttribute()兩個方法，prop()依賴原生JS中的對象屬性獲取和設置方式。
• attr()是jQuery 1.0版本就有的函數，prop()是jQuery 1.6版本新增的函數
• 對於表單元素的checked、selected、disabled等屬性，在jQuery 1.6以前，attr()獲取這些屬性的返回值爲Boolean類型：若是被選中(或禁用)就返回true，不然返回false。
• 但從1.6開始，使用attr()獲取這些屬性的返回值爲String類型，若是被選中(或禁用)就返回checked、selected或disabled，不然(即元素節點沒有該屬性)返回undefined。
• 在某些版本中，這些屬性值表示文檔加載時的初始狀態值，即便以後更改了這些元素的選中(或禁用)狀態，對應的屬性值也不會發生改變。由於jQuery認爲：attribute的checked、selected、disabled就是表示該屬性初始狀態的值，property的checked、selected、disabled才表示該屬性實時狀態的值(值爲true或false)。
• 所以，在jQuery 1.6及之後版本中，請使用prop()函數來設置或獲取checked、selected、disabled等屬性。對於其它可以用prop()實現的操做，也儘可能使用prop()函數。

原生ajax導出二進制文件（文件流）

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實現遠程搜索（模仿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切換彈窗狀態

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

JQuery導入文件

// 點擊導入
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實現監聽input字數

// 監聽鍵盤輸入事件(實時字數)
$("#category-desc").on("input", function () {
    var currentCount = $(this).val().length;
    $("#category-current-count").html(currentCount);
});