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>"
    });
}
posted @ 2019-04-11 11:17  罗小扇  阅读(219)  评论(0编辑  收藏  举报