اضافه کردن عناصر DOM در جی کوئری
مسئله
ما می خواهیم یک یا چند عنصر DOM جدید ایجاد کنیم که مستقیما انتخاب شده اند و عملیاتی بر روی آنها انجام دهیم و سپس آنها را در کدهای DOM قرار دهیم.
راه حل
اگر ما به تابع jQuery یک رشته بدهیم که از کدهای HTML خام تشکیل شده است، این تابع این عناصر را به همان صورت ایجاد می کند. بعنوان مثال، در دستور زیر، یک عنصر <a> داریم که در داخل یک عنصر <p> قرار دارد و یک متن نیز در داخل عنصر <p> و عنصر <a> قرار گرفته است.
jQuery('<p><a>jQuery</a></p>');اکنون، عنصر ما ایجاد شده است و ما می توانیم متدهای جی کوئری که قبلا روی آنها کار کردیم را بر روی این عناصری اعمال کنیم. این کار مثل این است که ما عنصر <p> را در یک سند HTML انتخاب کرده ایم. بعنوان مثال، ما باید با استفاده از متد .find() عنصر <a> را انتخاب کنیم و سپس یکی از خصوصیت های(attributes) آن را تنظیم کنیم. در مورد کد زیر، ما خصوصیت href را به مقدار http://jquery.com تنظیم می کنیم.
jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com');این کار بسیار جالب است. اما بهتر هم خواهد شد، زیرا کارهای بیشتری روی عناصر آزاد قرار خواهیم داد و با کدها آنها را دستکاری خواهیم کرد. ما هنوز باید کدهای DOM لود شده را تغییر دهیم. برای انجام این کار، ما باید از متدهای دستکاری کننده(manipulation) در جی کوئری استفاده کنیم. کد ما در زیر در یک سند HTML قرار دارد. در اینجا ما عناصری را ایجاد می کنیم و بر روی آنها عملیاتی انجام می دهیم و سپس این عناصر را با استفاده از متد appendTo() در DOM قرار می دهیم.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com')
.end().appendTo('body');
</script>
</body>
</html>توجه کنید که ما چگونه از متد end() برای برگشتن(undo) به متد find() استفاده می کنیم به طوری که وقتی ما متد appendTo() را فراخوانی می کنیم، این متدآنچه که قبلا در داخل عنصر <a> بوده یعنی مقدار jQuery را به body اضافه می کند.
توضیحات
در کدهای بالا، ما به تابع jQuery یک رشته ی HTML خام پاس دادیم که از آن برای ایجاد عناصر DOM لحظه ای استفاده می شود. همچنین این امکان نیز وجود دارد که به متد jQuery() یک شیء DOM پاس دهیم که توسط متد createElement از DOM ایجاد شده است.
jQuery(document.createElement('p')).appendTo('body');
//adds an empty p element to the pageالبته، این کار ممکن است کمی مشکل هم باشد. البته لازم به ذکر است که با استفاده از متد appendTo() تنها بخشی از قدرت جی کوئری را نشان دادیم، و علاوه بر متد appendTo() متدهای زیر نیز وجود دارند:
• append()
• prepend()
• prependTo()
• after()
• before()
• insertAfter()
• insertBefore()
• wrap()
• wrapAll()
• wrapInner()
{module کمک نقدی به نویسنده}
- بازدید: 549
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.