آموزش jQuery- بخش دوم

یکی از مفاهیم مهم در کد نویسی سمت کلاینت امکان اعمال تغییرات بر روی المانهای گوناگون HTML و یا ایجاد المانهای جدید و الصاق آنها به document میباشد. در مقاله گذشته با نحوه انتخاب المانهای HTML در jquery آشنا شدیم. در این مقاله به معرفی متدها و تکنیکهای موجود در jquery جهت اعمال تغییرات در document و یا ایجاد المانهای جدید آشنا خواهیم شد.

مقالات مرتبط

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

اضافه کردن المنت و محتوی به صفحه

برای شروع صفحه ای با تگ های HTML زیر در نظر بگیرید:

html()محتوی HTML المنت مورد نظر را خوانده و با کد HTML دیگری جایگزین میکند.

برای دیدن کارکرد این دستور کد زیر را بنویسید:

این دستور یک alert box با محتوی زیر تولید میکند:

حال اگر یک آرگومان رشته ای با این کد بکار ببرید، محتوی تگ مورد نظر جایگزین خواهد شد:

بنابراین کد HTML ما بصورت زیر خواهد بود:

text() عملکرد آن همچون دستور html() است با این تفاوت که کد HTML در آن تغییر نمیکند و فقط text داخل tag تغییر داده خواهد شد:

دستور بالا کد HTML ما را به شکل زیر تغییر خواهد داد:

append() یک تگ HTML به عنوان آخرین المنت فرزند به المنت انتخابی اضافه میکند: (یعنی درست قبل از تگ close المنت انتخابی)

دستور بالا کد HTML ما را به شکل زیر تغییر خواهد داد:

prepend() درست مانند append عمل میکند با این تفاوت که تگ HTML جدید را درست بعد از تگ opening المنت انتخابی قرار میدهد:

دستور بالا کد HTML ما را به شکل زیر تغییر خواهد داد:

تغییر Attribute (خصیصه)

اضافه و تغییر در المنت های صفحه تنها کاری نیست که با jquery انجام میدهیم. گاهی لازم است تا حتی مقدار یک خصیصه را بدانیم و تغییر دهیم و یا کلاسی را به تگ اضافه کنیم ، یا تغییری در CSS یک المنت بدهیم.

addClass() این دستور کلاس CSS مورد نظر را به تگ انتخابی شما اضافه میکند. به عنوان مثال اگر تگ HTML ما به صورت زیر باشد:

با نوشتن دستور jquery زیر :

خواهیم داشت:

واضح است که کلاس externalLink را قبلا باید تعریف کرده باشید و استایل های لازم را به آن داده باشید.

removeClass() این دستور کلاس css مورد نظر شما را از المنت انتخاب شده حذف میکند. مثلا برای حذف کلاس highlight از یک المنت با آی دی alertBox مینویسیم:

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

تغییر مولفه های CSS

css() این دستور این امکان را برای ما فراهم میکند که بجای دادن کلاس های css، بطور مستقیم خواص css المنت مورد نظر را تغییر دهیم. مثلا به آن Border دهیم یا رنگ پس زمینه را عوض کنیم، طول و عرض یک المنت را تغییر دهیم و ... برای این کار تابع CSS دو آرگومان دریافت میکند. یکی نام property مورد نظر و دیگری مقدار آن property. مثلا دستور زیر سایز فونت صفحه را به 200% تغییر میدهد:

مقدار ارسالی به تابع CSS میتواند عددی هم باشد. بصورت زیر که مقدار padding یک المنت که دارای کلاس pullquote است را به 100 پیکسل تغییر میدهد:

حالتی را در نظر بگیرید که میخواهید هم زمان چندین property از css یک المنت خاص را تغییر دهید. مثلا فرض کنید میخواهید هم رنگ پس زمینه و هم مقدار border یک div را تغییر دهید. یک راه بصورت زیر است:

راه دیگر فرستادن یک object literal به تابع CSS است.object literal لیستی از جفت های اسم property و مقدار آن خواهد بود. به شکل زیر توجه کنید:

object literal

برای بازنویسی دستور بالا خوهیم داشت:

تغییر مولفه های HTML

attr() این تابع به شما اجازه میدهد تا مقدار یک خصیصه خاص از تگ انتخابی را بخوانید و تغییر دهید.مثلا دستور زیر مقدار source عکس انتخابی را برمیگرداند:

یا با دستور زیر مقدار src عکس را با مقدار دلخواه جایگزین میکنیم:

removeAttr() برای پاک کردن یک خصیصه از تگ HTML مورد نظر بکار میرود. به عنوان مثال دستور زیر خصیصه bgColor را از body حذف میکند:

در مقاله بعدی به بررسی رویدادهای مهم در jQuery خواهیم پرداخت. پایدار باشید.