جزوه خلاصه 

1. مفهوم تراورزینگ (Traversing) در جی‌کوئری:

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

• تراورزینگ به این معناست که شما می‌توانید از یک عنصر شروع کرده و به دیگر عناصر دسترسی پیدا کنید.

  // انتخاب عنصر بعدی از یک المان $(this).next(); // انتخاب المان والد $(this).parent(); // انتخاب تمام فرزندان $(this).children();

2. سلکتورهای مهم جی‌کوئری:

جی‌کوئری از سلکتورهایی مشابه CSS برای انتخاب عناصر استفاده می‌کند. در زیر چند سلکتور مهم جی‌کوئری را مشاهده می‌کنید:

• سلکتور کلاس:

  $(".test"); // انتخاب تمام المان‌هایی با کلاس "test" 

• سلکتور آی‌دی:

  $("#test"); // انتخاب المانی که ID آن "test" است 

• سلکتور تگ:

  $("span"); // انتخاب تمام <span>ها 

• سلکتور ترکیبی:

  $("div p"); // انتخاب تمام <p>های داخل <div> 

• سلکتور فرزند:

  $("div > p"); // انتخاب <p>هایی که به عنوان فرزند مستقیم از <div> هستند 

• سلکتور والد:

  $("p").parent(); // انتخاب والد یک <p> 

• سلکتور قبلی:

  $("p").prev(); // انتخاب المان قبلی از یک <p> 

• سلکتور تمام فرزندان:

  $("p").children(); // انتخاب تمام فرزندان یک <p> 

3. مثال از جی‌کوئری در HTML:

در کد HTML داده‌شده، ما یک <span> با کلاس "x" داریم که داخل آن یک <p> وجود دارد.

html

<span class="x">  test1  <p>test2</p> </span>

در جی‌کوئری می‌توانیم از سلکتور $("span.x p") استفاده کنیم تا فقط به <p> داخل <span> با کلاس "x" استایل بدهیم:

$(function () {  $("span.x p").css("color", "red"); // رنگ متن داخل <p> رو قرمز می‌کنیم });

4. نکات مهم:

• $(document).ready(): این متد باعث می‌شود که کدهای جی‌کوئری فقط پس از بارگذاری کامل صفحه اجرا شوند.

   

  $(document).ready(function () {  // کدهای جی‌کوئری اینجا قرار می‌گیرند });

• پنهان و نمایش المان‌ها: می‌توانید از متدهای hide() و show() برای پنهان کردن یا نمایش المان‌ها استفاده کنید.

   

  $(".test").hide(); // پنهان کردن المان‌هایی که کلاس "test" دارند $(".test").show(); // نمایش دوباره المان‌هایی که کلاس "test" دارند 

5. خلاصه مفاهیم تراورزینگ در جی‌کوئری:

در جی‌کوئری، تراورزینگ به شما این امکان را می‌دهد که از یک المان شروع کنید و المان‌های مرتبط به آن را پیدا کنید. این شامل مواردی چون رفتن به والد، فرزند، و حتی انتخاب المان‌های قبلی یا بعدی است.

تراورزینگ پایه:

• $(this).next() : انتخاب المان بعدی
• $(this).parent() : انتخاب والد
• $(this).children() : انتخاب فرزندان
• $(this).prev() : انتخاب المان قبلی

6. نتیجه‌گیری:

با استفاده از جی‌کوئری، می‌توانیم به راحتی با DOM کار کنیم، استایل‌ها را تغییر دهیم و تعاملات مختلفی با صفحه ایجاد کنیم. تراورزینگ یکی از قابلیت‌های مهم جی‌کوئری است که به شما این امکان را می‌دهد تا به راحتی از یک عنصر به عناصر مرتبط دسترسی پیدا کنید.