这篇文章将为大家详细讲解有关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> <h3>This is a heading</h3> <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> <h3 class="test">This is a heading</h3> <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> <h3>This is a heading</h3> <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> <h4>Island Trading</h4> <div class="ex"> <button class="hide" type="button">Hide me</button> <p>Contact: Helen Bennett<br /> Garden House Crowther Way<br /> London</p> </div> <h4>Paris Trading</h4> <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>关于“jQuery基础知识点有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
