آموزش jquery – ساختار اصلی

در این قسمت از سری آموزش های دوران طراحی وب می رسیم به بحث شیرین Jquery و ساختار اصلی این فریم ورک .

خب در ابتدا بیایم بگیم اصلا jquery چیه ؟
اگه بخوایم خیلی خودمونی بگیم jquery یه سری تابع آماده بسیار مفیده به زبان جاوااسکریپت که درون یه فایل تقریبا 90 کیلوبایتی قرارداده شده تا برنامه نویسان از اون استفاده بکنند !

به این نکته توجه داشته باشید که jquery یک زبان نیست بلکه یک فریم ورک به زبان javascript است که بعضی ها اون رو اشتباه زبان jquery خطاب می کنند .

حالا برسیم به ویژگی های این فریم ورک جاوا اسکریپت . اما اینجا یه سوال پیش میاد و اونم اینه که ما اصلا چرا از jquery استفاده می کنیم مگه خود جاوااسکریپت پاسخگوی نیاز های ما در وب نیست ؟
باید در جواب گفت که حق کاملا با شماست اما هر یک خط jquery می تواند چندین خط از javascript باشد و یا حتی ممکن است در نوشتن آن دچار مشکل شویم و احتمال خطا و میزان کدنویسی بسیار بالا می رود . پس عقل حکم می کند که ما برنامه نویسان بیاییم از یکسری تابع های آماده بدون خطا و کاملا optimize استفاده کنیم و دیگر نیاییم کل برنامه مان را در هر پروژه ای که انجام میدهیم از نو بنویسیم , البته اگه خیلی دوست دارید کارتون حرفه ای بشه و شخصی و در زمینه جاوااسکریپت فوق العاده هستید می تونید یه فریم ورک مثل jquery بنویسید که مطمئنا خیلی وقت از شما خواهد گرفت !

جالب است بدانید این فریم ورک از شئ javascript DOM استفاده می کند . اما آیا فقط ما در وب فریم ورک jquery رو داریم ؟ جواب خیر است , بسیاری از فریم ورک های دیگری برای این زبان مانند : mootools , Dojo , zeptoJs ,.. وجود دارند که آن ها هم برای خود دنیایی دارند و حتی بعضی ها فریم ورک های mootools و zeptoJs را خیلی بهتر از jquery می دانند , اما آمار نشان می دهد که تقریبا 70 درصد از سایت هایی که از فریم ورک های js  استفاده می کنند از فریم ورک jquery بهره می برند , شاید علتش هم پلاگین های فوق العاده و بسیار زیاد آن می باشد.

از بحث خودمون دور نشیم و برسیم به نحوه ساختار اصلی این زبان و نحوه استفاده از آن . در ابتدا بگوییم که jquery فقط یک فایل جاوااسکریپت است و نه نیاز به نصب و نه هیچ چیز دیگری ندارد !

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

جهت استفاده از این فایل در سایت باید در میان تگ head یک تگ script ایجاد کنیم و مقدار src آن را برابر آدرس فایل jquery که از سایت آن دریافت کردیم قرار دهیم به صورت زیر :

[html]
<script src=”jquery.js”>
[/html]

حال شما فایل jquery رو به صفحه خود اضافه کرده اید و حالا باید از آن با خیال راحت استفاده کنیم !

حالا برای این که مطمئن شویم jquery ما بدرستی کار می کند قطعه کد زیر را در همان تگ head و حتما بعد از فراخوانی فایل jquery قرار دهید به صورت زیر :

[html]

<script src=”jquery.js”>

<script>

[/html]

[javascript]

$(function){
alert(1);
})

[/javascript]

[html]

</script>

[/html]

حال اگر فایل jquery شما به درستی فراخوانی شده باشد باید پس از نمایش صفحه سایت خود یک پیغام با عنوان عدد `1` را مشاهده کنید .

توجه داشته باشید که کلیه دستورات jquery میان قطعه کد زیر اجرا خواهند شد و معنی این خطوط این است که پس فراخوانی شئ DOM برنامه ما اجرا شود چون همانطور که قبل تر گفتیم jquery با شئ DOM کار می کند .

[javascript]

$(function){
// Your Jquery Code Here
})

[/javascript]

زیاد نگران نباشید فریم ورک jquery ساختار کدی ظاهرا سختی دارد و بهتان حق می دهم که در ابتدا کد ها برایتان گنگ باشد , اما عجله نکنید مطمئن باشید که فقط ظاهر این دستورات کمی سخت است و بعد از مدتی برایتان عادی خواهد شد و عاشق این فریم ورک می شوید (میگی نه نگاه کن !)

خب به این ترتیب به پایان قسمت چهارم از سری آموزش های دوران طراحی وب می رسیم , امیدوارم از این آموزش لذت کافی رو برده باشید و در قسمت های بعدی از آموزش jquery با ما همراه باشید

موفق پیروز و سربلند باشید