jQuery基础06

HTML部分

<div id="div1"></div>

CSS部分

        <style type="text/css">
			#div1 {
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>

JQ事件

1. jq对象.事件名(回调函数)     例 $("选择器").click(function(){})

2. jq对象.on("事件名",回调函数)   JQ推荐的事件绑定方式

基础写法 语法: $().on("事件名", "回调函数");

            // 随机色函数
            function randomClolor() {
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return `rgb(${r},${g},${b})`;
			}

$("#div1").on("click",function(){
	$(this).css("background",randomClolor());
});

2. 一次性绑定多个不同事件

语法: $().on("事件名1 事件名2 事件名3 ...")

$("#div1").on("mousemove mouseout click",function(){
	$(this).css("background",randomClolor())
})

3. 一次性绑定多个不同事件, 不同事件触发各自的方法

// 语法:
$().on({
    事件名1:回调函数1,
    事件名2:回调函数2,
    ...
})

$("#div1").on({
	onmouseover:function(){
		$(this).animate({
			height:"+=10"
		})
	},
	mouseout:function(){
		$(this).animate({
			width:"+=10"
	    })
    },
		click:function(){
			$(this).css("background",randomClolor());	
		},	
/});