انجمن برنامه نویس

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

شروع موضوع توسط شیما ‏3/3/18 در انجمن جاوا اسکریپت و جی کوئری

گنجینه های
برنامه نویسی
فیلم های آموزشی
زبان های برنامه نویسی
فیلم های آموزشی
پروژه محور C#
فیلم های آموزشی
برنامه نویسی اندروید
فیلم های آموزشی
طراحی سایت
فیلم های آموزشی
برنامه نویسی پایه
گنجینه برنامه نویسی C# آموزش برنامه نویسی C سیستم مدیریت بانک آموزش اندروید - مقدماتی آموزش زبان HTML اصول و مبانی برنامه نویسی
گنجینه آموزش ASP .Net آموزش برنامه نویسی C++‎ پیاده سازی مدیریت آتلیه آموزش اندروید - تکمیلی آموزش زبان CSS آموزش الگوریتم و فلوچارت
گنجینه برنامه نویسی PHP آموزش برنامه نویسی C# پیاده سازی سیستم هتلداری آموزش اندروید - پیشرفته آموزش زبان Java Script آموزش تبدیل فلوچارت به کد
گنجینه آموزش طراحی وب آموزش برنامه نویسی جاوا شبیه سازی دستگاه عابربانک آموزش ساخت لیست ایمیل آموزش زبان jQury برنامه نویسی اسمال بیسیک
گنجینه برنامه نویسی متلب آموزش برنامه نویسی PHP پیاده سازی مدیریت آموزشگاه آموزش ساخت گالری تصاویر آموزش زبان XML آموزش برنامه نویسی اسمبلی
گنجینه برنامه نویسی اندروید آموزش برنامه نویسی پایتون پیاده سازی سیستم صدور بلیت آموزش کنترل ربات با اندروید آموزش طراحی Responsive طراحی سایت ویژه کودکان
گنجینه برنامه نویسی VB .Net آموزش برنامه نویسی اندروید پیاده سازی سیستم نوبت دهی آموزش ارتباط با دیتابیس سرور ساخت سایت خبری کدنویسی سریع با Emmet
گنجینه زبان های برنامه نویسی آموزش برنامه نویسی زبان R سیستم حسابداری و انبارداری زبان بیسیک فور اندروید (B4A) ساخت سایت فروشگاه آموزش کار با پایگاه داده
  1. شیما
    karbar Rank

    تاریخ عضویت:
    ‏3/3/18
    ارسال ها:
    3
    تشکر شده:
    0
    امتیاز دستاورد:
    5
    جنسیت:
    زن
    آموزش جی کوئری – متد ()clone
    اگر برنامه نویس باشید و یا حتی با برنامه نویسی آشنایی اندکی داشته باشید حتما درک خواهید کرد که نوشتن قطعه کدی تکراری کسل کننده خواهد بود و شدت آن زمانی زیاد میشود که عنصر مورد نظری که قصد کپی کردن آن را دارید رویداد ها و پارامترهایی را به همراه داشته باشد. اما بهتر است بدانید جی کوئری برای حل این مشکل متدی به نام ()clone دارد .متاسفانه وقتی درباره متد ()clone سرچ میکردم به سایت های آموزشی برخورد کردم که درباره متد ()clone به اشتباه توضیح داده بودن .از این رو تیم طراحی سایت وب یار تصمیم دارد تا درسری آموزشی جی کوئری به آموزش متد ()clone بپردازد.با تیم طراحی سایت وب یار همراه باشید .
    [​IMG]
    متد ()clone :
    متد ()clone برای ایجاد یک کپی از عناصر همگرا استفاده می شود.به زبان ساده تر متد ()clone برای کپی یا اضافه کردن عناصر همگرا HTML در ابتدای عنصر انتخاب شده استفاده می شود.

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

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

    false : مشخص می کند که متصدیان رویداد نباید کپی شوند.به عبارتی دیگر تعیین میکند که تنها عنصر مورد نظر بدون هیچ کدام از رویداد ها و داده های همرا آن کپی شود.

    true : مشخص می کند که متصدیان رویداد نیز باید کپی شوند. به عبارتی دیگر تعیین میکند که عنصر مورد نظر با تمامی رویداد ها و داده های همراهش کپی گردد.

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

    • کپی کردن عناصر html با متد ()clone :
    به عنوان مثال، فرض کنید شما قصد دارید کد زیر را در جایی دیگر از کدهای خود کپی نمایید

    <div class="webyar">

    Web designe

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

    </div>
    از متد ()clone برای ایجاد یک کپی از عناصر بالا استفاده می کنیم حتی می توانیم توسط متد 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>​
    کپی کردن رویداد های پردازندهبا متد ()clone :
    به عنوان مثال، فرض کنید شما قصد دارید دکمه 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:1pxsolidblue;
    margin:8px;
    }
    .smallInnerBox{
    padding:8px;
    border:1pxsolidgreen;
    margin:8px;
    }</style>
    </head>
    <body>
    <h1>example forclone()</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 در جی کوئری با مشکلی مواجه شدید و یا حتی نیاز به توضیح بیشتری در این باره داشتید ، تیم طراحی سایت وب یار پاسخ گوی سوالات شما خواهد بود .
     
    آخرین ویرایش: ‏3/3/18