命名规范
jquery中的常用语法
layui 使用jquery
layui.use(['jquery', 'layer'], function () {
var $ = layui.jquery;
})
$(this).parents('tr td').parent().find('td').eq(0).text() //table中的某个值
$(".select option:selected").attr('value') // 获取下拉框的值
$(".select option[value='0'] ").attr("selected",true) // select设置默认值
$(this).attr("file_key") //当前点击的设置值
$(".a-tree").trigger("click"); // 点击事件立即执行
$(".test").addClass() .removeClass('active')
jquery中的一些案列
1.添加和移出.active
$(".tab").on("click", ".tab-li", function () {
$(".tab-li").removeClass("active");
$(this).addClass("active");
});
2.手风琴
.receive {
.first_ul {
margin-bottom: 2px;
position: relative;
.first_ul_title {
cursor: pointer;
height: 45px;
padding: 0 10px;
line-height: 45px;
// background: #0b78ff;
background: #314478;
width: 100%;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
.m {
width: 220px;
}
b {
font-size: 30px;
font-weight: 100;
}
}
li {
padding: 20px;
color: #e5e5e5;
font-size: 14px;
background: #17214b;
font-family: Microsoft YaHei;
font-weight: 400;
color: #e5e5e5;
line-height: 25px;
}
.action-first {
display: none;
position: absolute;
z-index: 1;
right: 0px;
top: 40px;
font-size: 14px;
width: 100px;
// height: 165px;
background: #006fc7;
cursor: pointer;
.text-first {
font-family: SimSun;
font-weight: 400;
color: #d7edff;
line-height: 32px;
text-align: center;
}
}
}
}
function accordion() {
const dateList = [
{
year: 2022,
Luna: [
{
number: 12,
},
{
number: 11,
},
{
number: 10,
},
],
},
{
year: 2021,
Luna: [
{
number: 12,
},
{
number: 11,
},
{
number: 10,
},
],
},
];
let dateListHtml = "";
$.each(dateList, function (i, item) {
dateListHtml += `
<ul class='first_ul'>
<div class="first_ul_title flex flex-align-c flex-jus-sp"><span class="m">${
item.year
} </span><b>+</b></div>
${(function () {
let html = "";
$.each(item.Luna, function (k, jtem) {
html += `<li>${jtem.number} 月</li> `;
});
return html;
})()}
</ul>
`;
});
console.log(dateListHtml);
$(".receive").html(dateListHtml);
$(".receive").on("click", ".first_ul_title", function () {
const curLi = $(this).parent().find("li"); //获得当前点击的菜单的二级菜单
const restUl = $(this).parent().siblings("ul"); //获得没有点击的一级菜单
// 通过判断二级菜单是否收起，来进行判断是否展开，并更换"+ -"表示
if (curLi.css("display") == "none") {
curLi.slideDown();
curLi.parent().find("b").text("-");
} else {
curLi.slideUp();
curLi.parent().find("b").text("+");
}
// 没有点击的二级菜单全部收起，并将标志全部改为"+"
restUl.find("li").slideUp();
restUl.find("b").text("+");
});
}
}
3.树形结构
//渲染层
renderTree(data, children) {
let html = "";
data.forEach((item) => {
if (item.children && item.children.length > 0) {
html += `
<li class="" parent_uuid="0">
<ul class="a-tree " parent_uuid="0">
<div class="flex ">
<img class="icon-arrows" src="../images/icon/right.png" alt="" />
<span class="action-li" id="${item.id}" parent_id="${
item.parent_id
}">${item.name}</span>
</div>
${(function () {
let childrenHtml = "";
item.children.forEach((jtem) => {
if (jtem.children && jtem.children.length > 0) {
childrenHtml += utlis.renderTree([jtem]);
} else {
childrenHtml += `
<li class="action-li" id="${jtem.id}" parent_id="${jtem.parent_id}">${jtem.name}</li>
`;
}
});
return childrenHtml;
})()}
</ul>
</li>
`;
} else {
html += `<li class="action-li" id="${item.id}" parent_id="${item.parent_id}">${item.name}</li>`;
}
});
return html;
}
// 逻辑层
function actionTree() {
$(".a-tree").click(function () {
$(this)
.find("li")
.click(function (event) {
return false;
});
if ($(this).hasClass("shows")) {
$(this).removeClass("shows");
$(this).find("li").find("ul").removeClass("shows");
$(this).find("li").hide();
$(this)
.find("div")
.eq(0)
.find(".icon-arrows")
.attr("src", "../images/icon/right.png");
} else {
$(this)
.find("div")
.eq(0)
.find(".icon-arrows")
.attr("src", "../images/icon/button.png");
$(this).addClass("shows");
$(this).find("li").show();
$(this).find("li").find("ul").find("li").hide();
$(this).show();
}
});
}
4.文件上传
<form action="" method="" enctype='multipart/form-data' class="upload-folder"> <label for='file' class='inputlabelBox '> <div class="button add-paper ">上传文件夹</div> </label> <input type="file" name="myfile" id='file' style="display:none;" /> </form>
$("#file").change(function () {
my_file = this.files[0];
formData.append("file", my_file);
$(".upload-folder").hide();
$(".upload-names").text(my_file.name);
});
5.文件下载
$(".downloadTwo").click(function () {
let params = {
file_key: $(this).attr("file_key"),
category_id: $(this).attr("category_id"),
};
axios({
method: "get",
url: BASE.base + CONFIGURL["DELFILEOT"],
params: params,
headers: {
"CONFERENCE-AUTH-TOKEN": sessionStorage.getItem("TOKEN"),
"CONFERENCE-AUTH-RANDOM": sessionStorage.getItem("RANDOMTOKEN"),
"Content-Type": "multipart/form-data",
},
responseType: "arraybuffer",
}).then((res) => {
//res为接口所返回的文件流
var blob = new Blob([res.data], {
type: "application/pdf;chartset=UTF-8",
});
//新窗口打开
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.target = "_blank";
link.click();
});
});
