پنهان و نمایان کردن عناصر در jQuery – درس شانزدهم

Posted By: adminon: فروردین ۱۸, ۱۳۹۷در: آموزش, اخبار سئو سایت, اخبار طراحی سایت, اخرین اخبارNo Comments

برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

پنهان و نمایان کردن عناصر در جی کوئری

در یکی دیگر از آموزش های جی کوئری همراه شما هستیم و می خواهیم به شما نحوه استفاده از بعضی از کدهای کتابخانه زیبای جی کوئری را آموزش دهیم. طراحان وب سایت با کتابخانه جی کوئری آشنای کامل دارند. در این آموزش دستور پنهان و نمایان کردن عناصر در jQuery را به شما معرفی می کنیم، که برای هر طراح وب بسیار مفید خواهد بود.

در صورتی که با جی کوئری آشنایی کامل ندارید ، با آموزش های قدم به قدم جی کوئری و از درس اول آموزش جی کوئری شروع نمایید.

افکت های جی کوئری

استفاده جاوا اسکریپت و کتابخانه مرتبط با آن نظیر جی کوئری (jQuery) و دیگر کتابخانه ها در طراحی سایت بسیار پرکاربرد می باشد و باعث بهبود رابط کاربری سایت با کاربران می شود. قطعه کد اسکریپت که در جی کوئری بسیار مورد استفاده قرار می گیرد ، پنهان و نمایان کردن عناصر در jQuery یا تگ های موجود در صفحه وب است.

استفاده از متدهای show()و hide()

افکت های hide و show نیز برای پنهان و نمایان کردن عناصر در jQuery به کار می رود. شما می توانید عناصر داخل صفحه وب را با متدهای hide و show مخفی و نمایش کنید.

نکته: اگر می خواهید عمل مخفی کردن و نمایش دادن با مدت زمانی مشخص انجام شود می توانید یک زمان مشخص مانند ۱۰۰۰ میلی ثانیه در قسمت hide(1000) قرار دهید. این پارامتر بر اساس میلی ثانیه می باشد.

توجه: با کپی کردن کدهای زیر در محیط کدنویسی خود ، کدها به درستی نمایش داده می شوند.

<html>
<head>
<script type="text/javascript" src="http://www.spadan.net/jquery.js"> </script>
<script type="text/javascript">
 $(document).ready(function(){
  	$("#hide").click(function(){
    		$("p").hide(1000);
  	});
  	$("#show").click(function(){
    		$("p").show(1000);
  	});
});
</script>
</head>
<body dir="rtl" style="text-align: center">
<p> "Hide" کلیک کنید، برای پنهان روی دکمه  "show"برای نمایش روی دکمه .</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

استفاده از متد toggle

یکی دیگر از متدهای که در کتابخانه جی کوئری استفاده زیادی از آن می شود متد toggle() است که برای پنهان و نمایان کردن عناصر در jQuery یا قسمتی از صفحه به کار می رود.

نکته: متد toggle() دو عمل hide() و show() را با هم انجام می دهد.

توضیح کد: همانطور که ملاحظه می فرمایید، عنصری یا آیدی button وقتی روی آن کلیک شد رویداد toggle() برای آیدی p1 اتفاق می افتد و مخفی یا نمایش داده می شود.

<html>
 <head>
 <script type="text/javascript" src="http://www.spadan.net/jquery.js"> </script>
 <script type="text/javascript">
  $(document).ready(function () {
 	$("# button").click(function(){
 		$("#p1").toggle();
 });
 });
 </script>
 </head>
<body>
<p> نحوه تغییر وضعیت عنصر</p>
 <button id=" button" type="button">Toggle</button>
</body>
</html>

در آموزش بعدی می پردازیم به محو کردن عناصر در jQuery . با ما همراه باشید.

در این قسمت می توانید دیگر آموزش های جی کوئری اسپادان را دنبال نمایید.

موفق باشید