نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 6445
تاریخ بروزرسانی ۶ فروردین ۱۴۰۱

آموزش نصب جی کوئری jQuery – درس دوم

آموزش راه اندازی و نصب جی کوئری ( JQuery )

در درس قبلی آموزش jquery از امکانات JQuery صحبت نمودیم. در این آموزش قصد داریم نصب جی کوئری JQuery  را به شما آموزش دهیم زیرا که اولین قدم در کار با جی کوئری اصطلاحا نصب جی کوئری می باشد. اما بهتر است بدانید منظور از کلمه ی نصب جی‌کوئری در اینجا به معنای واقعی آن نیست بلکه منظور نحوه فراخوانی جی کوئری در کدهای شماست.

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

 

آشنایی با نسخه های متفاوت جی کوئری ( JQuery )

برای استفاده از امکانات جی کوئری باید آخرین نسخه کتابخانه جی کوئری را که ورژن 3/2/1 آن موجود می باشد، از سایت اصلی جی کوئری دانلود نمایید. برای این کار کافی است وارد سایت جی کوئری شده و از میان منو های موجود منوی download را انتخاب کنید. مانند تصویر زیر :

آموزش جی کوئری

 

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

  • Minified یا compressed :

این نسخه، نسخه فشرده شده (به میزان زیاد) جی کوئری ( JQuery ) با حجمی برابر با  15 کیلوبایت می باشد که برای استفاده های تجاری آماده شده است.

  • Uncompressed :

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

  • Packed :

این نسخه،نسخه ای از جی کوئری با حجمی برابر با  29 کیلو بایت می باشد که به صورت  gzip فشرده نشده است.

پیشنهاد ما برای دانلود jquery.min یعنی مدل Minified می باشد ، زیرا سرعت لود بالاتری نسبت به دیگر مدل ها دارد .

 

روش های راه اندازی و نصب جی کوئری ( JQuery ) :

پس از تهیه جی کوئری نوبت به راه اندازی و نصب جی کوئری در صفحات وب می رسد .

نصب جی کوئری به سه طریق زیر انجام میشود :

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

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

را در تگ <head> خود استفاده نمایید.

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

    به مثال زیر توجه کنید :

    < input  onblur="if (this.value==' ') this.value=' www.webyar.net' "  onfocus="if (this.value=='www.webyar.net') this.value=' ' "/>

    در این مثال یک textbox داریم که وقتی مکان نما موس روی آن قرار میگیرد نوشته داخل آن پاک شده و با خروج مکان نما از آن دوباره نوشته ظاهر می گردد.

    صفت های onblur و onfocus از جمله رویداد های مهم جی کوئری هستند .

  • : inline

در این روش کدها را در میان کدهای صفحه ای که میخواهیم کتابخانه JQuery را فراخوانی کنیم قرار می دهیم ( هم در head و هم در body ) . به صورت زیر :

<script>
$( document ).ready(function() {
    alert('به وب سایت ما خوش آمدید.');
});
</script>

 

اما توصیه ما به شما این است که کمتر از این روش استفاده کنید! و اگر قرار است کد یا تابعی که می نویسید را در دیگر صفحات نیز به کار ببرید از روش دوم استفاده نمایید ، ولی درصورت استفاده از این روش برای نصب جی کوئری یا همان به کار بردن جی کوئری در صفحات سایت خود، کدهای مورد نظر خود را پس از قرار دادن در داخل تگ <script> و قبل از بسته شدن تگ <body> قرار دهید منظور از این پیشنهاد ممنوعیت استفاده کدهای جی کوئری در دیگر قسمت های کد نیست بلکه به این دلیل است که در صورتی که شما به عنوان مثال از کدهای جی کوئری در ابتدای  تگ <body > استفاده نمایید در هنگام لود صفحه اول این کدها بار گزاری شده و پس از مدتی مرورگر به کد بدنه اصلی سایت شما می رسد. لذا کاربر این تاخیر را کندی سایت شما تلقی میکند پس بهتر است ابتدا کدهای بدنه اصلی سایتتان را قرار داده و سپس از کدهای جی کوئری استفاده کنید تا زمانی که کاربر مشغول به بررسی محتوای سایت شماست کدهای جی کوئری نیز بار گزاری شوند .

  • External :

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

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<a href=”http://jquery.com/”>jQuery</a>
</body>
</html>

اکنون شما موفق به نصب جی کوئری  شدید!!

  • پیشنهاد :

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

در نهایت هم سعی کنید با تمرین نصب جی کوئری آن را به خاطر بسپارید.

شما می توانید برای دریافت دیگر فایل های آموزش جی کوئری ما به مرجعه جی کوئری مراجعه فرمایید. موفق باشید.

 

مقالات مرتبط
بهترین راهکار برای رفع محدودیت فالو در اینستاگرام

انواع محدودیت های حال حاضر در اینستاگرام • محدودیت فالوو کردن سایر کاربران اینستاگرام: • محدودیت لایک کردن پست‌های مختلف کاربران اینستاگرام: • محدودیت کامنت گذاشتن برای پست‌های مختلف شبکه اینستاگرام: • محدودیت به کار بردن هشتگ در پست‌های مختلف شبکه اینستاگرام: • محدودیت تعداد کلمات متن (کپشن) پست اینستاگرام: • محدودیت تعداد کاراکترهای Biography کاربران اینستاگرام: هدف از فالو و آنفالو کردن در اینستاگرام…

شرکت های طراحی اپلیکیشن

“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار…