+98 21 888 10 819
شبکه دی

ورود اعضاء

شناسه کاربری:
رمز عبور:

کد: 1503 تاریخ انتشار: 1392/12/26
آموزش مقدماتی و آشنایی با jQuery

طراحی وب سایت و jQuery

jQuery کتابخانه ای از متودها و دستورات آماده جاوا اسکریپت می باشد که برای راحت تر شدن طراحی وب سایت می باشد و در نتیجه کد کمترمی نویسید و کار بیشتری انجام می دهید .
برای یادگیری این زبان ابتدا شما باید با جاوا اسکریپت و کمی HTML, CSS آشنایی داشته باشید
برای اینکه بتوانید از jQuery استفاده کنید باید آن را به سایت خود لینک کنید :

روش اول jQuery را از سایت www.jquery.com/download دانلود کرده و :

<script src="jquery-1.10.2.min.js"></script>

روش دوم اینست که CDN را به سایت خود لینک دهید در سایت www.jquery.com/download درقسمت CDN می توانید از CDN های موجود استفاده کنید و دیگر نیازی به دانلود و لینک jQuery نمی باشد .
توجه کنید که CDN گوگل برای ایران فیلتر می باشد .

در jQuery برای انتخاب المنت یا تگ یا هر چیزی از $ استفاده می شود .
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});

خط اول از این قطعه کد به این معناست که هنگامی که سایت ما لود شد دستورات را انجام دهد , دستور بعدی $("p") به این معناست که تمامی تگ های p را انتخاب کن و در ادامه Click(function() {}; به این معناست که با کلیک بروی تگ p این متود را انجام بده که در این تگ p , Display :noneخواهد شد .

بعد از $ داخل پرانتز سلکتور قرار می گیرد که می تواند به صورت های زیر باشد :

$("ID#") , $(.Class) , $('Tag') , $(".classname tag") , ...
پس هنگامی که ما بخواهیم با کلیک بروی کلیدی با #mybtn تمامی تگ های p را حذف کنیم به صورت زیر عمل می کنیم :

<script>
$(document).ready(function(e) {
$('#mybtn').click(function(){
$('p').hide();
});
});
</script>

حال شما را با افکت های jQuery آشنا می کنیم :
نخستین افکت jQuery که در اینجا بررسی خواهد شد SlideDown می باشد , لطفا به کد زیر توجه کنید :

$("#flip").click(function(){
$("#panel").slideDown();
});

این کد در واقع به سیستم می گوید هنگام کلیک بروی المنتی با آی دی #flip پنل را به صورت انیمیشن اسلاید کن به سمت پایین برای عکس این کار نیز می توانیم از SlideUp استفاده کنیم , ولی اگر بخواهیم با کلیک SlideDown و با کلیک دوباره SlideUp کنیم چه کنیم ؟

برای این کار یا می توانیم از دستورات Callback Function استفاده کنیم و یا از دستور SlideToggle .

افکت های دیگر نیز مثل FadeOut, FadeIn , FadeToggleنیز به این صورت می باشند .

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

فرض کنیم در کد HTML خود یک Table دارید که تمام ردیف های آن یک رنگ هستند و سطر های زیادی را شامل می شود برای خوانا تر کردن متن داخل سطر ها می خواهید سطرهای زوج را به رنگی دیگر درآورید برای اینکار به شکل زیر عمل می کنید :
<script>
$(document).ready(function(e) {
$('#myTable tr:even').css('background-color','#efefef');
});
</script>

به سلکتور گفته شده که Table با آی دی myTable سطر های زوج را گرفته و در CSS بک گراند آنها را عوض کند .

  • نویسنده: آرش یزدانی
منبع: دی تلکام
آدرس منبع: http://day.ir/articles/webdesign

تمامي كالاها و خدمات اين فروشگاه، حسب مورد داراي مجوزهاي لازم از مراجع مربوطه مي‌باشند و فعاليت‌هاي اين سايت تابع قوانين و مقررات جمهوري اسلامي ايران است.
© کلیه حقوق مادی و معنوی این سایت به دی تلکام تعلق دارد .