jQuery：1.[1

来源：互联网发布：九阴绝学玄兵升级数据编辑：程序博客网时间：2024/06/18 13:16

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>

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