آموزش تبدیل آبجکت جی کوئری به DOM
مسئله
وقتی که دریک صفحه(page) عناصری را با جی کوئری انتخاب می کنیم، یک مجموعه، به صورت یک آبجکت جی کوئری، برگردانده می شود؛ نه به صورت یک آبجکت خام DOM . چون که این شیء برگردانده شده، یک آبجکت جی کوئری است، ما تنها می توانیم بر روی این مجموعه ی انتخاب شده، از متدهای جی کوئری استفاده کنیم. برای اینکه بتوانیم متدهای DOM و پروپرتی های(properties) آن را بر روی مجموعه ی انتخاب شده اجرا کنیم، نیاز داریم این مجموعه را به یک آبجکت DOM خام تبدیل کنیم.
راه حل
جی کوئری یک متد هسته ای به نام get() دارد که تمام آبجکت های جی کوئری تطابق یافته را به یک آرایه از آبجکت های DOM تبدیل می کند. علاوه بر این، ما می توانیم یک اندیس را بعنوان یک آرگومان به متد get() بدهیم، که باعث می شود عنصری که در این اندیس از مجموعه ی تطابق یافته قرار دارد، به صورت یک آبجکت DOM، برگردانده شود، مثلا داریم:
$.get(1);اکنون با اینکه می توانیم با استفاده از دستور $.get(index) آبجکت DOM یک عنصر تکی را دریافت کنیم، به دلایل تاریخی، خوب است که به جای دستور مذکور، از براکت ها یعنی [] استفاده کنیم. مانند زیر:
$("div")[1]نکته: ما داریم در مورد متد هسته ای .get() که یک آبجکت جی کوئری را به یک آرایه ی DOM تبدیل می کند، صحبت می کنیم؛ و در مورد متد get ای جکس که یک صفحه از راه دور(remote page) را با استفاده از درخواست های HTTP GET بارگذاری می کند، صحبت نمی کنیم.
به دلیل اینکه متد get() یک آرایه را برمی گرداند، ما می توانیم از این آرایه را برای رسیدن به هر عنصر DOM استفاده کنیم. وقتی که عنصر ما به یک عنصر DOM تبدیل شود، می توانیم از پروپرتی ها و متدهای مرسوم DOM بر روی آن استفاده کنیم. در مثال زیر، می خواهیم با این روش، innerHTML یک عنصر را بیرون بیاوریم:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Chapter 3</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
var inner = $("div")[0].innerHTML;
alert(inner);
});
})(jQuery);
</script>
</head>
<body>
<div>
<p>
jQuery, the write less, do more JavaScript library. Saving the day
for web developers since 2006.
</p>
</div>
</body>
</html>خروجی کد بالا به صورت زیر است:
(تصویر 3.3)
در ابتدا ما تمام عناصر <div> را در صفحه، با فراخوانی دستور [0] انتخاب(گزینش) می کنیم. ما اندیس عنصری که می خواستیم با آن کار کنیم را در داخل این براکت ها قرار می دهیم. چون که تنها یک عنصر <div> در صفحه ی ما وجود دارد، ما اندیس 0 را به براکت می دهیم. در نهایت ما یک پروپرتی به نام innerHTML را مورد استفاده قرار می دهیم تا متن خام درون این عنصر را در DOM به دست آوریم.
توضیحات
متد هسته ای get() می تواند بسیار کاربردی باشد، زیرا برخی متدهای غیر-جاوا اسکریپتی وجود دارند که ما می توانیم از آنها به سود خود استفاده کنیم.فرض کنید که یک لیست داریم و می خواهیم ترتیب این لیست را معکوس کنیم. چون که متد get() یک آرایه را برمی گرداند، ما می توانیم از متدهای بومی آرایه ای(native array methods) برای معکوس کردن ترتیب این لیست استفاده کنیم و سپس لیست را دوباره نمایش دهیم:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Chapter 3 - Recipe 3 - Converting a selected jQuery object into a raw DOM object</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
(function($){
$(document).ready(function(){
var lis = $("ol li").get().reverse();
$("ol").empty();
$.each(lis, function(i){
$("ol").append("<li>" + lis[i].innerHTML + "</li>");
});
});
})(jQuery);
//-->
</script>
</head>
<body>
<h2>New York Yankees - Batting Line-up</h2>
<ol>
<li>Jeter</li>
<li>Damon</li>
<li>Teixeira</li>
<li>Posada</li>
<li>Swisher</li>
<li>Cano</li>
<li>Cabrera</li>
<li>Molina</li>
<li>Ransom</li>
</ol>
</body>
</html>
(تصویر 3.4)
{module کمک نقدی به نویسنده}
- بازدید: 526
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.