no-img
اِمیلا

نصب و راه اندازی جی کوئری JQuery

بروزرسانی؛
4 آوریل 2020
کد نویسی

 نصب و راه اندازی  JQuery

برای استفاده از امکانات jquery بایستی ابتدا آخرین نسخه کتابخانه jquery را از وبسایت jquery.com دانلود نمائید.

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

  • Minified : نسخه خیلی فشرده و برای موارد تجاری استفاده می شود. (به دلیل لود شدن سریع)
  • Uncompressed : نسخه غیر فشرده و برای توسعه یا فراگیری استفاده می شود.
  • Packed : نسخه gzip فشرده نشده.

دانلود آخرین نسخه جی کوئری

پس از دانلود بایدیستی کتابخانه را در صفحات خود نصب کنید.

برای دانلود فایل جی کوئری می بایست به آدرس سایت https://code.jquery.com/jquery/ مراجعه کنید.

در این قسمت چندین فایل جی کوئری را می بینید که می توانید نسخه مورد نظرتان را دانلود کنید.

پیشنهاد می شود فایل فشرده یا compressed را دانلود می کنید. فایل فشرده موجب صرفه جویی در پهنای باند و بهبود عملکرد در تولید می شود. نسخه های فشرده و غیر فشرده از فایل های جی کوئری نیز در دسترس هستند. فایل غیر فشرده در هنگام توسعه یا اشکال زدایی بهتر است.

نهایتا یک فایل با پسوند js ذخیره می شود. حال می توانید از این فایل جی کوئری استفاده کنید. نام فایل را jquery.min.js بگذارید.

نحوه نوشتن کدهای جی کوئری

طریقه نصب جی کوئری به دو صورت inline و external می باشد.

نحوه نوشتن کدها نیز به همین دو صورت است:

 به صورت inline : در این روش کدها در همان صفحه ای که می خواهیم جی کوئری را فراخوانی کنیم نوشته می شود، توصیه می کنیم از این روش کمتر استفاده کنید.
 به صورت external : در این حالت شما یک فایل با پسوند sample.js یا main.js ایجاد می کنید سپس تمامی کد های خود را در این فایل می نویسید. و سپس می توانید فایل sampale.js را در صفحات خود فراخوانی نمائید.

نحوه اجرای cdn جی کوئری

در روش cdn جی کوئری ما بجای اینکه فایل را دانلود کنیم و از آن استفاده کنیم می توانیم از cdn آن استفاده کنیم. فایل در یک سرور آپلود شده است و ما می توانیم از آدرس آن فایل استفاده کنیم. شرکت های معتبری این فایل ها را آپلود کرده اند و ما در مثال زیر از cdn استفاده می کنیم.

مثال؛

در مثال زیر ما یک تگ h1 با مقدار Emila.ir را قرار داده ایم.

با کلیک روی دکمه ، این متن مخفی می شود.

برای اجرای کد زیر کافی است آن را در یک فایل با پسوند html ذخیره کرده و اجرا نمایید.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax /libs/jquery/3.3.1/ jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#top").click(function(){
$("h1").hide();
});
});
</script>
</head>
<body>
<h1>Emila.ir</h1>
<button id="top">Hide</button>
</body>
</html> 

نحوه اجرای جی کوئری دانلود شده

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

مثال؛

همان مثال بالا را تغییر دادیم و بجای استفاده از cdn جی کوئری از فایل استفاده کردیم.

دقت کنید نام فایل را تغییر دهید و آن را jquery.min.js بگذارید وگرنه کد اجرا نخواهد شد.

 <!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#top").click(function(){
$("h1").hide();
});
});
</script>
</head>
<body>
<h1>Emila.ir</h1>
<button id="top">Hide</button>
</body>
</html> 
لینک کوتاه : https://emila.ir/?p=14496
سلام علیکم!
2
فرم گزارش را به دقت تکمیل نمایید...
از همکاری شما پیشاپیش سپاسگذاریم