【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 ...
随机推荐
- js 删除数组中指定值
var arr = ['1','2'];delete('1'); function delete(i){ var index = arr.indexOf(i); arr.splice(index, 1 ...
- js 调用接口并传参
注:需先引入 jquery.json-xx.min.js 1. 参数跟在url后面 var name = '王一'; var age = 18; $.ajax({ type : 'get', url ...
- Leetcode93. Restore IP Addresses复原IP地址
给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255.11.135", ...
- CF961F k-substring
题意:给你一个字符串(sl<=1e6),问每一个起点到1和终点到sl距离相等的子串的最长不等于串长的border. 标程: #include<cstdio> #include< ...
- 深入理解Java虚拟机（自动内存管理机制）
文章首发于公众号:BaronTalk 书籍真的是常读常新,古人说「书读百遍其义自见」还是很有道理的.周志明老师的这本<深入理解 Java 虚拟机>我细读了不下三遍,每一次阅读都有新的收获, ...
- Nginx 和 Gunicorn 部署 Django项目
目录 Nginx 和 Gunicorn 部署 Django项目 配置Nginx 安装配置Gunicorn 通过命令行直接启动 Gunicorn 与 uwsgi 的区别,用哪个好呢 Gunicorn u ...
- HttpUrlConnection post 乱码 终极解决方案
今天遇到了java后台模拟http请求,以POST方式传参中文乱码,google了一下,大部分是在打开的HttpURLConnection的输入流的时候设置编码(utf-8),按照设置,试了下并没有解 ...
- nginx 安装配置信息
#user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log notice;#error_l ...
- PAT甲级——A1095 Cars on Campus
Zhejiang University has 8 campuses and a lot of gates. From each gate we can collect the in/out time ...
- 关于Spring Cloud Feign的一些记录!
学习Spring Cloud Feign过程中,相关资料都会反复强调:微服务调用的话(@FeignClient) 客户端方法的返回值和服务端方法的返回值还有方法名之类的都是要求一致的! 关于方法名是 ...