JS の 套路 I ~~
小扇在到新公司以后,发现。我的js都忘记了!!
下面总结一下在装配数据时候用到的一些小小的公式,希望像我这样的前端小菜B起到帮助叭叭叭叭叭~~~
I、查找想找到的 HTML 元素 *
i、查找元素
var x = document.getElementById("idcard");
var y = document.getElementByTagName("cardid");
ii、改变HTML元素的内容
document.getElementById("idcard").innerHTML=new HTML;
iii、 改变HTML的属性 *
document.getElementById("image").src=response.data.DoorLicensePic;
II、 DOM 事件
js中的事件
- | - |
---|---|
onchange | 元素改变 |
onclick | 单击事件 |
ondblclick | 双击事件 |
onmouseover | 鼠标移入 |
onmouseover | 鼠标移出 |
onkeydown | 按下键盘 |
onload | 完成页面加载 |
好吧现在给你一个场景,那就是你的页面有很多很多图片,要绑定单击放大,你怎么办呢??
<div>
<img id="insurance_img" onclick=" " src=" " />
</div>
然后 咱们来给他赋值
//给src 赋值,有值的话就把只给他,没有的话就显示另一个图片
var insure = result.insuranceFormPic;
if (!insure) {
document.getElementById("insurance_img").src = "/content/common/images/uploadImgOneLi.png";
} else {
document.getElementById("insurance_img").src = "https://" +insure;
}
//单击事件
//单击事件放大
$("#insurance_img").on("click", function () {
console.log($(this).attr("src"))
previewImage($(this).attr("src"));
})
//查看原图js 前端写好的
function previewImage(imageUrl, title) {
layx.open({
id: 'common',
title: isEmptyString(title) ? '图片' : title,
content: "<div class='divimg' style='width:100%;height:100%;text-align:center;'><image style='width: auto;max-width: 100%; height: 100%;' src=" + imageUrl + "></image><div>"
});
}