شروع کار با jQuery

کتابخانه جی‌کوئری معمولا تنها یک فایل جاوا اسکریپت است که شامل همه DOMها و Eventها و افکت‌ های و تابع‌ های مربوط به ای‌ جکس می‌شود.
یک دلیل برای آموزش jQuery ( جی کوئری) اینست که jQuery کار با DOM را آسان می کند ، به شما اجازه می دهد تا انواع مختلفی از استایل های شیک و زیبا را اضافه کنید و همچنین می توانید درخواست های ایجکس را نیز ساده تر اجرا کنید.
مزایای واقعی زمانی نمایان می شوند که کار با jQuery را آغاز کنید .

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

سازگاری متقابل مرورگر (Cross-Browser Compatibility) :

یکی از مزایای ذاتی jQuery این است که اگر شما تنها با استفاده از جاوا اسکریپت در حال توسعه وب باشید ، به بسیاری از باگ های cross-browser (عدم سازگاری با مرورگرهای مختلف) و مسائل دیگر بر میخورید که jQuery ، شر چنین مشکلاتی را از سر شما باز می کند!

با این حال، تیم جی کوئری (کسانی که کتابخانه جی کوئری را توسعه می دهند) وقت خود را برای رفع مشکلات cross-browser صرف می کنند . منظور از cross-browser اینست که کدهای ما ، قابلیت اجرا بر روی کلیه مرورگرهای رایج را داشته باشد.

به بیان ساده ، اگر شما می توانید یک عنصر را با استفاده از jQuery رندر یا طراحی کنید، پس می توانید اطمینان حاصل کنید که به درستی در تمام مرورگر ها و تمام نسخه ها کار خواهد کرد.

Syntax زیبا :

هنگامی که در حال توسعه صفحات وب هستید، یکی از اولین چیزهایی که یاد می گیرید این است که کد نمایشی (HTML) صفحه خود را از اسکریپت ها (کدهای جاوا اسکریپت) جدا کنید. به دلایل بسیاری این روش معمول است.(بعدا به این مبحث خواهیم پرداخت)

جی کوئری به شما این اجازه را می دهد که عناصر را attach کنید و کد را به صفحات وب CSS متصل کنید - کد نهایی شما همواره از کد اسکریپتینگ شما جدا خواهد بود و این کار بسیار خوبی است!

کجا از jQuery استفاده کنیم ؟

جی کوئری چیزی بیش از جاوا اسکریپت نیست، بنابراین هر شغلی که نیاز به جاوا اسکریپت دارد ،به نوعی نیاز به جی کوئری نیز خواهد داشت.

برخی از عناوین رایج شغلی در زمینه جی کوئری:

طراح ارشد وب و گرافیک
مهندس ارشد ارائه خدمات وب
مهندس ارشد نرم افزار
معمار راه حل تجارت وب
طراح وب و توسعه دهنده ی front-end

و غیره ...

برخی از بزرگترین برند های موجود در جهان توسعه وب ، به طور منظم از jQuery و جاوا اسکریپت استفاده می کنند. این برند های مشهور شامل IBM ، Google ، Netflix و حتی مایکروسافت است .

از آنجایی که جاوا اسکریپت برای توسعه front-end استفاده می شود،در نظر داشته باشید که اگر میخواهید شغلی در توسعه وب داشته باشید، علاوه بر چندین زبان پایه ای مانند HTML و CSS، باید جاوا اسکریپت و جی کوئری را به طور گسترده تر یاد بگیرید.

اگر قبلا نتوانسته اید کتابخانه جی کوئری را از سایت رسمی دانلود کنید، فایل دانلودی چیزی جز فایل جاوا اسکریپت (.js) نیست.
یک فایل خالی HTML ایجاد کنید و آن را به هر آنچه میخواهید فراخوانی کنید. د این آموزش نام فایل را test.html می گذاریم.

اطمینان حاصل کنید که فایل های HTML و جاوا اسکریپت (کتابخانه جی کوئری) در دایرکتوری یکسان قرار دارند.

شروع اولین کدنویسی :

اکنون ما قصد داریم کدی را بنویسیم که چاپ "hello world" بر روی صفحه از طریق jQuery را انجام دهد.

ابتدا ما میخواهیم یک کد HTML ساده را بنویسیم (مطابق کد زیر). لطفا توجه داشته باشید که شما می توانید پیام نمایش داده شده را تغییر دهید تا آنچه که خودتان می خواهید نمایش داده شود.

<html>
<head>
<title>HTML Hello World</title>
Hello World in HTML.
</body>
</html>

پس از اضافه کردن این محتوا در داخل فایل HTML و ذخیره آن ، آن را در یک مرورگر باز کنید و پیام زیر را "Hello World in HTML" مشاهده کنید.

بدیهی است که این HTML اصلی است و ما هیچ جاوا اسکریپت (یا جی کوئری) را در آن استفاده نکرده ایم.

بعد، قطعه کد زیر را در سند HTML خود اضافه کنید تا بتوانید با کتابخانه جی کوئری ارتباط برقرار کنید :

<script type="text/javascript">
$(document).ready(function(){
$("#hello").html("jQuery Hello World.");
});
</script>

یک تگ از نوع div ایجاد میکنیم و شناسه آن را برابر با Hello قرار می دهیم.

<div id="hello">
</div>

کد نهایی :

<html>
<head>
<title>jQuery Hello World</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#hello").html("jQuery Hello World");
});
</script>
HTML Hello World.
<div id="hello">
</div>
</body>
</html>

بعد از اینکه فایل HTML خود را ذخیره کردید، باید بتوانید آن را با استفاده از مرورگر خود باز کنید ؛ شما دو خط متن را مشاهده خواهید کرد، یکی برای کد HTML و دیگری برای کد جی کوئری.

پکیج های آموزشی جدید

آموزش طراحی وب با ASP.NET Core MVC (تحت پروژه سایت اشتراک فیلم)

فصلِ: 5 , تعداد قسمت ها: 176 , سطح: صفر تا صد

موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش Bootstrap آموزش Ajax آموزش JQUERY

این فصل در یک نگاه:

در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…

توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد. آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از ASP.NET CORE MVC 3.0 و V…

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

شروع کار با jQuery

سازگاری متقابل مرورگر (Cross-Browser Compatibility) :

Syntax زیبا :

کجا از jQuery استفاده کنیم ؟

شروع اولین کدنویسی :

آیا نیاز به مدرک هم دارید؟