انتخاب عناصر با سلکتورها و جی کوئری

Ratings
(0)


مسئله: می خواهیم یک عنصر تکی DOM و یا یک مجموعه از عناصر DOM را انتخاب کنیم و با استفاده از جی کوئری، کارهایی را بر روی آنها انجام دهیم.

راه حل: جی کوئری برای انتخاب عناصر DOM دو راه به ما نشان می دهد. در هر دو روش، ما باید از تابع های ()jQuery  یا ()$ استفاده کنیم. در راه اول، ما از سلکتورهای CSS استفاده می کنیم؛ این راه ساده تر است. اگر ما به تابع jQuery یک رشته بدهیم که حاوی یک سلکتور است، این تابع در DOM جستجو می کند و عناصری که با رشته ی ما تطابق دارند را پیدا می کند. بعنوان مثال کدهای زیر تمام عناصر <a> را در سند HTML انتخاب می کند:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
//alerts there are 6 elements
alert('Page contains ' + jQuery('a').length + ' <a> elements!');
</script>
</body>
</html>

 اگر کدهای بالا را در یک مرورگر وب اجرا کنیم، خواهید دید که یک پیام هشدار ()alert ایجاد می شود و به ما اطلاع می دهد که این صفحه ی وب حاوی 6 عنصر <a> است. در کدهای بالا در خط شماره 18 ابتدا با استفاده از دستور jQuery('a')  عناصر <a> را در داخل صفحه انتخاب کردیم و سپس با استفاده از پروپرتی length تعداد این عناصر را به دست آوردیم. دستور jQuery('a') می تواند چندین سلکتور را بپذیرد. برای انجام این کار، کافیست سلکتورها را با استفاده از کاما از یکدیگر جدا کنید. به مثال زیر توجه کنید:

jQuery('selector1, selector2, selector3').length;

دومین گزینه  برای انتخاب عناصر DOM که کمتر متداول است، این است که به تابع jQuery  یک دستور جاوا اسکریپت بدهیم که به عناصر DOM رجوع می کند. بعنوان مثال، در کدهای زیر، ما تمام عناصر <a> در سند HTML را انتخاب می کنیم. برای انجام این کار، از متد getElementsByTagName استفاده می کنیم. این مثال نتیجه ای همانند مثال قبلی تولید می کند:

<!DOCTYPE html >
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body bgcolor="yellow">
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
 
alert('Page contains ' + jQuery(document.getElementsByTagName('a')).length +' <a> Elements, And has a '+ jQuery(document.body).attr('bgcolor') + 'background');
</script>
</body>
</html>

 نتیجه به صورت زیر خواهد بود:

Page contains 6 <a> Elements, And has a yellow background

 توضیح کدهای بالا

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

  • بازدید: 542

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال