آموزش جامع Jquery

jQuery یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد...

می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند...

جهت استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه را از سایت www.jquery.com دانلود نمایید...

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

همان طور که در درس قبلی ذکر شد، توصیه می شود تا اتمام بارگذاری صفحه و آماده شدن آن صبر کنید و سپس اقدام به کار با آن نمایید...

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

یکی از عملیات رایج که برای انجام آن از جاوا اسکریپت استفاده می شود، خواندن و ویرایش محتویات صفحه می باشد. برای این منظور، ابتدا بایستی المانی که قصد دستکاری آن را دارید پیدا کنید. در اینجا است که انتخابگر (selector) jQuery به کمک شما می آید...

یکی از پرکاربردترین انواع selector، انتخابگر #id (گزینش المان ها بر اساس شناسه) می باشد، همان طور که در مثال "Hello, world" نظاره گر آن بودیم...

در آموزش قبلی، دیدم که چگونه می توان المان ها را با توجه به کلاس یا شناسه ی آن ها انتخاب کرد. این دو خاصیت (property) به خاطر اینکه برای استایل دهی به المان ها با CSS مورد استفاده قرار می گیرند، با هم مرتبط می باشند...

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

اجرای ایفکت ساده ی animation با jQuery بسیار ساده می باشد. یکی از ایفکت های اضافی بر سازمان که jQuery از آن پشتیبانی می کند، محو/نمایان کردن المان ها به صورت تدریجی می باشد. در زیر مثالی ساده مشاهده می کنید که یک کادر پنهان را به تدریج نمایان می سازد...

در درس قبلی با نحوه ی محو کردن تدریجی المان ها با استفاده از ایفکت fading آشنا شدید. اما گاهی نمایش اسلایدی و کشویی المان ها بر ایفکت نمایش/پنهان سازی تدریجی ارجحیت دارد. برای این منظور jQuery چندین متد کارآمد ارائه می دهد....

در مباحث پیشین، ایفکت های نمایش اسلایدی و پنهان سازی تدریجی را که امکانات درون ساخته ی این کتابخانه ی جاوا اسکرپیت هستند ، تشریح کردیم. به کمک متد animate()، می توان animation های سفارشی ایجاد نمود...

گاهی لازم است یک متد را پیش از اتمام آن، متوقف نمایید. برای این منظور jQuery متدی به نام stop() را فراهم می نماید...

یکی از امکانات ویژه ی جاوا اسکریپت و در نتیجه جی کوئری، قابلیت مدیریت و دستکاری DOMمی باشد. DOM سرواژه ی کلمات Document Object Model بوده و مکانیزمی برای تعامل با سندهای HTML، XHTML یا XML و دسترسی به عناصر درون سند HTML را فراهم می آورد...

آسان ترین کار ممکن در دستکاری DOM، بازیابی و تنظیم متن (text)، مقادیر (value) و HTML یک صفحه می باشد. این سه آیتم اگرچه در نگاه اول مشابه به نظر می رسد، اما در حقیقت تفاوت هایی با هم دارند....

در مبحث قبلی با نحوه ی بازیابی و تنظیم متن و محتویات HTML آشنا شدیم. به همین نحو، می توان attribute های یک المان را به آسانی ویرایش نمود...

همان طور که attribute ها و محتوای المان های سند HTML را ویرایش کردیم، به همان راحتی هم می توانیم کلاس های CSS المان ها را دستکاری کنیم. jQuery این زمینه را برای شما فراهم می کند تا به راحتی خصیصه ی style المان ها را با استفاده از متد css() و با ارائه ی چندین متد دیگر، کلاس های یک المان را ویرایش نمایید....

با امکانات کتابخانه ی jQuery می توان به راحتی المان های جدید به المان های جاری پیوست یا اضافه کرد. در این کتابخانه، متدهایی برای افزودن المان جدید به ابتدا/انتهای المان جاری، دریافت HTML به صورت رشته، المان های DOM و نیز اشیا جی کوئری به عنوان پارامتر وجود دارد....

اما در برخی موارد لازم است یک یا چند آیتم جدید را به بعد یا قبل المان های جاری پیوست کنیم. کتابخانه ی jQuery دو متد before() و after() را برای این منظور در نظر گرفته است....

در مباحث قبلی المان های جدیدی را به صفحه ی جاری اضافه می کردیم. در این مبحث با استفاده از jQuery المان های جاری از صفحه حذف می کنیم. کتابخانه ی jQuery برای این منظور دو تابع remove() و empty() را در نظر گرفته است...

رخداد در جاوا اسکریپت یک تکه کد یا نام یک تابع است که به یک event handler یا مدیریت کنند ی رخداد (onClick)، داخل یک تگ HTML، تخصیص داده می شود...

متد bind() و unbind()، همان طور که از نام آن ها پیدا است، یک سری کد را به یک یا چند رخداد از المان (ها) متصل کرده یا از آن حذف می کنند. مثال...

در درس قبلی، متد bind() را برای متصل کردن یک رخداد به المان معین بکار بردیم. گاهی لازم است رخدادی که قبلا با متد bind() به المان پیوند دادیم را بنا به دلایلی از آن المان بار دیگر unbind (جدا) کنیم تا با فعال شدن رخداد، دیگر event handler اجرا نشود....

در دو مبحث قبلی با استفاده از توابع bind() و unbind()، event handler ها را به المان های مختلف موجود در صفحه به ترتیب متصل کرده و از آن ها حذف می کردیم. این دو تابع برای المان هایی کاربرد دارد که هم اکنون بر روی صفحه موجود می باشند. اما اگر بخواهیم event handler ها را به المان هایی که در آینده به صفحه اضافه می شوند، متصل کنیم...

AJAX سرنام واژگان Asynchronous JavaScript And XML بوده و به شما این امکان را می دهد تا داده ها را در پس زمینه بارگذاری کرده و آن را بر روی صفحه ی وب خود به نمایش بگذارید؛ بدون اینکه لازم باشد کل صفحه مجددا بارگذاری یا refresh شود...

یکی از ساده ترین در عین حال کارآمدترین متدهای بارگذاری داده به صورت نامتقارن (غیرهمزمان)، متد load() می باشد. برای استفاده از آن، ابتدا المانی که می خواهید محتوا در آن بارگذاری شود را انتخاب کرده و سپس متد load() را بر روی آن فراخوانی می کنیم...

متدهای get() و post() به شما این امکان را می دهند تا به راحتی درخواست HTTP را به سرویس دهنده (server) ارسال کرده و نتیجه ی آن را دریافت کنید. زمانی که یک فرم را ارسال می کنید، در واقع یکی از دو درخواست GET و POST مورد استفاده قرار می گیرد....

سیاست خاستگاه مشترک یک ویژگی امنیتی است که در پیاده سازی جاوا اسکریپت در بیشتر مرورگرهای مطرح و همچنین دیگر تکنولوژی های مورد استفاده در بستر مرورگر، همچون Flash کاربرد دارد....

در مبحث قبلی، درباره ی سیاست امنیتی منشا مشترک (same origin policy) که مانع از درخواست AJAX دادن به دامنه یا زیردامنه ی متفاوت، برای بارگذاری اطلاعات از آن ها در صفحه ی متعلق به سایت/دامنه ی جاری می شد، توضیحاتی را ارائه دادیم....

زمانی که درخواست های AJAX به صفحه ای می دهید (با استفاده از توابع AJAX داده هایی را از صفحه ی دیگر بارگذاری می کنید)، بد نیست حین انتظار برای اتمام درخواست و اجرای آن، پیشرفت فرایند را نمایش دهید....

گاهی شاید لازم باشد یک درخواست AJAX در حال اجرا و فعال را قبل از اینکه کاملا اجرا شود، لغو کنیم. این وضعیت معمولا در شرایطی رخ می دهد که کاربر عملی را انجام می دهد که منجر به ارسال چندین درخواست AJAX در بازه زمانی کوتاه، به صورت پشت سرهم می شود...

jQuery به شما این اجازه را می دهد تا ابعاد المان های صفحه ی HTML و حتی پنجره ی مرورگر را برگردانده و تنظیم کنید. می توان برای بدست آوردن ابعاد المان ها از توابع width()، height() یا مشتقات آن ها innerWidth()/innerHeight()/outerWidth()/outerHeight() استفاده کنید...

گاهی مجبور می شوید در کنار jQuery ، از دیگر کتابخانه های جاوا اسکریپت بر روی صفحات وب خود استفاده کنید. به عنوان مثال بسیاری از پکیج های جاوا اسکریپت که نوشته و عرض می شوند، مبتنی بر فریم ورک های محبوب جاوا اسکریپت نظیر ExtJS، MooTools هستند...