آخرین بازبینی: ۱۴۰۲/۰۲/۲۵

راهنمای کامل دانلود، نصب و استفاده از jQuery

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

دانلود jQuery

برای دانلود این کتابخانه به صفحه‌ی دانلود آن مراجعه کنید. با توجه به اینکه این کتابخانه به صورت مستمر در حال به‌روزرسانی است، ممکن است با نگارش‌های جدید این کتابخانه مواجه شوید. در حال حاضر آخرین نسخه‌ی موجود در سایت ۳.۷.۰ است.

نسخه‌های مختلف jQuery

با مراجعه به صفحه‌ی فوق چند نسخه شامل موارد زیر را مشاهده خواهید کرد. برای دانلود نسخه‌ی مورد نظر روی گزینه‌ی مربوط کلیک راست کنید و گزینه‌ی Save link as را انتخاب نمایید.

production
نسخه‌ی فشرده شده و قابل استفاده در اغلب موارد. احتمالا بخواهید همین نسخه را دانلود کنید.
development
نسخه‌ی فشرده نشده برای برنامه‌نویسی افزونه جی‌کوئری یا خطایابی در شرایط خاص
map file
نقشه کدهای فشرده نشده برای استفاده در هنگام خطایابی( Debugging )
slim production
نسخه کوچک فشرده شده. اغلب مورد استفاده در نرم‌افزارهای موبایل
slim development
نسخه کوچک فشرده نشده برای برنامه‌نویسی افزونه یا خطایابی
slim map file
نقشه کدهای فشرده نشده برای نسخه کوچک

نسخه‌ی slim یا کوچک فاقد قابلیت‌های ajax است و همچنین امکانات افکت‌های انیمیشن را هم پشتیبانی نمی‌کند.

قرار دادن کدهای jQuery در سایت

فایلی که ما دانلود کردیم با نام «jquery-3.4.1.min.js» ذخیره شده است. جهت درج jQuery در سایت، کد زیر را در بخش head سایت خود درج نمایید:

<script src="jquery-3.7.0.min.js"></script>

1	<script src="jquery-3.7.0.min.js"></script>

استفاده از نسخه‌ی CDN

به دلیل استفاده‌ی میلیون‌ها سایت از کتابخانه‌ی jQuery، این امکان وجود دارد که فایل jQuery را روی سایت خودتان میزبانی نکنید و از سرویس‌های میزبانی شرکت‌های بزرگ مثل گوگل و مایکروسافت استفاده کنید.

با این کار، کاربران برای مشاهده‌ی هر سایت لازم نیست تا فایل jQuery را به دفعات دانلود کنند و در نتیجه سایت شما هم سریع‌تر بارگزاری خواهد شد.

این شکل از میزبانی فایل‌ها، میزبانی روی CDN نامیده می‌شود. برای مثال می‌توانید از میزبانی شرکت مایکروسافت به شکل زیر استفاده کنید:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.0.min.js"></script>

1	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.0.min.js"></script>

برای استفاده از نسخه‌های جدیدتر یا قدیمی‌تر jQuery روی CDN مایکروسافت، این صفحه را ببینید.

هشدار امنیتی

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

بیشتر بخوانید: ‌Subresource Integrity

درج SRI در اسکریپت مایکروسافت به شکل زیر خواهد بود.

<script
	src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.0.min.js"
	integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"
	crossorigin="anonymous"
></script>

<script

src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.0.min.js"

integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"

crossorigin="anonymous"

></script>

نگران نباشید! برای ساخت کدهای بالا از ابزار رایگان و آنلاین SRI Hash Generator استفاده شده است و لازم نیست تا کدهای بالا را از حفظ تایپ کنید !

شروع برنامه‌نویسی با jQuery

اکنون می‌توانید کدهای جاوااسکریپت خود را که از کتابخانه‌ی جی کوئری استفاده می‌کنند، در سایت درج کنید. در مثال زیر، یک لینک در صفحه قرار دادیم و هنگامی که کاربر روی آن کلیک می‌کند، با استفاده از jQuery یک لینک جدید به صفحه اضافه می‌شود.

<!doctype html>
<html lang="fa">
<head>
	<meta charset="UTF-8">
	<title>آموزش نصب جی کوئری</title>
	<meta name="viewport" content="width=device-width">
	<style>
		body {
			direction: rtl;
			font-face: tahoma;
		}
	</style>
	<script src="jquery-3.7.0.min.js"></script>
	<script>
		jQuery( function( $ ) {
			$( '#click-here' ).on( 'click', function( evt ) {
				evt.preventDefault();
				
				$( 'body' ).append(
					$( '<div>' ).append(
						$( '<a>' )
						.attr( 'href', 'https://rokaweb.ir/?ref=jqins' )
						.text( 'از سایت ما دیدن کنید' )
					)
				);

			} );
		} );
	</script>
</head>
<body>
	<a href="#" id="click-here">اینجا کلیک کنید !</a>
</body>
</html>

<!doctype html>

<head>

<title>آموزش نصب جی کوئری</title>

<style>

body {

direction: rtl;

font-face: tahoma;

}

</style>

jQuery( function( $ ) {

$( '#click-here' ).on( 'click', function( evt ) {

evt.preventDefault();

$( 'body' ).append(

$( '<div>' ).append(

$( '<a>' )

.attr( 'href', 'https://rokaweb.ir/?ref=jqins' )

.text( 'از سایت ما دیدن کنید' )

)

);

} );

</script>

</head>

<body>

<a href="#" id="click-here">اینجا کلیک کنید !</a>

</body>

</html>

به‌روزرسانی jQuery

اگر سایت یا پروژه‌ی برنامه‌نویسی شما از جی‌کوئری استفاده می‌کند، خوب است که به صورت منظم آن را به‌روزرسانی کنید. استفاده از آخرین نسخه‌های جی‌کوئری می‌تواند مزایای مختلفی از جمله موارد زیر را به دنبال داشته باشد.

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