تبلیغات

دوره H جی کوئری: درس 3: ویژگی‌ها و مقدارها

دوره آموزشی H جی کوئری

دوره H جی کوئری
درس 3: ویژگی ها و مقدارها در jQuery


دوره‌های H
دوره‌ی H، یک دوره‌ی فشرده می‌باشد که برای زبان‌های برنامه‌نویسی مختلفی در نظر گرفته شده است و در آن بصورت خلاصه و مفید، به بیان مهم‌ترین مباحث هر زبان برنامه‌نویسی پرداخته می‌شود تا بتوان در کوتاه‌ترین زمان ممکن، به ابتدایی‌ترین موارد موجود در یک زبان برنامه نویسی مسلط شد. برای مطالعه بیشتر و لیست تمامی دروس این دوره کلیک کنید...

«درس قبل»، بطور خلاصه با Selectorها در جی کوئری آشنا شدیم؛  و حالا عنوان درس جدید را به نحوه کار با ویژگی‌ها و محتوای عناصر HTML اختصاص می‌دهیم.

همانطور که می‌دانید، می‌توان ویژگی‌هایی که به یک عنصر HTML مثل div و … تعلق گرفته است را با استفاده از جاوا اسکریپت دستکاری کرد؛ یعنی چیزهایی مثل href، src، id، class، style، و … که از ویژگی‌های المنت‌های HTML هستند. این کار با جی کوئری بسیار ساده‌تر می‌شود.

متد attr

متد attr خلاصه‌ی عبارت attribute و به معنی صفت است؛ در جی کوئری به دو منظور مورد استفاده قرار می‌گیرد:

  • گرفتن مقدار یک ویژگی
  • تغییر مقدار یک ویژگی

استفاده از متد attr برای گرفتن مقدار یک ویژگی
عنصر زیر را فرض کنید که یک ویژگی به نام href دارد و شامل لینک است:

برای گرفتن همین href از آن، می‌توان در جی کوئری به روش زیر عمل کرد:

در اینجا، با استفاده از Selector، عنصر a انتخاب شده و سپس با متد attr که یک اکشن است، ویژگی href  آن را می‌گیریم و درون متغیری به نام  val قرار می‌دهیم. در نهایت val را با تابع alert نمایش می‌دهیم.

سوال خیلی مهم: مگر در این روش سلکتور (انتخابگر) نوشته شده، همه‌ی عناصر a را نمی‌گیرد؟! پس در این صورت متد attr  مقدار کدام یک را برمی‌گرداند؟!
برای پاسخ به این سوال در مثال قبل، یک عنصر a دیگر نیز اضافه کرده و دوباره کد را اجرا کنید. مشاهده خواهید کرد که مقدار href مربوط به اولین تگ نمایش داده می‌شود. این به این دلیل است که attr، مقدار خانه فعلی را برمی‌گرداند و ما در آینده روشی برای پیمایش عناصر انتخاب شده به شما یاد خواهیم داد. دوستانی که با دیتابیس کار کرده‌اند، این بخش را بهتر درک می‌کنند. همانند دیتابیس در اینجا نیز یک کوئری یا پرس و جو کرده‌ایم و سپس برای خواندن هر کدام از آنها، باید میان عناصر انتخاب شده پیمایش کنیم.

استفاده از متد attr برای تغییر مقدار یک ویژگی
متد attr، علاوه بر گرفتن مقدار یک ویژگی، به ما اجازه‌ی تغییر مقدار ویژگی را نیز می‌دهد. یعنی این متد، دارای شکل دیگری نیز می‌باشد. بدین صورت که مقدار را در پارامتر دوم این متد تنظیم می‌کنتیم. بله اگر پارامتر دوم این متد مقداردهی شود، به جای برگرداندن مقدار ویزگی، پارامتر دوم را برای ویژگی تنظیم می‌کند. برای مثال:

البته توجه کنید که در اینجا، مقدار href تمامی عناصر انتخاب شده تغییر می‌کند! زیرا اگر بخواهیم مقدار یک ویژگی مختص یک المنت خاصی را تغییر دهیم، از همان ابتدا selector را دقیق‌تر می‌نویسیم! البته می‌توان برروی تمامی عناصر یک itterate یا حلقه اجرا کرد.

متد removeAttr (حذف ویژگی‌ها)

شما همچنین میتوانید به سادگی در جی کوئری ویژگی (ها) را از المنت های HTML حذف کنید. متد removeAttr برای پاک کردن هر ویژگی از یک المنتی استفاده میشود.
در مثال زیر، ما ویژگی border و class را از المنت table حذف کرده ایم.

نکته ی بسیار مهم: شاید شما هم مثل من بپرسید خب کد بالا که خیلی سنگین میشود. دوبار انتخاب کنیم و دوبار یک کار را انجام دهیم؟ بلی ولی ما قصد گیج کردن شما در این درس را نداریم وگرنه میتوانیم حتی بگوییم removeAttr بعد از اتمام کارش چه چیزی برمیگرداند! شما در این جا برای این کار در یک بار استفاده ازمتد removeAttr بتوانید چند ویژگی را یک جا پاک کنید و دوباره مجبور به استفاده از removeAttr نشوید، میتوانید در ورودی رشته ای، نام هر ویژگی را به یک فاصله از هم جدا کنید. به همین سادگی! دیدید جی کوئری چقدر ساده است و کار را ساده تر و راحت تر می کند؟! پس در ادامه با ما همراه باشید.

گرفتن و تنظیم کردن محتوای بین یک عنصر یا المنت

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

  • متد html (گرفتن محتوا + دستکاری محتوا)
  • متد text (گرفتن محتوا + دستکاری محتوا)

شاید بپرسید هردو متد که محتوا را میگیرند و هردو محتوا را تغییر میدهند! پس چه فرقی باهم دارند؟!
سوال درستی است اما در ادامه خواهیم دید که دو متد بالا چه فرقی با یکدیگر دارند.

استفاده از متد html برای گرفتن محتوای بین یک المنت
متد html برای گرفتن محتوای بین یک المنت انتخاب شده استفاده میشود. توجه داشته باشید که این محتوا شامل نشانه گذاری های html نیز میباشد (یعنی کل سورس html برگردانده میشود نه تبدیل شده ی آن به متن ساده) … برای مثال:

در این جا ما p ها را انتخاب کردیم و با استفاده از متد html محتوای بین آن را گرفته ایم.
توجه: همانطور که میبینید، تگ <b> نیز در خروجی نمایش داده شده است.

استفاده از متد text برای گرفتن محتوای بین یک المنت

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

توجه: دو متن html و text برای عناصری استفاده میشوند که میبتوانند محتوایی بین خود داشته باشند.

استفاده از متد html و text برای تغییر محتوای یک المنت
همانطور که بالا دیدید از این دو متد برای گرفتن محتوای بین المنت ها استفاده کردیم ولی در این جا ما هیچ ورودی ای را به داخل ارسال نکردیم! اگر بخواهیم که به جای گرفتن محتوا، یک محتوای جدید تنظیم کنیم می توانیم یک ورودی رشته ای به داخل ارسال کنیم. برای مثال:

نکته: توجه داشته باشید که اگر از text استفاده کنیم و در آن از نشانه گذاری HTML استفاده کنیم، درخروجی تفسیر نمیشود و همان شکلی که داده ایم در خروجی نمایش داده میشود، پس برای استفاده از نشانه گذاری HTML باید از متد html استفاده کنید.

متد Val (گرفتن ویژگی value) – یک راه میانبور

این متد، یک میانبور برای گرفتن ویژگی value و تنظیم آن میباشد. ویژگی value در فیلدهای عنصر فرم HTML استفاده میشود. برای مثال:

در اینجا مستقیم بعد از گرفتن ویژگی value آن را alert کرده ایم. همانطور که گفتیم شما میتوانید از attr هم استفاده کنید ولی این یک روش میانبور می باشد.
نکته: شما میتوانید مقدار ویژگی value را با فرستادن پارامتر اول برای متد val تغییر دهید.
نکته: گرفتن و تنظیم ویژگی value در فیلدهای فرم ها زمانی که بخواهید رویدادها و اعتبارسنجی (validation) را مدیریت کنید بسیار پرکاربرد میباشد. ما رویدادها را در درس های بعدی توضیح خواهیم داد.

اضافه کردن محتوا

در این قسمت میخواهیم با نحوه اضافه کردن محتوا به المنت ها آشنا شویم! شاید بگویید مگر متد html و text را در بالا توضیح ندادید پس این بخش دیگر برای چیست؟
خب درست است که این دو متد را در بالا توضیح داده ایم اما دقت کنید در بالا نوشته ایم تغییر محتوا نه اضافه کردن محتوا…! یعنی چی؟
دو متد html و text محتوای قدیمی را نابود کرده و محتوای جدیدی به جای آن قرار میدهند اما این متدهایی که در این جا معرفی میکنیم، کاری با محتوای قدیمی ندارند و بلکه محتوای جدیدی به یک عنصر انتخاب شده اضافه میکنند! چهار متد برای انجام این کار در این جا توضیح خواهیم داد.

  • متد append: محتوای جدیدی را به انتهای یک المنت انتخاب شده اضافه میکند. منظور از انتها، قبل از بسته شدن تگ پایانی آن المنت میباشد.
  • متد prepend: محتوای جدیدی را به ابتدای یک المنت انتخاب شده اضافه میکند. منظور از ابتدا، بعد از شروع شدن تگ آغازی آن المنت میباشد.
  • متد after: محتوای جدیدی را به بعد از یک المنت انتخاب شده اضافه میکند. منظور از بعد، بعد از بسته شدن تگ پایانی آن المنت میباشد.
  • متد before: محتوای جدیدی را به قبل از یک المنت انتخاب شده اضافه میکند. منظور از قبل، قبل از شروع شدن تگ آغازی آن المنت میباشد.

نکته: شما در پارامتر ورودی همه این متدها میتوانید از نشانه گذاری HTML استفاده کنید.

مثال متد append

همانطور که میبینید، با استفاده از append عبارت Hadi را به قبل از بسته شدن المنت اضافه کرده ایم و در توضیح نیز همین را گفتته بودیم.

مثال متدهای before و after

این کد را تست کنید و از طریق Inspector مرورگر، سورس صفحه را مشاهنده کنید.

اضافه کردن المنت های جدید
همانطور که دیدید، جهار متد بالا امکان اضافه کردن المنت های HTML را هم در خودشان دارند (برعکس متد text) … ما میتوانیم به صورت مستقیم در داخل ورودی تگ HTML را در متن بنویسیم اما شمارا با قابلیت دیگر جی کوئری آشنا میکنم.

ساده ترین راه برای ایجاد المنت در جی کوئری به صورت زیر است:

این کد، یک المنت <p> ایجاد میکند که شامل متن Hi میباشد، سپس کل این مقدار به متغیر txt تعلق میگیرد. حالا میتوانیم از این متغیر برای پارامتر ورودی متدهای بالا استفاده کنیم.

بعد از اجرای این کد خواهید دید که المنت <p> ایجاد شده با محتوای Hi بعد از المنت fk قرار میگیرد.


نکته خیلی مهم
شما میتوانید المنت های بسیاری را به روش بالا بسازید و در هنگامی که در یکی از 4 متد استفاده میکنید، ورودی ها را با ویرگول یا کاما از هم جدا کنید. یعنی بی نهایت ورودی میتواند داشته باشد.
نکته خیلی مهم
در بالا ما المنت <p> ایجاد کردیم که شما میتوانید آن را به هرچیز دیگری مثل div، a و … تغییر دهید.
درس بعدیدرس قبلی
تبلیغات
0
کانال تلگرام فول کده
تبلیغات

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

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس و دانشجوی ارشد رشته شبیه‌ساز هوشمند - در حال نوشتن یه رمان (اگه خدا بخواد و تموم شه ?)

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده بدون دیدگاه