【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 ...
随机推荐
- 2019-8-30-WPF-一个性能比较好的-gif-解析库
title author date CreateTime categories WPF 一个性能比较好的 gif 解析库 lindexi 2019-08-30 08:59:45 +0800 2018- ...
- 2、docker镜像管理
Docker镜像管理 镜像是Docker容器的基础,想运行一个Docker容器就需要有镜像.我们上面已经学会了使用search搜索镜像.那么这个镜像是怎么创建的呢? 创建镜像 镜像的创建有以下几种方法 ...
- 初探Remax微信小程序
1.创建项目 npx degit remaxjs/template-wechat my-app cd my-app && npm install 2.运行项目 npm run dev ...
- 提高Modelsim仿真速度的方法(1) -- force
假如主驱动时钟频率很高,因为要一个周期输出,仿真时间过长,仿真速度慢是自然. 但是仿真中,并不是每个驱动周期都是必要的,这时可以使用force命令把想要的信号提前制造出来. 事实上,对于使用到PLL的 ...
- Python-线程(2)
目录 GIL全局解释器锁 GIL 与 Lock 多进程 VS 多线程 死锁现象 递归锁 信号量 Semaphore 线程队列 GIL全局解释器锁 在Cpython解释器中,同一个进程下开启的多线程,同 ...
- linux mysql备份shell
#!/bin/bash # Shell script to backup MySql database # Author: Henry he # Last updated: -- # crontab ...
- Error：【SLF4J: Class path contains multiple SLF4J bindings.】
ylbtech-Error:[SLF4J: Class path contains multiple SLF4J bindings.] 1.返回顶部 1. SLF4J: Class path cont ...
- iOS开发使用UIScrollView随笔
1.scrollview滚动到固定偏移量contenOffset - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)anim ...
- JEECG 4.0 版本发布，JAVA快速开发平台
JEECG 4.0 版本发布,系统全面优化升级,更快,更稳定! 导读 ⊙平台性能优化,系统更稳定,速度闪电般提升 ...
- java基础之BigDecimal类
由于在运算的时候,float类型和double很容易丢失精度,演示案例.所以,为了能精确的表示.计算浮点数,Java提供了BigDecimal BigDecimal类概述 不可变的.任意精度的有符号十 ...