【JavaScript Day23】jQuery事件绑定及动画

元素内容操作

jQuery事件绑定

jQuery事件删除

jQuery的融合事件

jQuery的动画

元素内容操作

<div id="app">
<h4>静态标签</h4>
</div>
<script>
// append
// appendTo
// prepend
// prependTo
// 可接收字符串作为元素进行追加,这些方法会自动将符合格式字符串转换为DOM对象

function addChild(){
// $("#app").html("<p>html()</p>") // 覆盖操作

// 创建一个p标签
var $p = $(`<p class="a" style="color:red;">内容</p>`)

console.log($p);
// 将新标签追加到 id=app得容器中

// 容器.append(新元素) 在容器中追加新元素 , 返回容器
var $temp = $("#app").append($p); // 在 #app 容器得末尾追加新得元素 $p
console.log($temp);
$temp.css("background-color","#ccc"); // 为容器增加样式
}

function addChild2(){
// 创建一个p标签
var $p = $(`<p class="a" style="color:red;">内容</p>`)

console.log($p);
// 将新标签追加到 id=app得容器中

// 新元素.appendTo( 容器 ) 将新元素追加指定容器末尾 , 返回新元素
var $temp = $p.appendTo( $("#app") );
console.log($temp);
$temp.css("background-color","#ccc"); // 给新元素增加样式
}

function addChild3(){
// 通过链式调用 prepend 方法
// 容器.prepend(新元素)
// $("#app").prepend( $(`<p class="a" style="color:red;">内容</p>`) );
// 简化
// $("#app").prepend( `<p class="a" style="color:red;">内容</p>` );

// 新元素.prependTo(容器)
// $(`<p class="a" style="color:red;">内容</p>`).prependTo( $("#app") )
// 简化
$(`<p class="a" style="color:red;">内容</p>`).prependTo( "#app" )

}
</script>

jQuery事件绑定

<ul id="list">
<li>元素内容1</li>
<li>元素内容2</li>
<li>元素内容3</li>
<li>元素内容4</li>
<li>元素内容5</li>
<li>元素内容6</li>
<li>元素内容7</li>
<li>元素内容8</li>
<li>元素内容9</li>
<li>元素内容10</li>
</ul>
<script>
// 事件绑定 jqObj.事件名(callback)
function initEvent(){
// 事件绑定属于赋值操作,会触发内置循环
$("#list>li").click(function(){
// 将符合条件得所有元素得颜色取消
$("#list>li").css("color","");

// 为页面中 id=list得所有li子元素绑定click事件
// 事件执行方法为当前回调函数
console.log("li");
// 获取事件触发得对应元素对象 => this => DOM对象
console.log(this);
// 将DOM转换为jquery对象 => $(DOM对象)
var $target = $(this);
console.log($target);
$target.css("color","red");
})
}
initEvent();

setTimeout(function(){
// 5s之后自动点击元素9
// 事件直接触发 jqObj.事件名()
$("#list>li:nth-child(9)").click();

// jQuery得事件触发方法,会自动完成循环,对所有符合条件得元素都进行触发
// $("#list>li").click();
},5000)
</script>

<ul id="list">
<li>元素内容1</li>
<li>元素内容2</li>
<li>元素内容3</li>
<li>元素内容4</li>
<li>元素内容5</li>
<li>元素内容6</li>
</ul>
<script>
// jqObj.on("事件名",callback)
function initEvent(){
$("#list>li").on("click",function(){
$("#list>li").css("color","");
// 通过 on 方法绑定 click事件,事件执行为当前回调方法
$(this).css("color","red");
});
}
initEvent();

// 使用on方式绑定得事件,可以通过 jqObj.trigger(事件名) 完成触发
setTimeout(function(){
$("#list>li:nth-child(5)").trigger("click");
},5000)
</script>

jQuery事件删除

<ul>
<li id="item">事件删除</li>
</ul>
<input type="button" value="事件绑定" οnclick="bindEvent()">
<input type="button" value="事件删除" οnclick="removeEvent()">
<script>
function bindEvent(){
// $("#item").click(function(){
// alert("click事件绑定")
// })
$("#item").on("click",function(){
alert("on事件绑定")
})
}

function removeEvent(){
// 因为jquery提供事件绑定规则，采用addEventListener方法完成
// 对于addEventListener绑定的事件，只能removeEventListener删除
// 内置循环-对当前元素对于的指定事件的所有回调都进行删除
$("#item").off("click");
}
</script>

jQuery的融合事件

<div id="item">元素</div>
<script>
// hover 事件是 jquery提供对 mouseover 和 mouseout 同时绑定的事件
// hover( callback1,callback2 )
// callback1 对应 mouseover 事件回调
// callback1 对应 mouseout 事件回调
$("#item").hover(function(){
// 绑定 mouseover 事件，指定回调函数
$(this).css("background-color","#ccc");
},function(){
// 绑定 mouseout 事件，指定回调函数
$(this).css("background-color","");
});
</script>

jQuery的动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: aquamarine;
}
.ball{
width: 50px;
height: 50px;
background-color: brown;
/* border-radius: 50%; */
}
</style>
<script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body>
<input type="button" value="hide隐藏元素" οnclick="hideFun()">
<input type="button" value="show显示元素" οnclick="showFun()">
<hr>
<input type="button" value="slideUp隐藏元素" οnclick="slideUpFun()">
<input type="button" value="slideDown显示元素" οnclick="slideDownFun()">
<input type="button" value="隐藏/显示元素" οnclick="slideToggleFun()">

}
function showFun(){
// $(".box").show(); // 基本显示操作 - 无动画
$(".box").show(8000)
}

function slideUpFun(){
$(".box").slideUp(4000)
}
function slideDownFun(){
$(".box").slideDown(4000)
}
function slideToggleFun(){
$(".box").slideToggle();
}
</script>
<hr>
<div class="ball" id="ball"></div>
<input type="button" value="移动元素" οnclick="moveBall()">
<script>
function moveBall(){
$("#ball").animate( {
marginLeft:"200px",
borderRadius:"50%"
},3000,function(){
// 动画执行完成后调用的方法
// alert("动画执行完成")
$("#ball").animate({
marginLeft:"0px",
},3000)
} )
}
</script>
</body>
</html>