jQuery 学习笔记（三）——jQuery效果

最新推荐文章于 2024-01-20 21:49:50 发布
最新推荐文章于 2024-01-20 21:49:50 发布
阅读量999 收藏
点赞数
分类专栏： jQuery 文章标签： jquery function callback button class div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Titilover/article/details/6797726
版权

内容选自w3cschool教程

 

 

 

一句话描述：jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。

 

1. jQuery隐藏和显示

通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>


在看一个如何隐藏部分文本的示例：

<html>
<head>
<!--向网页中添加jQuery库-->
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//点击确定的按钮来触发事件
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css"> 
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
 
<body>

<h3>Island Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Helen Bennett<br /> 
Garden House Crowther Way<br />
London</p>
</div>

<h3>Paris Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Marie Bertrand<br /> 
265, Boulevard Charonne<br />
Paris</p>
</div>

</body>
</html>

hide() 和 show() 都可以设置两个可选参数：speed 和callback。

语法形式为：

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed 参数规定显示或隐藏的速度。可以设置这些值："slow", "fast", "normal" 或毫秒。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称，以后会提到。

$("button").click(function(){
$("p").hide(1000);
});

一个采用上述手段有上述效果的示例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

 

2. jQuery切换

jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。

隐藏显示的元素，显示隐藏的元素。

其语法形式为：

$(selector).toggle(speed,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。

$("button").click(function(){
$("p").toggle();
});

一个采用上述手段有上述效果的示例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

 

3.jQuery滑动函数- slideDown, slideUp, slideToggle

jQuery 拥有以下滑动函数：

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。

 

（1）slideDown() 实例

$(".flip").click(function(){
$(".panel").slideDown();
});

一个采用上述手段有上述效果的示例：

<html>
<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
 
<p class="flip">请点击这里</p>
 
</body>
</html>

 

（2）slideUp() 实例

$(".flip").click(function(){
$(".panel").slideUp()
})

一个采用上述手段有上述效果的示例：

<html>
<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
 
<p class="flip">请点击这里</p>
 
</body>
</html>

 

（3）slideToggle() 实例

$(".flip").click(function(){
$(".panel").slideToggle();
});

一个采用上述手段有上述效果的示例：

<html>
<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
 
<p class="flip">请点击这里</p>
 
</body>
</html>

 


4. jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()

jQuery 拥有以下 fade 函数：

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。

 

（1）fadeTo() 实例

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

一个采用上述手段有上述效果的示例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("div").fadeTo("slow",0.25);
  });
});
</script>
</head>

<body>
<div id="test" style="background:yellow;width:300px;height:300px">
<button type="button">点击这里查看淡出效果</button>
</div>

</body>

</html>

 

（2）fadeOut() 实例

$("button").click(function(){
$("div").fadeOut(4000);
});

一个采用上述手段有上述效果的示例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#test").click(function(){
  $(this).fadeOut(4000);
  });
});
</script>
</head>

<body>
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>
<p>如果您点击上面的框，它会淡出直到消失为止。</p>
</body>

</html>

 

 

5. jQuery 自定义动画

jQuery 函数创建自定义动画的语法形式：

$(selector).animate({params},[duration],[easing],[callback])

关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性：

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。

 

（1）示例一

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

完整示例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({height:300},"slow");
  $("#box").animate({width:300},"slow");
  $("#box").animate({height:100},"slow");
  $("#box").animate({width:100},"slow");
  });
});
</script> 
</head>
 
<body>

<p><a href="#" id="start">Start Animation</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
 
</body>
</html>

 

（2）示例二

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

完整示例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({left:"100px"},"slow");
  $("#box").animate({fontSize:"3em"},"slow");
  });
});
</script> 
</head>
 
<body>

<p><a href="#" id="start">Start Animation</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:200px;position:relative">
HELLO
</div>
 
</body>
</html>


6. 小节

 

jQuery的效果


 


 

IMFuckingHigh
关注
专栏目录
Jquery学习笔记二——Jquery动画&事件绑定&遍历
春和的博客
03-06 163
Jquery学习笔记二 1、动画 三种显示和隐藏元素的方式 1、默认显示和隐藏方式 1、show([speed],[easing]，[function 回调函数]) 参数： speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000) easing：用来指定切换效果，默认是"swing"，可用参数"linear" swing：动画执行时效果是 先慢，中间快，最后又慢 linear：动画执行时速度是匀速的 fn：在动画完成时执行的函数，每
jQuery学习笔记——图片突出效果实例
weixin_41306215的博客
04-26 242
效果： 鼠标停留在图片上，对应图片高亮，其他图片变暗 鼠标离开盒子，所有图片变暗 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
jq实现展开收缩两种切换效果
weixin_34354945的博客
11-27 914
第一种： <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function() { $("#toggle").click(function() { $(this).te...
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1351
本文主要介绍有关jQuery的相关知识点
jQuery学习笔记——jQuery基础
m0_55394328的博客
09-07 490
什么是jQuery？jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write less，do more”，倡导用更少的代码，做更多的事情。通过这段时间的学习，我感觉jQuery是一个“语法糖”，就像是包在糖果外面的包装，让js看起来更好看。以上就是今天的学习内容啦，分享给大家。
JavaWeb基础学习笔记17——JQuery
weixin_44623055的博客
02-27 1185
目录 1、JQuery概念 2、JQuery快速入门 2.1、步骤 3、JQuery对象和JS对象的区别与转换 4、选择器 4.1、基本选择器 4.1.1、标签选择器 4.1.2、id选择器 4.1.3、类选择器 4.1.4、并集选择器 4.2、层级选择器 4.2.1、后代选择器 4.2.2、子选择器 4.3、属性选择器 4.3.1、属性名称选择器 4.3.2、属性选择器 4.3.3、复合属性选择器 4.4、过滤选择器 4.4.1、首元素选择器 4.4.2、尾元素选择
jQuery学习笔记2 —— jQuery选择器
u014630987的博客
03-05 334
jQuery选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。熟练使用选择器，不仅可以简化代码还能达到事半功倍的效果。 ## jQuery选择器是什么 ## Web前端开发要求结构（HTML）、样式（CSS）和行为（JavaScript）三者分离，而将结构和样式联系在一起的则是通过CSS选择器实现的，下面是常用的一些CSS选择器：
jQuery学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 1113
jQuery学习笔记 JQuery入门-笔记部分 jQuery概述 jQuery是js库 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数 jquery是为了简化js的操作 jquery的安装 <script src="js/jquery-3.4.1.js" type="text/javascript"></script> 需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）! jquery核心 $ 符号在j
JQuery学习笔记——1
qq_46412427的博客
03-08 158
笔记内容 1.jQuery Hello world 2.jQuery 选择器 3.jQuery 过滤器 4.jQuery 元素筛选 jQuery 介绍 什么是 jQuery ? jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想！！！ 它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery 流行程度 jQuery 现在已经成为最流行的
jQuery学习笔记1 —— 介绍
u014630987的博客
03-05 279
jQuery是一个JavaScript库，由John Resig创建与2006年1月。它有着简介的语法和跨平台的兼容性，极大地简化了JavaScript开发人员便利HTML文档、操作DOM、处理事件、执行动画和开发Ajax等。jQuery 理念和优势jQuery的理念是写得少，做得多（write less, do more),它有以下优势：轻量级，jQuery非常轻巧，压缩后大小约为30KB； 强大
jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）
01-19
jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。 一、要引用的文件 要使用jqGrid，首先页面上要引入如下css与js文件。 1、css <link href=/css/ui...
js学习笔记——（15）jQuery选择器、样式操作、效果
01-20
在JavaScript的世界里，jQuery是一个非常流行和强大的库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本文将深入探讨jQuery的选择器、样式操作和效果，帮助你更好地理解和应用jQuery。 ### 1. jQuery...
jQuery——学习笔记.md
08-01
jq语法
JQuery 学习笔记01 JQuery初接触
12-09
《JQuery 学习笔记01 - JQuery初接触》 jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript编程，使得开发者能够更快速、更方便地处理DOM操作、事件处理、动画效果和Ajax交互。这篇学习...
WxParse-微信小程序富文本解析自定义组件，支持HTML和markdown解析.zip
10-04
WxParse-微信小程序富文本解析自定义组件，支持HTML和markdown解析
江苏科技大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-04
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
Chartjs微信小程序改编_Chartjs-wecat-mini-app.zip
10-04
Chartjs微信小程序改编_Chartjs-wecat-mini-app
kindeditor-4.1.12.zip
最新发布
10-04
网上好不容易找到的，特此分享。
基于Java语言的编程设计源码与小作品展示
10-04
该项目汇集了55个文件，涵盖Java编程语言的源码和小型作品，具体包括15个XML配置文件、13个Java源文件、12个Git忽略文件、6个IML项目文件、5个文档文件、2个Markdown文件、1个文档和1个PNG图像文件。这些文件构成了一个完整的Java开发资源包。
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要绑定事件的元素，`event` 表示要绑定的事件类型，比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件： ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样，当 `event1` 或 `event2` 中任意一个事件触发时，对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序，可以使用 `off()` 方法： ``` $(selector).off(event); ``` 其中，`event` 表示要解除的事件类型。如果不指定事件类型，则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中，我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上，而不是绑定到子元素上，然后通过事件冒泡来判断是哪个子元素触发了该事件。这样，当子元素数量较多时，只需要绑定一次事件，就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中，`selector` 表示父元素，`event` 表示要绑定的事件类型，`childSelector` 表示要委托的子元素的选择器，事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作，希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值