افزودن رفرنس کتابخانه جی کوئری


در مقاله قبل ، جی کوئری را معرفی کردیم و لزوم استفاده از آن را توضیح دادیم . و همچنین کتابخانه جی کوئری را از سایت Jquery.com دانلود نمودیم .

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

 

ایجاد فایل html :

فولدری بنام jq_ch_1  ایجاد کنید و فایل کتابخانه jquery که دانلود کردید را داخل آن بریزید . نرم افزار ویژوال استودیو را باز کنید . در همین فولدر فایلی با فرمت html و نام selectors بسازید . در تگ head این فایل کد زیر را بنویسید :

<script type="text/javascript" src="jquery-1.12.2.js"></script>

با اینکار رفرنس کتابخانه جی کوئری را به وب سایت خود اضافه نمودیم .

حال می خواهیم کدی بنویسیم که متوجه شویم جی کوئری لود شده است یا خیر :

<script type="text/javascript">

        $("document").ready(function () {

            $("body").append("<p>Jquery is Loaded !</p>");

        });

    </script>

توضیح : این کد را باید بعد از رفرنس کتابخانه جی کوئری بنویسید . علامت $ عبارت خلاصه jquery می باشد . پس می توانیم بجای $ از کلمه jquery نیز استفاده کنیم ولی $ بیشتر مرسوم می باشد . عبارت  $(“body”) یک selector است و بدین معنی می باشد که عملیاتی که بعد از آن گفته بیان می شود روی body اعمال می شود . در نهایت زمانی که داکیومنت ready باشد عبارت Jquery is Loaded ! در بدنه وب سایت نوشته می شود .

اگر میخواستیم عبارت فوق را توسط جاوا اسکریپت بنویسیم باید کدی بصورت زیر را بنویسیم :

                              
    window.addEventListener("DOMContentLoaded", function(evt) {
        var elem = document.getElementsByTagName("body")[0];
        var para = document.createElement("p");
        var text = document.createTextNode("The page just loaded!");
        para.appendChild(text);
        elem.appendChild(para);
    });

 

مشاهده می کنید که در جاوااسکریپت باید ۶ خط کد بنویسیم ولی جی کوئری همین کار را در دو خط انجام می دهد !

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

  • سلکتور ها (Selectors)
  • رویدادها (Events)
  • انیمیشن ها (Animations)

در مقاله بعد ، درباره سلکتور (selector) در جی کوئری صحبت خواهیم کرد .



دیدگاه ها :