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>"
    });
}

转载于:https://www.cnblogs.com/adrien/p/10688503.html