جی كوئری چیست و چگونه کار می کند؟

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

جی كوئری یك كتابخانه كوچك و سریع جاوا اسكریپت است كه امكانات بسیار زیادی در زمینه كار با اسناد HTML، DOM و CSS رو در اختیار توسعه دهندگان وب قرار میده. شما با استفاده از اون می تونید افكتهای زیبایی رو در طرح های خود پیاده كنید و صفحه ای پویا رو طراحی كنید و event ها رو كنترل كرده و از انیمیشن برای نشان دادن آنها استفاده كنید مثلا منو هایی كه با انیمیشن های زیبا باز و بسته می شوند.

جی كوئری برای این طراحی شده كه شما نوشتن جاوا اسكریپت از راهی دیگر تجربه كنید! با جی كوئری از طراحی وب لذت ببرید.

برای شروع باید این كتابخانه رو از لینك زیر در یافت كنید و اون رو به طرح خودتون اضافه كنید.

http://code.jquery.com/jquery–latest.js

در ضمن یك سری هم به سایت اصلیش بزنید:

http://www.jquery.com

از این لینك هم میتونید برای مطالعه بیشتر استفاده كنید:

http://docs.jquery.comجی كوئری چگونه کار می کند؟

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

خاصیت src را در تگ script به گونه ای تنظیم كنید كه به فایل jquery.js شما اشاره كند. مثلا اگر شما آن را در پرونده scripts قرار داده اید خاصیت src باید به این گونه باشد:

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

راه اندازی كد توسط Document Ready :
بیشترین چیزی كه اكثر یرنامه نویسان جاوا اسكریپت در اخر كد هاشون اضافه می كنند چیزی شبیه به این است:

window.onload = function(){ alert("welcome"); }

درون این كد چیزی هست كه شما می خواهید در زمان بارگذاری صفحه اجرا بشود. مشكل بزرگ این است كه در این صورت برنامه های جاوا اسكریپت تا زمانی كه تصاویر بارگذاری نشده اند اجرا نمی شوند. اولین دلیل استفاده از window.onload این است كه شما می خواهید تا زمانی كه همه كد های HTML صفحه بارگذاری نشده برنامه شما اجرا نشود.
برای حل این مشكلات جی كوئری ساختاری ساده ایجاد نموده است كه document را بررسی كند تا وقتی كه آماده برای اجرای اسكریپت شود:

$(document).ready(function(){
   // Your code here
 });

درون این ready event یك click handler برای پیوند ها ایجاد می كنیم:

$(document).ready(function(){
   $("a").click(function(event){
     alert("Thanks for visiting!");
   });
 });

حال صفحه خود را ذخیره كرده و آن را در مرورگر دوباره بارگذاری كنید. حال اگر بر روی پیوند ها كلیك كنید قبل از اینكه به صفحات دیگر راهنمایی شوید یك پیغام مشاهده خواهید نمود.
برای كلیك و دیگر حوادث برای جلوگیری كردن از هر اتفاقی شما می توانید از preventDefault() استفاده كنید:

$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});

مثال تكمیل شده:
سند تكمیل شده مثال های بالا به صورت زیر خواهد بود:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src=" http://code.jquery.com/jquery-latest.js " type="text/javascript"></script>
   <script type="text/javascript">
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
   </script>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
 </body>
 </html>

یرای مطالعه بیشتر به درگاه جی کوئری مراجعه فرمایید.

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

Related posts:

دیدگاهتان را بنویسید لغو پاسخ