jQuery特效_隐藏与显示 | 学习笔记

简介: 快速学习jQuery特效_隐藏与显示

开发者学堂课程【jQuery开发教程jQuery特效_隐藏与显示】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/detail/4307


快速学习jQuery特效_隐藏与显示


课程概要

1、隐藏与显示

2、淡入淡出

3、滑动

4、回调


一、 隐藏与显示

首先打开一个工程,新建一个html文件

图片84.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.2.1.min.js"></script
</head>
<style>//格式设置
div{
width: 40px;
height: 40pX;
background-color : aquamarine;
margin-left: 10px;
float: left;
}
</style>
<body>
<p>hello</p>
<button id="hide ">隐藏</button>//按钮
<button id="show">显示</button>
<button id="toggle>隐藏/显示 /button>
<script>
$ ( function(){//功能实现设置
S("#hide") .click( function() {//隐藏
$("p").hide( 1000);
});

Hide参数执行效果:

Hello

隐藏

点击隐藏

可发现hello已经被隐藏

$("#show').click(function(){//显示
$ ("p") .show ( 1000);//控制时间

Show参数执行效果:

点击显示

隐藏的内容被显示

$("#toggLe").click( function(){//包含隐藏和显示
$("p").toggle(1000);

Toggle参数执行效果:

点击隐藏和显示

再次点击

可发现同时实现了隐藏和显示两种功能

//五个水平排列的div
for(var i=0;i<5;i++){
$ ( "<div>s").appendTo(document.body);
}
//五个水平排列的div

图片85.png

//点击隐藏
$ ("div").click (function(){
//设置执行时间为两秒
$ (this) .hide(2000,function(){

每点击一个小盒子就会缓慢消失(两秒)

图片86.png

//设置消失后移除
$(this) .remove();
点击消失后就会移除:

图片87.png

});
})
})
</script>
</body>
</html>

以上效果运行在浏览器进行操作实践

相关文章
|
3月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
55 13
|
6月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
39 0
|
6月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
JavaScript 前端开发 Java
HTML+CSS+JS 学习笔记(四)———jQuery
HTML+CSS+JS 学习笔记(四)———jQuery
|
JavaScript 前端开发 索引
JavaScript学习笔记(五) jQuery
JavaScript学习笔记(五) jQuery
84 0
|
Web App开发 JavaScript 前端开发
jQuery学习笔记——jQuery基础
什么是jQuery?jQuery是一个快速、简洁的JavaScript库,其设计宗旨是“write less,do more”,倡导用更少的代码,做更多的事情。通过这段时间的学习,我感觉jQuery是一个“语法糖”,就像是包在糖果外面的包装,让js看起来更好看。
|
JavaScript 前端开发 API
jquery学习笔记
1.jquery是一个框架,是javasript框架。 2.jquery能做什么? *取得页面中元素,遍历DOM(document object model文档对象模型)树,jquery为了准确的获取需要检查活操纵的文档元素,提供了可靠而富有效率的选择符机制。
85 0
|
Web App开发 JSON JavaScript
html+css+js+jQuery学习笔记(二)
html+css+js+jQuery学习笔记
177 0
html+css+js+jQuery学习笔记(二)
|
前端开发 测试技术
html+css+js+jQuery学习笔记(一)
html+css+js+jQuery学习笔记
123 0
html+css+js+jQuery学习笔记(一)