溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關jQuery基礎知識點有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
$(this).hide()
jQuery 的 hide() 函數，隱藏當前的 HTML 元素。
$("p").hide()
jQuery 的 hide() 函數，隱藏所有 <p> 元素。
$(".test").hide()
jQuery 的 hide() 函數，隱藏所有 class="test" 的元素。
$("#test").hide()
jQuery 的 hide() 函數，隱藏 id="test" 的元素。
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基礎知識點有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
