نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 2099
تاریخ بروزرسانی ۹ فروردین ۱۴۰۱

متد ()clone در جی کوئری -درس چهاردهم

آموزش متد ()clone در جی کوئری

اگر برنامه نویس باشید و یا حتی با برنامه نویسی آشنایی اندکی داشته باشید حتما درک خواهید کرد که نوشتن قطعه کدی تکراری کسل کننده خواهد بود و شدت آن زمانی زیاد میشود که عنصر مورد نظری که قصد کپی کردن آن را دارید رویداد ها و پارامترهایی را به همراه داشته باشد. اما بهتر است بدانید جی کوئری برای حل این مشکل متدی به نام ()clone دارد. متاسفانه وقتی درباره متد ()clone سرچ میکردم به سایت های آموزشی برخورد کردم که درباره متد ()clone به اشتباه توضیح داده بودن .از این رو تیم طراحی سایت وب یار تصمیم دارد تا درسری آموزشی جی کوئری به آموزش متد ()clone بپردازد.با تیم طراحی سایت اصفهان وب یار همراه باشید.

متد ()clone در جی کوئری

متد ()clone :

متد ()clone برای ایجاد یک کپی از عناصر همگرا استفاده می شود.به زبان ساده تر متد ()clone برای کپی یا اضافه کردن عناصر همگرا HTML در ابتدای عنصر انتخاب شده استفاده می شود.

متد ()clone از پارامترهای بولین برای کپی کردن یا  کپی نکردن رویدادها و داده های همراه با عنصر همگرا استفاده می کند.

ساختار این متد به صورت زیر است :

$(selector).clone(true|false);
  • Selector : تعیین کننده  عنصری است که می خواهیم از آن کپی ایجاد کنیم .
  • false  : مشخص می کند که متصدیان رویداد نباید کپی شوند.به عبارتی دیگر تعیین میکند که تنها عنصر مورد نظر بدون هیچ کدام از رویداد ها و داده های همرا آن کپی شود.
  • true  : مشخص می کند که متصدیان رویداد نیز باید کپی شوند. به عبارتی دیگر تعیین میکند که عنصر مورد نظر با تمامی رویداد ها و داده های همراهش کپی گردد.

 

برای اینکه با کارایی های متد ()clone و طرز استفاده از متد ()clone بیشتر آشنا شوید به مثال های ذیل توجه نمایید:

  • کپی کردن عناصر html:

به عنوان مثال، فرض کنید شما قصد دارید کد زیر را در جایی دیگر از کدهای خود کپی نمایید.

 <div class="webyar">

        Web designe

        <div class="seoyar">seo site</div>

  </div>

از این متد برای ایجاد یک کپی از عناصر بالا استفاده می کنیم حتی می توانیم توسط متد insertafter یا insertbefore عناصر کپی شده را به ترتیب بعد و قبل از کلاس webyar که حاوی کلاس seoyar است قرار دهیم.

$('.webyar').clone().insertAfter(".webyar");

خروجی:

<div class="webyar"> 
     Web designe      
     <div class="seoyar">seo site</div>
</div>
<div class=" webyar ">       
    Web designe       
    <div class="seoyar">seo site</div>
</div>

  • کپی کردن رویداد های پردازنده:

به عنوان مثال، فرض کنید شما قصد دارید دکمه cloneButton1 همراه با رویداد کلیک روی آن را کپی نمایید.

<button id="cloneButton1">clone()</button>

 <script type="text/javascript">
    $("#cloneButton1").click(function(){
           $('.webyar').clone().insertAfter(".webyar");
     });
 </script>

در مثال بالا با فشردن دکمه cloneButton1 کپی از کلاس webyar بعد از آن قرار خواهد گرفت.

اگر از روش پیش فرض ()clone یا (clone (false استفاده نمایید، تنها عنصر دکمه را کپی می کند، اما رویداد کلیک روی دکمه کپی نخواهد شد.

$('#cloneButton1').clone().insertAfter("#cloneButton1");

و اگر از (clone (true استفاده نمایید عنصر دکمه همراه رویداد کلیک همراه آن کپی خواهد شد.

$('#cloneButton1').clone(true).insertAfter("#cloneButton1");

برای اینکه کاملا مطالب و مثال های بیان شده را درک نمایید حتما کد زیر را یک بار به طور کامل تست نمایید تا خروجی آن را ببینید.

<html>
  <head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
   <style type="text/css"> 
       .smallBox{
          padding:8px;              
          border:1px solid blue;              
          margin:8px;        
          }        
       .smallInnerBox{              
          padding:8px;              
          border:1px solid green;               
          margin:8px;        
          }</style>
   </head>
<body>  
  <h1>example for clone()</h1>   
    <div class="webyar">       
         Web designe        
          <div class="seoyar">seo site</div>
     </div>   
     <p>  
       <button id="cloneButton1">clone()</button>  
       <button id="cloneButton2">clone() button (default)</button>
       <button id="cloneButton3">clone(true) button</button>  
       <button id="reset">reset</button>  
    </p> 
  <script type="text/javascript">
      $("#reset").click(function () { 
         location.reload();    
       });     
      $("#cloneButton1").click(function () { 
          $('.webyar').clone().insertAfter(".webyar"); 
          });    
      $("#cloneButton2").click(function () {  
          $('#cloneButton1').clone(false).insertAfter("#cloneButton1");    
          });    
      $("#cloneButton3").click(function () { 
          $('#cloneButton1').clone(true).insertAfter("#cloneButton1");    
          });
   </script>
 </body>
</html>

در نهایت از همراهی شما دوستان عزیز وب یار سپاس گذاریم.

فراموش نکنید اگر در رابطه با استفاده از متد ()clone در جی کوئری با مشکلی مواجه شدید و یا حتی نیاز به توضیح بیشتری در این باره داشتید ، تیم طراحی سایت وب یار پاسخ گوی سوالات شما خواهد بود.

همچنین می توانید با مراجعه به مرجع آموزش جی کوئری با دیگر مباحث این حوزه هم آشنا شوید.

 

مقالات مرتبط
بهترین راهکار برای رفع محدودیت فالو در اینستاگرام

انواع محدودیت های حال حاضر در اینستاگرام • محدودیت فالوو کردن سایر کاربران اینستاگرام: • محدودیت لایک کردن پست‌های مختلف کاربران اینستاگرام: • محدودیت کامنت گذاشتن برای پست‌های مختلف شبکه اینستاگرام: • محدودیت به کار بردن هشتگ در پست‌های مختلف شبکه اینستاگرام: • محدودیت تعداد کلمات متن (کپشن) پست اینستاگرام: • محدودیت تعداد کاراکترهای Biography کاربران اینستاگرام: هدف از فالو و آنفالو کردن در اینستاگرام…

شرکت های طراحی اپلیکیشن

“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار…