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!');
});