【html、CSS、javascript-12】jquery-效果
一、jQuery 效果- 隐藏和显示
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
$("button").click(function(){
$("p").hide(1000);
});
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
$("p").toggle();
});
实例：三个按钮分别是显示、隐藏、显示/隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>你好</p>
<input id="show" type="button" value="显示">
<input id="hide" type="button" value="隐藏">
<input id =show_Hide type="button" value="显示/隐藏">
<script src="jquery.js"></script>
<script>
$(function () {
$("#show").click(function () {
$("p").show(1000)
})
$("#hide").click(function () {
$("p").hide(1000)
})
$("#show_Hide").click(function () {
$("p").toggle(1000)
})
})
</script>
</body>
</html>
渐变动画显示、隐藏元素
二、jQuery效果-淡入、淡出（fade）
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
jQuery fadeOut() 方法用于淡出可见元素。
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1,.d2,.d3{
width:200px;
height:100px;
}
.d1{
background-color:green;
}
.d2{
background-color: #396bb3;
}
.d3{
background-color: pink;
}
</style>
</head>
<body>
<input id="fade_in" type="button" value="fadeIn">
<input id="fade_out" type="button" value="fadeOut">
<input id="fade_toggle" type="button" value="fadeToggle">
<input id="fade_to" type="button" value="fadeTo">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<script src="jquery.js"></script>
<script>
$(function () {
$("#fade_in").click(function () {
$("div").fadeIn(1000);
});
$("#fade_out").click(function () {
$("div").fadeOut(1000);
});
$("#fade_toggle").click(function () {
$("div").fadeToggle(1000);
});
$("#fade_to").click(function () {
$("div").fadeTo(1000,0.5);
});
});
</script>
</body>
</html>
淡入、淡出实例
三、jQuery效果-滑动（slide）
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法用于向下滑动元素。
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideUp() 方法用于向上滑动元素。
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：
$("#flip").click(function(){
$("#panel").slideUp();
});
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：
$("#flip").click(function(){
$("#panel").slideToggle();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body> <div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div> <script src="jquery.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script> </body>
</html>
滑动实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body> <div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div> <script src="jquery.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow",callBackFunc); //callBackFunc是回调函数，当滑动结束后执行回调函数
});
});
callBackFunc = function Over() {
alert("滑动结束！")
}
</script> </body>
</html>
滑动结束执行回调函数
四、定义jQuery函数
1）扩展jQuery对象本身
用来在jQuery命名空间上增加新函数，查看jQuery.fn.extend获取更多添加插件的信息
在jQuery命名空间上增加两个函数
jQuery.extend({
min:function (a,b) {return a<b?a:b;},
max:function (a,b) {return a>b?a:b;}
})
jQuery.min(2,3) //结果2
jQuery.max(4,5) //结果5
$.max(2,3) //与 jQuery.min(2,3)相同
2）jQuery.fn.extend()
jQuery.fn.extend({
check:function () {
return this.each(function () {
this.checked = true
})
},
uncheck:function () {
return this.each(function () {
this.checked = false
})
}
})
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
<body>
<div id="d1">11111</div>
<script src="jquery.js"></script>
<script>
$(function () {
$.fn.extend({ //定义函数
hello:function () {
return $(this).text()
}
})
var div_text = $("#d1").hello() //调用函数
alert(div_text) //弹出div的text值11111
})
</script>
</body>
实例1：面板拖动
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="jquery.js"></script>
<style type="text/css">
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body style="padding-top: 50px;"> <div class="moveBar">
<div id="banner">按住此处移动当前div</div>
<div class="content">这里是其它内容</div>
</div>
<script>
jQuery(document).ready( function () {
$('#banner').mousedown( function (event) {
var isMove = true;
var abs_x = event.pageX - $('div.moveBar').offset().left;
var abs_y = event.pageY - $('div.moveBar').offset().top;
$(document).mousemove(function (event) {
if (isMove) {
var obj = $('div.moveBar');
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
}
}).mouseup( function () {
isMove = false;
});
});
});
</script>
</body>
</html>
面板随鼠标移动
实例2：可编辑表格
1、在table的某个单元格点击中，先取出该单元格的值，再将该值赋给一个input text，并将这个input text动态添加到这个单元格中，代码可以写成：
var tdvalue=$(this).val();
$(this).html("<input id='tempinput' type='text' value='"+tdvalue+"'/>");
2、当单元格失去焦点时，将文本框的值回填给单元格，代码写成：
$(this).html($("tempinput").val());
3、实际写代码时还要考虑临时加入的文本框的宽度要与单元格一致等内容。 实例3：响应式布局（可以自适应手机屏幕）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*当浏览器的宽度>400px时执行下面语句*/
@media (min-width: 400px) {
.w6{
width:50%;
float: left;
background-color: red;
}
}
/*当浏览器的宽度>400px-800px时执行下面语句*/
@media (min-width: 800px) {
.w6{
width:50%;
float: left;
background-color: blue;
}
} </style>
</head>
<body>
<div class="w6">1111</div>
<div class="w6">1111</div>
</body>
</html>
响应式布局
【html、CSS、javascript-12】jquery-效果的更多相关文章
- 【Python全栈-JavaScript】jQuery效果
jQuery效果 jQuery 效果函数: 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
- Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】
一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
- Jquery效果代码--（二）
//jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...
- 推荐12款实用的 JavaScript 书页翻转效果插件
Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...
- php面试专题---12、JavaScript和jQuery基础考点
php面试专题---12.JavaScript和jQuery基础考点 一.总结 一句话总结: 比较常考察的是JavaScript的HTML样式操作以及jQuery的选择器和事件.样式操作. 1.下列不 ...
- 使用javaScript和JQuery制作经典面试题：光棒效果
使用javaScript与jQuery添加CSS样式的区别和步骤 使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { v ...
- jsDelivr - Free open source CDN for javascript libraries, jQuery plugins, CSS frameworks, Fonts and more
jsDelivr - Free open source CDN for javascript libraries, jQuery plugins, CSS frameworks, Fonts and ...
- 前端~HTML~CSS~JavaScript~JQuery~Vue
HTML CSS JavaScript DOM文档操作 jQuery实例 Vue
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- JavaScript、Jquery选择题
尚学堂Java EE软件工程师认证考试 试题库-选择题 一. 选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是( )(选择一项) A. numb_1 ...
随机推荐
- 制作windows10系统启动U盘，从零开始。
1.打开百度,搜索windows下载,选个这个点击进去. 2.会看到下图,然后点击立即下载工具按钮. 3.接下来由于网络的原因,可能需要漫长的等待.会下载一个MediaCreationTool1903 ...
- 时间复杂度 - Convert 计算次数 TO 时间复杂度
我们假设计算机运行一行基础代码需要执行一次运算. int aFunc(void) { printf("Hello, World!\n"); // 需要执行 1 次 return 0 ...
- LUOGU P2831 愤怒的小鸟 （NOIP 2016）
题面 题解 好像昨天wxl大爷讲的是O(Tn*2^n)的做法,后来没想通,就自己写了个O(Tn^2*2^n)的暴力状压, 莫名其妙过了??数量级二十亿??懵逼,可能到了CCF老爷机上就T了.dp[S] ...
- memcache课程---3、php使用memcache缓存实例
memcache课程---3.php使用memcache缓存实例 一.总结 一句话总结: 前置:windows下安装好memcache.exe,安装好memcache的php扩展,开启memcache ...
- System.Web.Mvc.EmptyResult.cs
ylbtech-System.Web.Mvc.EmptyResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Public ...
- shell对文件，文件夹的操作
x=$ OUTFILENAME="output_${x}.sql" if [ -f $OUTFILENAME ];then rm $OUTFILENAME fi 如果文件存在则删除 ...
- 使用dubbo中间件出现NoSuchBeanDefinitionException异常
dubbo中间件中有一个import com.alibaba.dubbo.config.annotation.Service类,在service层添加注解时要注意,我们添加的是import org.s ...
- gdal在redhat4.4下安装
GDAL(Geospatial Data Abstraction Library)是一个在X/MIT许可协议下的开源栅格空间数据转换库.它利用抽象数据模型来表达所支持的各种文件格式.它还有一系列命令行 ...
- JVM系列（四）— 原子性、可见性与有序性
上一篇讲了Java内存模型的相关知识,模型设计正是围绕着并发过程中如何处理原子性,可见性和有序性这3个特征来建立的 一.原子性(Atomicity) 原子性的概念无需多说,熟悉事物的4个特性的应该比较 ...
- Spring注解驱动(上)
记录常用的spring注解 1.@Configuration 和 @Bean spring中可以使用xml 的方式进行配置, 也可以使用 @ Configuration 来指定一个类为配置类, 并使用 ...