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