乐趣区

关于javascript:8个原生JSJQuery实用技巧

jiezi

抉择所有子元素（排除最初一个）

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);
});
退出移动版