متد های jquery و نحوه استفاده از آن ها
متد های jquery به شما کمک می کند که تغییرات خود را علاوه بر عناصر درون مجموعه به خود مجموعه نیز اعمال کنید. همانطور که می داند انتخابگر های jquery به ما انعطاف پذیری بالا در اعمال تغییرات عناصر می دهند. اما گاهی اوقات برخی از تغییرات کلی را نمی توان با انتخابگر ها بیان کرد. در این شرایط متد های jquery به کمک شما خواهند آمد تا تغییراتی که می خواهیم را بر مجموعه ها و عناصر درون آن اعمال کنیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
در این مقاله قصد داریم به بررسی این متد های jquery و نحوه استفاده از آن ها بپردازیم. با ما همراه باشید.
متد های jquery زندگی را برای طراحان وب آسان تر می کند!
Jquery به تنهایی یکی از محبوب ترین کتابخانه های حال حاضر دنیای وب است. متد های jquery نقش زیادی در ایجاد این محبوبیت داشته اند. با استفاده از این متد ها شما قادر خواهید بود کار های فوق العاده ای انجام دهید ما در این جا تنها به چند مورد از کاربردی ترین های آن ها اشاره می کنیم.
اضافه کردن عناصر جدید
برای اضافه کردن عناصر جدید به مجموعه ها، متد add() ارائه شده است. این متد یک مجموعه جدید از عناصر را درون مجموعه پیچیده اصلی ایجاد می کند که در آن هر عنصر به طور مستقیم ویژگی خود را خواهد داشت. اگر فکر می کنید این تعریف کمی پیچیده است مثال زیر را در نظر بگیرید:
1 |
$("div").add("p").css("color","red"); |
در اینجا یک مجموعه جدید از تمام عناصر <div> ایجاد کرده ایم. سپس یک مجموعه جدید که قبلا در مجموعه عناصر <div> وجود داشت یعنی همه عناصر <p> را نیز به صورت جدا به عنوان یک مجموعه شناسایی کرده ایم. دومین مجموعه عناصر (یعنی همه عناصر <p> موجود در <div> ) دارای ویژگی رنگ قرمز خواهند شد.
شاید فکر کنید که این کار زیاد کاربردی نخواهد بود چون با کد زیر هم این کار قابل انجام است:
1 |
$("div,p").css("color","red"); |
اما برای درک بهتر موضوع بهتر است کد زیر را در نظر بگیرید
1 |
$("div").css("font-weight","bold").add("p"). css("color","red"); |
در اینجا مجموعه عناصر <div> به صورت bold نشان داده خواهند شد و سپس مجموعه دوم که عناصر <p> باشند با رنگ قرمز نشان داده می شوند. به این ترتیب شما با استفاده از متد های jquery می توانید در یک خط کد تغییرات خود را هم بر روی یک مجموعه و هم مجموعه های درون آن اعمال کنید.
متد های jquery برای حذف عناصر
برای حذف عناصر از درون مجموعه های همسان به متد not() احتیاج داریم. مشابه متد add()، این متد هم یک مجموعه همسان جدید ایجاد می کند، اما در اینجا عناصر تعیین شده حذف خواهند شد. تعیین این عناصر می تواند توسط انتخابگر های jquery یا موارد دیگر انجام گیرد. به مثال زیر دقت کنید:
1 2 3 |
$("body *").css("font-weight","bold") .not("p").css("color","red"); |
همانطور که می بینید در این کد دستور داده شده همه عناصر body به صورت bold نمایش داده شوند و اما عناصر p فقط با رنگ قرمز نشان داده شوند و ویژگی bold بر آن ها اعمال نشود. این متد هم جزو متد های jquery پر کاربرد است.
نکته ای که باید به آن اشاره کنیم این است که نباید این متد را با متد remove() اشتباه گرفت. زیرا متد remove() کد ها را از صفحه html به طور کامل پاک می کنند.
پیدا کردن نسل های عناصر با متد find()
گاهی اوقات بسیار کاربردی خواهد بود اگر که جستجو عناصر را به نسل های عناصر شناخته شده محدود کنید. برای این کار باید از متد find() استفاده کنید. برخلاف متدهای jquery قبلی که تا اینجا معرفی کردیم، متد find () فقط از انتخابگر ها برای تعیین عناصر استفاده می کند. عناصری که در مجموعه های همسان وجود دارند بر اساس موارد تعیین شده و توسط نسل های آن ها جستجو خواهند شد. هر عنصری که در مجموعه اصلی که توسط انتخابگر تعیین شود در مجموعه جدید حضور نخواهد داشت. بهتر است به مثال زیر توجه کنید تا با نحوه کار این متد آشنا شوید:
1 2 3 |
$("div").css("background-color","blue") .find("img").css("border","1px solid aqua"); |
در اینجا همه عناصر <div> انتخاب شده است و رنگ پس زمینه آن ها آبی خواهد شد، سپس همه عناصر <img> که فقط جزو نسل های عناصر <div> هستند انتخاب شده است و به آن ها ویژگی مورد نظر داده شده است. همانطور که می بینید این متد می تواند بسیار پر کاربرد باشد و به شما کمک کند به صورت جزئی تری عناصر خود را کنترل کنید.
فیلتر کردن مجموعه های همسان با متد filter()
برای کنترل دقیق تر عناصر مجموعه های همسان نیاز به فیلتر کردن آن ها خواهید داشت. برای این کار یکی دیگر از متد های jquery پر کاربرد یعنی متد filter() را به شما معرفی می کنیم. این متد می تواند توسط یک انتخابگر یا یک تابع تعیین شود. زمانی که از انتخابگر استفاده می کنید، این متد برعکس کار متد not() را برای شما انجام خواهد داد و عناصر انتخاب شده را نگه میدارد. درحالی که در متد not() عناصر انتخاب شده حذف می شدند.
زمانی که از یک تابع استفاده می کنید، تابع برای هر عنصر فراخوانی می شود و تصمیماتی که نمی توانند توسط selectors بیان شوند می توانند در مورد حذف یا اضافه کردن هر عنصر ایجاد شوند. به مثال زیر دقت کنید:
1 2 3 |
$(".bashful").show() .filter("img[src$=.gif]").attr("title","Hi there!"); |
همه عناصر کلاس bashful انتخاب می شوند، سپس مطمئن می شویم همه آن ها نمایش داده خواهند شد. فیلتر ها در این جا فقط بر عکس های gif اعمال می شوند و اتربیوت title را به آن ها اضافه می کند.
به یک مثال دیگر توجه کنید:
1 2 3 4 5 6 7 |
$("img[src^=images/]").filter(function(){ return $(this).attr("title").match(/.+@.+\.com/)!= null; }) .hide(); |
عکس ها از یک فولدر خاص انتخاب می شود و بر اساس title مشخص شده فیلتر می شوند.
کلام آخر
متد های jquery کاربرد های بسیار بیشتری دارند. ما با توجه به بیشترین نیاز ها تعدادی از آن ها را معرفی کرده ایم. اما اگر شما تجربه کار با سایر متد ها را دارید می توانید آن ها را به ما معرفی کنید و به اشتراک بگذارید.
منبع : طراحی سایت