طراحی سایت اصفهان | سئو سایت اصفهان |طراحی سایت در اصفهان

031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » jquery » پنهان و نمایان کردن عناصر در jQuery – درس شانزدهم

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

۲۴ام اسفند ۱۳۹۶
شیما قطره سامانی
0
55

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

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

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

 

متد data متد removedata

 

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

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

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

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

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

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

 

<html>
<head>
<script type="text/javascript" src="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="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 . با ما همراه باشید.

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

موفق باشید 🙂

درباره نویسنده :
شیما قطره سامانی

عاشق طراحی سایت هستم. جدی ، مصمم و پر تلاش.

مطالب مرتبط

متد before در جی کوئری

متد Before در جی کوئری – درس پانزدهم

متد Before  در جی کوئری جی کوئری یک کتابخانه ی جاوا اسکریپت سریع, کوچک و بسیار غنی می باشد. جی کوئری یک چارچوب از جاوا اسکریپت است که هدف آن آسان ساختن استفاده از کد های جاوا اسکریپت در طراحی سایت می باشد. با متد ها و قواعد دستوری جی کوئری که در آموزش های […]

آموزش راه اندازی و نصب جی کوئری

آموزش نصب جی کوئری jQuery – درس دوم

آموزش راه اندازی و نصب جی کوئری ( JQuery ) در درس قبلی آموزش جی کوئری از امکانات JQuery صحبت نمودیم.  در این آموزش قصد داریم  نصب جی کوئری JQuery  را به شما آموزش دهیم زیرا که اولین قدم در کار با جی کوئری اصطلاحا نصب جی کوئری می باشد. اما بهتر است بدانید منظور […]

PHOTOSHO

آموزش طراحی سایت در فتوشاپ

برای آموزش طراحی سایت در فتوشاپ باید سرعت طراحی سایتتان در فتوشاپ بالا باشد در این آموزش طراحی سایت با فتوشاپ photoshop به شما کلید های سریع طراحی سایت در فتوشاپ را آموزش میدهیم.  ترفند شماره 1: چگونه یک قسمت از یک سند را که از چند لایه تشکیل شده کپی کنیم وقتی منطقه ای […]

کلاس طراحی سایت php jquery css3 html اصفهان

سلام به همه علاقه مندان به طراحی سایت و سئو سایت و کسب درآمد از این صنعت شما هم مثل من عاشق اینترنت و فناوری ، کسب درآمد از وب  هستی ؟؟؟ یا مثل من اگر یک روز نری تو اینترنت و درآمد ازش فکر نکنی روزت روز نمیشه؟ یا فقط باهاش حساباتون ، فیس […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید