دوره H جی کوئری
درس 5: کار با DOM در جی کوئری
در درس قبل، روش کار با CSS در جی کوئری را توضیح دادیم؛ حالا در این درس می‌خواهیم به نحوه‌ی کار با DOM در جی کوئری بپردازیم.
DOM
زمانی که شما، صفحه‌ی وبی را در یک مرورگر باز می‌کنید، کد HTML صفحه، بارگزاری شده و به صورت بصری (Visually) بر روی صفحه‌ی نمایش (Screen)، رندر (Render) می‌شود.
برای انجام این‌کار، مرورگر، DOM (مخفف Document Object Model) آن صفحه را می‌سازد، که یک مدل شی گراء، از ساختار منطقی آن صفحه است. (برای کسانی که با برنامه نویسی شی گرائی آشنا باشند، درک این سخن راحت است)
DOM یک سند HTML را می‌توان به صورت مجموعه‌ای از جعبه های تودرتو نمایش داد:
این را می‌توانیم، به صورت درحت نییز تصور کنیم.
- در اینجا، Document ، ریشه‌ی درخت ما می‌باشد و اگر از آن جا به تنه‌ی درخت حرکت کنیم، به هما جا می‌توانیم برسیم.
هردرخت نیز به طور منطقی یک ریشه بیشتر ندارد. - تگ html را می‌توانیم به عنوان تنه‌ی درخت فرض کنیم.
- نگ‌های head و body را هم می‌توانیم دو شاخه‌ی تنه فرض کنیم.
- اما از این جا به بعد، برای هرسندی می‌تواند جداگانه باشد.
- همانطور که می‌بینید، هرکدام از این نود (Node) ها می‌توانند برای خود فرزند (child) داشته باشند.
مثل head و body که فرزند html می‌باشند.
درضمن به هرکدام از این جعبه ها، یک نود می‌گوییم. - نودهایی که در یک سطح یکسانی قرار دارند، برادر و خواهر (siblings) نامیده می‌شوند.
مثل head که با body در یک سطحِ یکسان قرار داد.
نودهای siblings، دارای والدین یکسانی هستند. - اگر با ساختار شی گرائی نیز تجسم کنیم، می‌توانیم Document را آبجکت اعظم در نظر بگیریم و بقیه را هم اجزای آن در نظر بگیریم
در نهیتجب کوئری، نحوه کار با DOM را برای ما بسیار ساده می‌کند.
DOM Traversal
در اینجا، می‌خواهیم عناصر را با توجه به رابطه آن ها با دیگر عناصر، جستجو کرده و پیدا کنیم.
برای مثال، مدل زیر را در نظر بگیرید.
پس می،توانیم موارد زیر را مورد بررسی قرار دهیم:
- المنت <html> ، والِد (parent) المنت <body> و جد (ancestor) همه المنت های پایین تر از خود می‌باشد.
- المنت <body> ، والِد (parent) المنت‌های <h1> و <a> می‌باشد.
- المنت <h1> و <a> ، بچه (child) های المنت <body> و اولاد، زادگان یا فرزندان المنت html می‌باشند.
- المنت <h1> و <a> ، با یکدیگر برادر و خواهر (siblings) یا به اصلاح هم نیا، هستند. (یعنی والیدن یکسانی دارند).
خلاصه:
- جد (ancestor) ، می‌تواند والِد (parent)، پدربزرگ و مادربزرگ (grandparent)، great-grandparent و … می‌باشد.
- نسل یا اولاد (descendant) ، می‌تواند بچه (child)، نوه (grandchild)، نتیجه (great-grandchild) و … باشد.
- هم نیا یا برادر و خواهر (siblings) در اجداد خود مشترک هستند.
پیمایش (Traversing)
جی کوئری برای انجام این کار، متدهای مفیدی در اختیار ما قرار داده است.
متد parent
این متد، والدین مستقیم یک المنت انتخاب شده را برمی‌گرداند.
<div> div element <p>FullKade.Com</p> </div>
var e = $("p").parent();
e.css("border", "2px solid red");
فکر می‌کنید، والِدِ المنت P که در سند انتخاب می‌شود، کدام المنت می‌باشد؟
دقیفا! المنت div !
نکته: توجه داشته باشید که اگر شما در صفحه‌ی خود چندین تگ p داشته باشید، هرکدام می‌توانند والد حدایی داشته باشند.
همانطور که در دروس قبلی گفته شد، در اینجا، تمام المنت های p موجود در صفحه انتخاب می‌شوند.
متد parents
این متد، برخلاق متد قبلی، بر روی تمامی والدین المنت انتخاب شده تاثیر می‌گذارد.
تمامی والدین یعنی اجداد نیز شامل می‌شوند.
<body> body
<div style="width:300px;"> div
<ul> ul
<li> li
<p>FullKade.Com</p>
</li>
</ul>
</div>
</body>
$(function() {
var e = $("p").parents();
e.css("border", "2px solid red");
});
پس انتظار می‌رود که با اجرای این کد، تمامی والدین المنت P که در اینجا: li، ul، div و body می‌شوند، تحت تاثیر قرار بگیرند.
برخی از متدهای مهم
برخی از متدهای مهم دیگر، رای انجام این کارها را به طور خلاصه می‌نویسم:
- متد children:
تمامی بچه‌ها را میگیرد؛ با نوه ها و … کاری ندارد. (فرزندان مستقیم) - متد sibling:
- تمامی هم نیاها را میگیرد.
- متد next یا nextAll:
تمامی المنت‌های هم سطح یا sibling بعد از آن المنت انتخاب شده را میگیرد. (یعنی درکد، پایین‌تر نوشته شده باشد.) - متد prev یا prevAll:
تمامی المنت‌های هم سطح یا sibling قبل از آن المنت انتخاب شده را میگیرد. (یعنی درکد، بالاتر نوشته شده باشد.)
متد eq
متد qe برای انتخاب یک المنت خاص از مجموعه المتنت های انتخاب شده، استفاده می‌شود.
برای مثال اگر شما تمامی div ها را انتخاب کرده باشید و بخواهید به div سومی دسترسی داشته باشید، می‌توانید به صورت زیر عمل کنید.
$("div").eq(2);
خب واضح است که index آرایه از 0 شروع می‌شود.
حذف المنت‌ها
برای انجام این‌کار، می‌توانیم از متدهای زیر استفاده کنیم.
متد remove
برای حذف کامل المنت های انتخاب شده، از این متد استفاده می‌کنیم.
<p style="color:red">Red</p> <p style="color:green">Green</p> <p style="color:blue">Blue</p>
$("p").eq(1).remove();
با این حساب، هر پاراگرافی که در صفحه وجود داشته باشد، حذف خواهد شد.
در ضمن، فرزندانشان نیز حذف خواهند شد.
متد empty
برای خالی کردن المنت های انتخاب شده، از این متد استفاده می‌کنیم.
یعنی اگر بخواهیم inner یا فرزندان یک المنت را حذف کنیم.
<div> <p style="color:red">Red</p> <p style="color:green">Green</p> <p style="color:blue">Blue</p> </div>
div {
background-color: aqua;
width: 300px;
height: 200px;
}
$("div").empty();
در اینجا، المنت div شامل سه المنت p می‌باشد که البته بعد از اجرای کد جاوا اسکریپت دیگر نمی‌باشد. 😀
نظرات ثبت شده بدون دیدگاه