031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » jquery » آموزش نصب جی کوئری jQuery – درس دوم

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

۳۱ام مرداد ۱۳۹۶
رعنا زارع
179

آموزش راه اندازی و نصب جی کوئری ( 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>

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

  • پیشنهاد :

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

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

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

تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
رعنا زارع

مطالب مرتبط

طراحی فروشگاه اینترنتی تجارت پویا

سایت فروشگاهی تجارت پویا

طراحی سایت فروشگاهی تجارت پویا طراحی سایت اختصاصی تجارت پویا عرضه کننده قیمت لپ تاپ , قیمت کامپیوتر , قیمت گوشی , قیمت تبلت , قیمت کنسول بازی از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی سایت فروشگاه تجارت پویا برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف […]

طراحی فروشگاه اینترنتی جین ایران

فروشگاه اینترنتی جین ایران

طراحی فروشگاه اینترنتی جین ایران طراحی سایت اختصاصی جین ایران عرضه کننده انواع پوشاک زنانه و مردانه در اصفهان از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی فروشگاه اینترنتی جین ایران برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف فروش و عرضه انواع پوشاک و سایر محصولات می […]

طراحی سایت فرهنگی سایت کودک

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

طراحی سایت فرهنگی کودک خلاق طراحی سایت اختصاصی کودک خلاق با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت وب یار می باشد. طراحی سایت اختصاصی کودک خلاق برای مشتریان عزیزی که کسب و کارشان در حوزه های فرهنگ و خدماتی است بسیار مناسب می باشد. آدرس سایت جهت مشاهده تمامی […]

طراحی سایت بازرگانی ایراکو

طراحی سایت اختصاصی بازرگانی ایراکو طراحی قالب سایت اختصاصی بازرگانی ایراکو با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت و سئو سایت وب یار است. این سایت در زمینه ی بازرگانی و تجارت با عراق فعالیت دارد. طراحی سایت بازرگانی ایراکو برای مشتریان عزیزی که کسب و کارشان در حوزه های […]

ارسال دیدگاه

*    

*