- jquery語法
圖1代碼實(shí)現(xiàn)了一個(gè)reset重置功能，涉及到的知識(shí)點(diǎn)有：
（1）jquery選擇器：
①("#applicant")：使用
("[lay-value='請(qǐng)選擇公司']")：使用
(".layui-form-checked")：使用
(this)：可以選擇當(dāng)前操作的元素。
（2）涉及到的jquery元素操作方法：
①("#applicant").val()：val()是元素賦值方法孝宗，也可以用于清空元素值（重置）；
③("this").removeClass("layui-form-checked")：removeClass()可以移除元素樣式，addClass()可以添加元素樣式猿诸。
// reset
$("#reset").click(function){
$("#applicant").val();
$("[lay-value='請(qǐng)選擇公司']").trigger("click");
$(".layui-form-checked").each(function(){
// $(this).removeClass("layui-form-checked");
// 移除樣式無用的情況下想到通過模擬再次click事件來取消選中
$(this).trigger("click");
})
}
圖1
2.jquery語法
圖2代碼段實(shí)現(xiàn)了一個(gè)渲染文件列表的功能婚被，包括文件下載、文件刪除（刪除后重新渲染文件列表）梳虽，涉及到的知識(shí)點(diǎn)有：
（1）jquery選擇器：(#fileTableCommon-template)元素id選擇址芯、
(".deleteBtn")元素樣式選擇、
("#descisionBasis").html(fileComponent)渲染元素谷炸、
(this).attr('data-name')獲取元素屬性值等。
（3）("#fileTableCommon-template").html())(model))禀挫。使用handlebars進(jìn)行元素渲染旬陡。
（4）使用Ajax方式進(jìn)行接口調(diào)用。（默認(rèn)同步方式調(diào)用）
（5）window.location用于打開一個(gè)新窗口语婴，splice()用于數(shù)組類型對(duì)象的分割描孟。
function renderFileTable(){
$("#descisionBasis").html(fileComponent);
$("#descisionBasis").html(Handlebars.compile($("#fileTableCommon-template").html())(model));
// downloadFile
$(".downBtn").click(function(){
var fileId = $(this).attr('data-id');
var fileName = $(this).attr('data-name');
var downData = {
"body": {
"fileId": fileId,
"fileName": fileName
}
}
tools.postHttpRequest('/glcs/v1/download', downData, function(data){
window.location = data.body;
})
})
// deleteFile
$(".deleteBtn").click(function(){
var index = $(this).attr('data-index');
model.fileLists.splice(index,1);
renderFileTable();
})
}
圖2
3.jquery與layui語法
①jquery選擇器：("[lay-value='XX']").trigger("click")模擬click事件
③layui方法：form.on('select(filter)',function(){})驶睦，layui監(jiān)聽select下拉框選擇。
// layui監(jiān)聽select的方式
form.on('select(filter)',function(){
// 通過模擬選中第一個(gè)option匿醒，使select恢復(fù)默認(rèn)
$("[lay-value='XX']").trigger("click");
})
圖3
4.如果彈出層的content是某個(gè)DOM元素的話场航，需要放在body根節(jié)點(diǎn)下，避免被遮罩
https://blog.csdn.net/q646926099/article/details/78797091（layer彈層遮罩擋住窗體解決）
