akofaraji.ir
کار با Remove و کلاس‌های CSS
نوشته شده در تاریخ 08 فروردین 1403
نظرات: 0 امتیاز: 9 زمان مطالعه: 16 دقیقه
 
 
Manipulation در جی کوئری
 

 

این قسمت از آموزش Manipulation در جی کوئری را با این سوال آغاز می کنیم که چگونه عناصر و atrribute ها را از DOM به کمک jQuery حذف کنیم؟ jQuery دسته ای از متدها را جهت حذف عناصر و یا محتوا از DOM آماده کرده است، متدهایی مانند ()empty() remove() ،unwrap و …

 

متد ()empty در jQuery

 

متد ()empty همه محتوای عنصر و عناصر فرزندش و محتوای عناصر فرزند را حذف می کند. در کد مثال زیر ملاحظه می کنید که بعد از کلیک روی دکمه، محتوای داخل همه عناصری که دارای کلاسی به نام container می باشند، حذف می شود:

 

نکته: با توجه به استانداردهای کنسرسیوم جهانی وب و یا همان W3C، هر رشته متن درون یک عنصر فرزند آن عنصر محسوب می شود.

 

متد ()remove در jQuery

 

متد ()remove در jQuery هر عنصری را که در ورودی به آن داده شود، به همراه محتوای داخلی آن عنصر را از DOM حذف می کند. علاوه بر عنصر، تمامی رویدادهایی که در رابطه با عنصر هستند (رویدادها روی آن عنصر بی اثر می شوند)، دیتاها و اطلاعات آن ها و همچنین مواردی که توسط jQuery نیز اضافه شده باشد، کاملا حذف می شوند.

 

در کد مثال زیر مشاهده می کنید که تمامی عناصر <p> که دارای کلاسی تحت عنوان hint. هستند، با کلیک روی دکمه از DOM حذف می گردند. عناصر تو در تو میان این پاراگراف ها نیز حذف می گردند:

 

متد ()remove همچنین می تواند شامل یک پارامتر اختیاری به عنوان selector باشد. به عنوان مثال کد قسمت قبل را می توان با همان کارکرد به صورت زیر بازنویسی کرد:

 

نکته: شما می توانید چندین selector را به متد ()remove ارسال کنید که جهت فیلتر کردن چند عنصر کاربرد دارد. برای مثال: (“remove(“.hint, .demo که روی عناصری که دارای کلاس hint. و یا عناصری که دارای کلاس demo. می باشند، تأثیر می گذارند.

 

متد ()unwrap در jQuery

 

متد ()unwrap همه عناصر والدِ عناصری را که توسط Selector ها انتخاب شده اند، از DOM حذف می کند. این عمل دقیقا مخالف عمل متد ()wrap که قبلا راجع به آن توضیح داده شده است، می باشد.

در کد مثال زیر مشاهده می کنید که عناصر والد پاراگراف ها یا همان تگ های <p> با کلیک روی دکمه حذف می شوند:

 

متد ()removeAttr در jQuery

 

متد ()removeAttr، یک صفت یا attribute را از عناصر انتخاب شده حذف می کند. در کد مثال زیر مشاهده می کنید که با کلیک روی دکمه، صفت href از لینک ها یا همان تگ های <a> حذف می شوند:

 

حذف و اضافه کردن کلاس های CSS با jQuery

 

در jQuery، شما می توانید متدهایی را برای manipulation بیابید که با آن ها می توانید به حذف و یا اضافه کردن کلاسی به عنصری اقدام کنید. متدهایی از جمله: ()addClass() ،removeClass() ،toggleClass و… تا به دستکاری و تغییر یا manipulate کردن کلاس های css ای که در عناصر Html وجود دارند، اقدام کنید.

 

متد ()addClass در jQuery

 

متد ()addClass در jQuery یک یا چند کلاس را به عناصر انتخاب شده اضافه می کند. در کد مثال زیر کلاس page-header. به تگ های <h1> و کلاس highlight. به آن دسته از تگ های <p> که خود دارای کلاس hint. می باشند، با کلیک روی دکمه اضافه می گردند:

 

همچنین می توانید با متد ()addClass چند کلاس را همزمان به عناصر انتخاب شده اضافه کنید. مثلا در کد زیر مشاهده می کنید که لیستی از کلاس ها به تگ <h1> اضافه می شوند:

 

متد ()removeClass در jQuery

 

به طریق مشابه می توانید با استفاده از متد ()removeClass در jQuery می توانید به حذف یک یا چند یا همه کلاس های عناصر انتخاب شده در یک زمان اقدام کنید. در کد زیر با کلیک روی دکمه، کلاس page-header از تگ <h1>، کلاس hint. و highlight. را از تگ <p> حذف کنید:

 

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

 

متد ()toggleClass در jQuery

 

متد ()toggleClass به طرز جالبی اقدام به حذف و اضافه کردن یک یا چند کلاس به عناصر انتخاب شده می کند. به این صورت که اگر کلاس در عنصر انتخاب شده موجود باشد، آن کلاس حذف می شود. اگر کلاس مورد نظر در عنصر انتخاب شده وجود نداشته باشد، آن کلاس به ان عنصر خاص اضافه می گردد. مثال زیر یک نمونه کامل از کارکرد متد ()toggleClass را ارائه می دهد:

 

هم اکنون که با ویژگی remove در jQuery آشنا شده اید و مثال هایی از Manipulation در جی کوئری در رابطه با کلاس های css را مشاهده نمودید، چند مبحث دیگر از manipulation در jQuery باقی مانده است، که آن ها را در قسمت بعد بررسی می کنیم.

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید