jQuery 事件

一、DOM

1、方式一

<p id="event1" onclick="func1(this)">event study</p>

<script>
    function func1(self){
        console.log(self.innerHTML);
    }
</script>

2、方式二

<p id="event1">event study</p>

    var ele = document.getElementById("event1")
    ele.onclick=function(){
        console.log(this.innerHTML);
    }

3、方式三

<p class="p">event study1</p>
<p class="p">event study2</p>

    var ele = document.getElementsByClassName("p");
    for (i=0;i<ele.length;i++){
        ele[i].onclick=function(){
            console.log(this.innerHTML);
        }
    }

二、jQuery

1、更改样式事件

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<p>event study3</p>

$("p").click(function () {
    $("p").css("color","red");
})

2、与window.onload方法相同

$(document).ready(function(){
	$("p").css("color","red");
})

简写方式:

$(function(){
    $("p").css("color","red");
})

3、动态绑定事件

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

方式一
$("ul li").click(function(){
    console.log("11");
})
方式二(事件委托)
$("ul").on("click","li",function(){
    console.log("11");
});

4、添加事件

<button onclick="add()">添加</button>

function add(){
    $("ul").append("<li>6</li>");
}