`
backspace
  • 浏览: 133114 次
文章分类
社区版块
存档分类
最新评论

jQuery:1.[1

 
阅读更多
ylbtech-jQuery:jQuery学习

jQuery语法实例

$(this).hide()
jQuery 的 hide() 函数,隐藏当前的 HTML 元素。
$("p").hide()
jQuery 的 hide() 函数,隐藏所有 <p> 元素。
$(".test").hide()
jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。
$("#test").hide()
jQuery 的 hide() 函数,隐藏 id="test" 的元素。
 

Hiding - Sliding- Fading

jQuery fadeOut()
简单的 jQuery fadeout() 函数。
jQuery hide()
简单的 jQuery hide() 函数。
Hide explanations
如何隐藏部分文本。
Slide panel
简单的 Slide Panel 效果。
jQuery animate()
简单的 jQuery animate() 函数。
 
jQuery:1.1.1,$(this).hide()返回顶部
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(this).hide();
});
});
</script>
</head>

<body>
<button type="button">Click me</button>
<hr>
test
<button type="button">Click me2</button>
<button type="button">Click me3</button>
<button type="button">Click me4</button>
</body>

</html>
jQuery:1.1.2,$("p").hide()返回顶部
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html> 
jQuery:1.1.3,$(".test").hide() 返回顶部
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  $("button").click(function()
  {
  $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>

</body>
</html>
jQuery:1.1.4,$("#test").hide() 返回顶部
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>
jQuery:1.2.1,fadeOut()返回顶部
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#test").click(function(){
  $(this).fadeOut();
  });
});
</script>
</head>

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

</html>
jQuery:1.2.2.hide()返回顶部
<html>

<head>
<script type="text/javascript" src="Jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html> 
jQuery:1.2.3,explanations返回顶部
<html>
<head>
<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>
jQuery:1.2.4,panel返回顶部
<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>
jQuery:1.2.5,animation返回顶部
<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>

 

warn 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
0
4
分享到:
评论

相关推荐

    jquery-3.3.1.js和jquery-3.3.1.min.js

    jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...

    jquery 1.12.4 .min.js 含源码

    jquery 1.12.4 .min.js 含源码 包含以下文件: jquery.1.12.4.min.js jquery.1.12.4.js // 这个是源码哦 截至2017.11.21, jQuery1.x 最新最稳定版本

    jquery.rangecss.rar

    Jquery 滚动滑块设置,可模拟一点时间内的时间轴选择;资源包含完整例子:jquery.range.js jquery.range.css

    Jquery.media.js插件

    Jquery.media.js插件,包含三个文件:jquery.media.js、jquery-1.7.2.min.js、demo.html demo文件如下: &lt;html&gt; &lt;head&gt; [removed][removed] [removed][removed] [removed] $(function() { $('....

    jquery-2.table2excel

    1、需要引入jquery.js和jquery.table2excel.min.js 2、增加绑定事件,例子: ------------------- //导出excel $("#output").click(function(){ var myDate = new Date(); $("#example").table2excel({ exclude: ...

    jquery.jSelectDate.js 下拉列表式日期选择插件实例.rar

    jquery.jSelectDate.js 下拉列表式日期选择器插件实例,...功能介绍:1.支持闰年、大小月和二月天数的处理  2.新增一个Span标签的外框,以便于设置样式  3.新增可设置是否在下拉列表后面加入“年、月、日”几个字

    jquery-3.6.0.min(1).js

    jquery-3.6.0.min(1).js

    jquery-1.7.1.min.js

    jquery-1.7.1.js 和jquery-1.7.1.min.js

    jQuery1.11.1.min.js和jquery2.1.1.js.zip

    本次提供的有:jquery-1.11.1.js、jquery-1.11.1.min.js、jquery-... 3、2.x版本和1.x版本有着相同的API,但2.x版本不再支持IE6、IE7和IE8。 4、当前IE6、7、8的用户还是很多的,所以一般实际应用还是选择1.x版本的多。

    jquery.cookie.js

    jquery.cookie.js 使用方法: var cookie_name="submenu_cookie"; var value="selected"; var options={path:'/',expires:1}; 设置: $.cookie(cookie_name,value,options); 取值:$.cookie(cookie_name)

    jQuery-1.11.3.min.js.zip

    jQuery1.11.3 版本来自jQuery官网,在1.x版本中,jQuery1.11.3比较稳定,经典,本次提供的包括jquery-1.11.3.min.js和jquery-1.11.3.js两个文件,欢迎各位开发人员使用! jquery-1.11.3 直引地址: 百度压缩版...

    jquery-1.7.2.js免费下载

    而相比于1.7.2 RC1,只修复了一个bug。值得注意的是:如果你正在使用jQuery Mobile,请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本,因为之前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。 ...

    jquery-3.3.1.js/min.js

    jquery-3.3.1.js/min.js

    jquery.SuperSlide.2.1.1.js.下载

    轮播图、标签切换,教程地址:http://www.superslide2.com/demo.html

    jquery图片播放器 - jquery.fn.imgplayer-1.2

    1. 项目编码为GBK 2. 目前播放模式支持 1:溶解,2:挂历模式,3:滑动(从左到右),4:滑动(从上到下),5:滑动(从下到上),6:滑动(从右到左),善不支持随机模式 3. 在IE6,IE8,FF下测试通过 4. 支持任意数量图片,使用...

    jquery.bgiframe.js

    IE6下解决弹出div 被父页面的... 1.下载jquery.bgiframe.js ,在我的下载资源中有 2.需要修改div的属性,使用 $(function(){ $('#addDiv').bgiframe(); }); 下面是addDiv html: &lt;input /&gt; &lt;/div&gt;

    jquery-3.2.1.js 、 jquery-3.2.1.min.js 【jquery包,最新的截止到2017-11-1】

    jquery-3.2.1.js 、 jquery-3.2.1.min.js 【jquery包,最新的截止到2017-11-1】。

    jquery.ui.datepicker.js

    一个非常棒的时间插件 &lt;script language="javascript"&gt; $(document).ready(function() { ... monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], }); }); &lt;/script&gt;

    jquery.wordexport.js-master.zip

    1、html中的style要复制到jquery.wordexport.js中的style去,否则导出的word样式不正确。 2、jquery.wordexport.js中对图片做了处理,所以不支持img标签的style。如对图片有要求可自行修改代码。 3、jquery....

    jQuery 1.7.2 正式版, jquery 1.7.2 min.js

    而相比于1.7.2 RC1,只修复了一个bug。值得注意的是:如果你正在使用jQuery Mobile,请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本,因为之前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。 ...

Global site tag (gtag.js) - Google Analytics