jQuery效果链式调用动画

2020.7.22
今日小结
今天主要学习了绑定click事件，jQuery特殊效果，jQuery链式调用，jQuery动画

一、绑定click事件

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

例：
html代码

<p>三生三世十里桃花</p>
<div class="continer" >
	<ul class="ul_01" style="display: none;">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>
			<a href="#">5</a>
			<span>武陵仙君</span>
		</li>
	</ul>

jquery代码

var body=$('body');
	body.click(function(){
	alert('素素')
	console.log($(this))
	})

显示结果
点击他

弹出

二、jQuery特殊效果
fadeIn() 淡入
fadeOut() 淡出
html代码

<button class="btn1">淡出</button>
<button class="btn2">淡入</button>

jquery代码

	$(".btn1").click(function(){
			$("p").fadeOut()
		})
		$(".btn2").click(function(){
			$("p").fadeIn()
		})

fadeToggle() 切换淡入淡出
html代码

<button>淡出/淡入</button>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

jQuery代码

	效果fadeToggle()	淡出淡入
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(2000);
		});	

hide() 隐藏元素
show() 显示元素

toggle() 切换元素的可见状态

slideDown() 向下展开
slideUp() 向上卷起

slideToggle() 依次展开或卷起某个元素

三、链式调用
$(’#div1’) // id为div1的元素
.children(‘ul’) //该元素下面的ul子元素
.slideDown(‘fast’) //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children(‘ul’) //这些兄弟元素中的ul子元素
.slideUp(‘fast’); //高度实际高度变换到零来隐藏ul元素

html代码

<p>三生三世十里桃花</p>
<div class="continer" >
	<ul class="ul_01" style="display: none;">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>
			<a href="#">5</a>
			<span>武陵仙君</span>
		</li>
	</ul>
	<div id="wrap">
		花开实力不多，红颜一人正好
	</div>
</div>

jquery代码

$('.continer').children('ul').slideDown(5000).children('li').eq(4).children('a').siblings().css('background','pink').parent().css('fontSize','40px');

四、jQuery动画

$('#div1').animate({
    width:'+=100',
    height:300
},1000,'swing',function(){
    alert('done!');
});