共计 4156 个字符，预计需要花费 11 分钟才能阅读完成。
抉择所有子元素（排除最初一个）
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);
});正文完