جی کوئری چیست و چگونه کار می کند؟
جی کوئری چیست؟
جی کوئری یک کتابخانه کوچک و سریع جاوا اسکریپت است که امکانات بسیار زیادی در زمینه کار با اسناد HTML، DOM و CSS رو در اختیار توسعه دهندگان وب قرار میده. شما با استفاده از اون می تونید افکتهای زیبایی رو در طرح های خود پیاده کنید و صفحه ای پویا رو طراحی کنید و event ها رو کنترل کرده و از انیمیشن برای نشان دادن آنها استفاده کنید مثلا منو هایی که با انیمیشن های زیبا باز و بسته می شوند.
جی کوئری برای این طراحی شده که شما نوشتن جاوا اسکریپت از راهی دیگر تجربه کنید! با جی کوئری از طراحی وب لذت ببرید.
برای شروع باید این کتابخانه رو از لینک زیر در یافت کنید و اون رو به طرح خودتون اضافه کنید.
http://code.jquery.com/jquery–latest.js
در ضمن یک سری هم به سایت اصلیش بزنید:
از این لینک هم میتونید برای مطالعه بیشتر استفاده کنید:
<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>یرای مطالعه بیشتر به درگاه جی کوئری مراجعه فرمایید.
