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

1	<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=' ' "/>

1

< 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>

$( 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>

<html>

<head>

</head>

<body>

<a href=”http://jquery.com/”>jQuery</a>

</body>

</html>

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

پیشنهاد :

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

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

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

نظــرات شما

اطلاعات تماس

آدرس :
اصفهان خیابان ابن سینا بعد از کوچه 17 مجتمع افق طبقه اول
تلفاکس : 03134450060
مشاوره : 09137932880
مدیریت : 09133886881
ایمیل : INFO@WEBYAR.NET
پشتیبانی :WWW.HELP.WEBYAR.NET

اشتراک در خبرنامه ای ویژه

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

ما را در شبکه های اجتماعی دنبال کنید

لینک های مهم

بالا

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

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

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

Minified یا compressed :

Uncompressed :

Packed :

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

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

: inline

External :

پیشنهاد :

نظــرات شما

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

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

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

Minified یا compressed :

Uncompressed :

Packed :

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

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

: inline

External :

پیشنهاد :

آموزش HTML5 – قسمت سوم

آموزش HTML5 – قسمت چهارم

آموزش طراحی سایت HTML5 – قسمت دوم

آموزش مقدماتی تبدیل psd به HTML5

نظــرات شما