vue中 $event 的用法--获取当前父元素，子元素，兄弟元素

<button @click = “clickfun($event)”>点击</button>

  

methods: {

clickfun(e) {

// e.target 是你当前点击的元素

// e.currentTarget 是你绑定事件的元素

    #获得点击元素的前一个元素

    e.currentTarget.previousElementSibling.innerHTML

    #获得点击元素的第一个子元素

    e.currentTarget.firstElementChild

    # 获得点击元素的下一个元素

    e.currentTarget.nextElementSibling

    # 获得点击元素中id为string的元素

    e.currentTarget.getElementById("string")

    # 获得点击元素的string属性

    e.currentTarget.getAttributeNode('string')

    # 获得点击元素的父级元素

    e.currentTarget.parentElement

    # 获得点击元素的前一个元素的第一个子元素的HTML值

    e.currentTarget.previousElementSibling.firstElementChild.innerHTML

  

    }

        },

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

js修改元素的属性

<script type="text/javascript">

//给id为nice的元素 添加title属性并赋值为"测试title"
function addTitle(){
　　document.getElementById('nice').setAttribute("title","测试title");
}

//给id为nice的元素 删除 title属性
function delTitle(){
　　document.getElementById('nice').removeAttribute("title");
}

//获取id为nice的元素 title属性的值
function getTitle(){
　　var value=document.getElementById('nice').getAttribute("title");
　　alert('title的属性值为:'+value);
}

//jq方式删除、设置元素属性,为了更加形象些对比，这里采用嵌入式方式,没有进行js html分离
function a(){
　　alert('测试jq添加onclick属性');
}

//jq方式给id为nice的元素 添加onclick="a();"de 属性
function jqAddOnclick(){
　　$("#nice").attr("onclick","a();");
}

//jq方式获取id为nice的元素 onclick属性值
function jqGetOnclick(){
　　var value=$("#nice").attr("onclick");
　　alert('onclick属性值为:'+value);
}

//jq方式删除id为nice的元素 onclick属性
function jqDelOnclick(){
　　$("#nice").removeAttr("onclick");
}
</script>