آموزش jQuery با مثال‌های کاربردی – بخش اول
آموزش jQuery با مثال‌های کاربردی - بخش اول » در این مقاله، کتابخانه جی کوئری را معرفی کرده و آنرا دانلود می کنیم. رویدادها و انیمیشن ها را آموزش می دهیم.

آموزش jQuery با مثال‌های کاربردی – بخش اول

jQuery Essential Training – Part1

برگرفته از ویدیوی آموزشی Lynda.com

 

آموزش jQuery با مثال‌های کاربردی - بخش اول

 

جی کوئری چیست ؟

کتابخانه ای از جاوا اسکریپت است که رایگان و متن باز (Open Source) می باشد و در اکثر مرورگرهای موجود بخوبی کار میکند (Cross Browser) . همچنین بسادگی قابل فهم و توسعه می باشد .

جی کوئری می تواند براحتی با css و Javascript تعامل داشته باشد و پلاگین های بسیار زیادی در اینترنت (بصورت رایگان و متن باز) وجود دارد که می توانیم از آنها در پروژه خود استفاده کنیم و یا ایده بگیریم . همانطور که در تصویر فوق (لوگوی جی کوئری) مشخص است ، شعار جی کوئری write less, do more می باشد . به این معنی که کمتر بنویس ، بیشتر انجام بده . به زبان خودمانی یعنی با کد کمتر بازدهی بیشتری خواهید داشت . وب سایت اصلی و مرجع جی کوئری Jquery.com می باشد که دوستانی که با زبان انگلیسی آشنایی بیشتری دارند ، راحت تر می توانند از آموزش ها و پلاگین های این سایت استفاده کنند .

 

استفاده از IDE مناسب :

برای شروع کد نویسی ، نرم افزاری نیاز دارید که کدهای JQuery را در آن بنویسید . می توانید از یکی از نرم افزارهای Visual StudioBracketsSublime Text استفاده کنید :

https://www.sublimetext.com/

http://brackets.io/

https://www.visualstudio.com/

بنده از نرم افزار Visual Studio استفاده می کنم . اکثر مقالات این دوره آموزشی نیازی به سرور ندارند ولی در مقاله ای که به Ajax می رسیم باید از وب سرور استفاده کنیم زیرا Ajax با سرور در تعامل است .

 

دانلود جی کوئری :

با مراجعه به وب سایت جی کوئری (http://jquery.com/download/) مشاهده می کنید که در کل دو نسخه جی کوئری داریم . یکی Compressed Production و دیگری نسخه UnCompressed Development . در زمان نگارش این مقاله ، نسخه ۱٫۱۲٫۲ از جی کوئری در دسترس می باشد .

فعلا از نسخه دوم یعنی غیر فشرده استفاده می کنیم و بنابراین روی لینک مربوط به آن راست کلیک کرده (مطابق تصویر زیر) و Save Link As را بزنید :

دانلود جی کوئری

 

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

 

ایجاد فایل html :

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

 

افزودن رفرنس کتابخانه jQuery به سایت:

در تگ 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)

 

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

 

سلکتور در jQuery چیست؟

به عباراتی مانند $(“body”) و $(“p”) سلکتور می گویند . که تمام پاراگراف های موجود در صفحه را انتخاب می کند . حال اگر بخواهیم بگوییم اولین پاراگراف را انتخاب کن باید از فیلترها (Filters) استفاده کنیم . بدین صورت : $(“p:first”)

 

سلکتورهای کلاس و آیدی در جی کوئری:

نکته ۱): فرض کنیم می خواهید دکمه یا لینکی را که آیدی btn1 دارد را انتخاب (select) کنید . باید سلکتور را بصورت $(“#btn1”) بنویسیم . علامت # بیانگر آیدی المان می باشد .

نکته ۲): فرض کنید می خواهید المانی در صفحه را که کلاس css ای بنام btn1 دارد را انتخاب کنیم . سلکتور بصورت $(“.btn1”) خواهد بود .

برای مثالهای بعدی ، متن زیر را در بخش body فایل selectors.html بنویسید :

<h1 id="intro">Introduction to jQuery Selectors and Filters</h1>

<p>Selectors and Filters provide a way of finding and extracting information from Web pages.</p>

<h2 class="selectors">Selectors</h2>

<p>Selectors are used to select parts of the Web page using a common CSS-style syntax.</p>

<p>For example, $("p") will select all of the paragraph tags in a document and return them as a list that can be further operated upon.</p>

<h2 class="filters">Filters</h2>

<p>Filters are used to further refine the results returned from selectors.</p>

<p>For example, $("p:first") will select the first paragraph in the returned set from $("p").</p>
 

بنابراین تا کنون فایل html دارای کدهای زیر است :

برای اینکه حاشیه تمام پاراگراف های صفحه را قرمز رنگ کنیم ، عبارت زیر را در بخش script بنویسید :

                              
  $("p").css("border", "3px solid red");

توضیح : برای اعمال استایل های css به سلکتور ، از تابع css استفاده می کنیم که دو پارامتر می گیرد ، اولی نام property و دومی مقدار آن که در اینجا border : 3px solid red می باشد . خروجی بصورت تصویر زیر می باشد :

مقدمه آموزش سلکتور در جی کوئری

 

                              
    $(".selectors").css("border", "3px solid red"); //1
    $("#intro").css("border", "3px solid red"); //2
    $("p:first").css("border", "3px solid red"); //3
    $("h2:not(.selectors)").css("border", "3px solid red"); //4

شرح دستورات فوق:

  • خط۱: برای اینکه استایل بالا روی تمام المان هایی که کلاس selector دارند اعمال شود
  • خط۲: اعمال استایل css روی المانهای با آیدی intro
  • خط۳: اعمال حاشیه قرمز رنگ به اولین پاراگراف
  • خط۴: انتخاب المان یا المان هایی که دارای کلاس selector نیستند

 

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

 

تغییر محتوای یک صفحه وب توسط جی کوئری:

فایل html جدیدی بنام content.html در فولدر jq_ch_1 بسازید . مانند فایل مثال قبل در بخش head کتابخانه جی کوئری را add کنید و کدهای زیر را بعد از آن بنویسید :

 $("document").ready(function () {
        //create some new content
           var newP = $("<p></p>"); newP.append("<em>Welcome to Mohtava.info</em>"); $("#example").html(newP); $("#creation").prepend("Watch This! "); 
       //change the existing content 
           $("#example").html("<h2>This is a new H2</h2>");
           $("#example").text("<h2>This is a new H2</h2>");
});
 

و متن زیر را در بخش body فایل بنویسید :


<h1 id="intro">
    Using jQuery to Create/Change Content
</h1>

<p>
    jQuery makes it very easy to create new page content and change existing page content.
</p>

<h2 id="creation">
    Content Creation
</h2>

<p>
    Creating new content is as simple as passing a string of HTML to the $() function.
</p>

<p>
    For example, $("<p>") creates a new, empty paragraph tag. To add new content to the paragraph, you could simply write $("<p>").append("<em>Hello there</em>").
</p>

<h2 id="changing">
    Changing Content
</h2>

<p>
    There are multiple ways to change page content using jQuery, depending on your needs.
</p>

<p>
    The html() and text() functions can be used to directly manipulate the contents of elements, and there are ways to control how content can be inserted and moved around in the page.
</p>

<div id="example">
   
</div>

توضیح : در دستور اول یعنی var newP متغیری تعریف کردیم که آغازکننده یک paragraph می باشد (<p>) و در خط بعدی عبارت Welcome to Mohtava.info  را به پاراگراف اضافه می کند . در خط سوم سلکتوری برای انتخاب المانی در صفحه با id=example می باشد که پاراگراف فوق را به آن اضافه کند .

اگر سایر دستورات واقع در بین تگ script را کامنت کنید ، خروجی زیر را خواهید دید :

تولید-تغییر محتوا توسط جی کوئری

یعنی با اجرای دستورات زیر به خروجی فوق می رسیم :

$("document").ready(function () {
  // create some new content
  var newP = $("<p></p>"); newP.append("<em>Welcome to Mohtava.info</em>"); $("#example").html(newP); 
});

تابع html ، تمام محتوای سلکتور خود را برابر مقدار ورودی در نظر میگیرد یعنی متن آن سلکتور کاملا عوض می شود ولی اگر بخواهیم متنی به بعد از متن داخل سلکتور (مثلا div با کلاس something) اضافه شود از دستور append استفاده میکنیم و اگر بخواهیم متن جدید  به قبل از متن قبلی یعنی بالای متن قبل اضافه شود از prepend استفاده کنید :

                              
   $("#creation").prepend("Watch This! ");

با اجرای این دستور ، عبارت Watch This! بالای متن حال حاضر div با آیدی creation اضافه می شود .

همانطور که قبلا گفتیم ، تابع html کل محتوای داخل سلکتور را تغییر می دهد . تابع دیگری برای انجام اینکار وجود دارد بنام text . البته با تابع html تفاوت دارد و آن اینست که هر آنچه در داخل تابع text نوشته شود (اعم از تگ html) عینا در سلکتور نوشته می شود ولی تابع html تگ های html را render میکند . مثلا اگر بنویسیم : text(“<h3>Mohtava.info</h3>”) عبارت <h3>Mohtava.info</h3> عینا بجای محتوای سلکتور قرار می گیرد .

در بخش قبل ، بطور مختصر درباره تولید و تغییر محتوای یک صفحه وب توسط append و prepend صحبت کردیم . در این بخش می خواهیم بطور اجمالی  رویدادها (events) در جی کوئری را مورد بررسی قرار دهیم .

 

رویدادها (events) در جی کوئری:

بعنوان مثال وقتی موس از روی یک div با id=example کنار می رود (Mouse Over) یک رویداد رخ داده است . به مثال ساده زیر دقت کنید :

 

پیاده سازی رویدادهای MouseMove و MouseLeave

در این مثال می خواهیم رویدادهای MouseMove و MouseLeave را پیاده سازی کنیم .

یک فایل html جدید بنام events ایجاد کنید و کتابخانه جی کوئری را نیز به آن اضافه کنید .

کد های زیر را به بخش head و بعد از رفرنس کتابخانه جی کوئری اضافه کنید :

استایل زیر را بنویسید:

                              
        #example {
            height:300px;
            width:300px;
            border:2px outset red;
        }

اسکریپت زیر را بنویسید:

                              
        $("document").ready(function () {
            $("#example").on("mousemove", OnMouseMove);
            $("#example").on("mouseleave",OnMouseLeave);
        });
        function OnMouseMove() {
            $("#example").html("Mouse In !");
        }
        function OnMouseLeave() {
            $("#example").html("Mouse Out !");
        }

و سپس تگ div زیر را در body صفحه اضافه کنید :

<div id="example">
  
</div>

 توضیح : ابتدا به باکس با آیدی example عرض و طول و حاشیه داده ایم و سپس در script ، رویدادهای Mouse Leave و Mouse Move را صدا زده ایم و در نهایت در بدنه صفحه ، div با آیدی example را تعریف کرده ایم .

 

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

 

پیاه سازی انیمیشن در jQuery توسط تابع animation:

قابلیت جالب دیگر در جی کوئری انیمیشن ها می باشند که توسط تابع animate پیاده سازی می شوند . در مثالی که برای انیمیشن ها در نظر گرفتیم ، یک button داریم با آیدی go و مانند مثالهای قبل ، یک div داریم با آیدی testDiv . میخواهیم با زدن دکمه Go ، انیمیشن هایی روی div اعمال شود.

 

ایجاد فایل animation.html و درج دستورات لازم:

فایل جدیدی بنام animation.html بسازید و مانند مثالهای قبل ، کتابخانه جی کوئری را به بخش head آن بیافزایید . حال در بدنه فایل html یعنی تگ body کدهای زیر را بنویسید :

<button id="go">Go !</button>

<div id="testDiv"></div>

استایل های css موردنیاز:

میخواهیم استایلی را به باکس مذکور اعمال کنیم . پس کدهای زیر را داخل تگ head بنویسید :


    #testDiv {
        position: relative;
        width: 150px;
        height: 100px;
        margin: 10px;
        padding: 20px;
        background: #b3c8d0;
        border: 1px solid black;
        font-size: 16pt;
        cursor: pointer;
    }

دستورات داخل بلاک script:

در این مرحله به سراغ دستورات داخل بلاک script می رویم که کدهای جی کوئری لازم را برای صدا زدن تابع انیمیشن در آنجا تعریف کنیم .

توضیح کلی : می خواهیم باکس فوق ، بعد از فشردن دکمه Go ، ابتدا طولش ۴۰۰px شود و سپس ارتفاعش یعنی height به ۴۰۰px برسد . در مرحله بعد از سمت چپ صفحه ۲۰۰px فاصله بگیرد و در نهایت نیز border آن ضخیم شود .

به کد زیر دقت کنید :

                              
$("#go").click(function() {
    $("#testDiv").animate({width: 400}, 300)
    .animate({height: 300}, 400)
    .animate({left: 200}, 500)
    .animate({top: "+=100", borderWidth: 10}, "slow")
});

شرح تابع animation در jQuery:

مشاهده می کنید که ۴ بار از تابع animate استفاده کرده ایم و به ترتیب width , height , left , borderWidth را تحت تاثیر قرار داده ایم . بعنوان مثال animate({width:400px}, 300) به این معنی می باشد که در طول مدت زمان ۳۰۰ میلی ثانیه ، طول div را از هر چه که هست به ۴۰۰ پیکسل برسان .

نکته : در دستور آخر دو عملیات روی div بطور همزمان اعمال می شود . گفته ایم که با سرعت slow بطور همزمان div هم از بالا ۱۰۰ پیکسل فاصله بگیرد و هم ضخامتش به ۱۰ پیکسل برسد .

بخش اول از سری آموزشی jQuery  در اینجا به پایان می رسد . در جلسه بعد ، بیشتر وارد جزئیات مفاهیمی چون سلکتور-رویداد-انیمیشن می شویم .


برچسب‌ها:

آموزش Jqueryآموزش جی کوئریانیمیشن جی کوئریتابع animationدانلود جی کوئریدرباره jqueryرویدادها در جی کوئریسلکتور جی کوئریسلکتور در jQueryمعرفی جی کوئری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شانزده + 17 =