انتخابگرهای DOM جی کوئری

از موتو کد، دانشنامهٔ برنامه‌نویسی


جی کوئری در برابر جاوا اسکریپت[ویرایش | ویرایش]

جی‌کوئری در سال ۲۰۰۶ توسط جان رزایگ ساخته شد. جی‌کوئری برای مدیریت ناسازگاری‌های مرورگر و برای ساده‌تر کردن ویرایش‌های HTML DOM، کنترل رویدادها، انیمیشن‌ها و Ajax طراحی شده بود. [۱]

برای بیش از ۱۰ سال، جی‌کوئری محبوب‌ترین لایبری جاوا اسکریپت در تمام دنیا بود.

اما، از زمانی که نسخه ۵ (۲۰۰۹) جاوا اسکریپت منتشر شد، بسیاری از قابلیت‌های جی‌کوئری را می‌توانیم با چند خط کد جاوا اسکریپت در برنامه خود استفاده کنیم.

پیدا کردن عناصر HTML با استفاده از شناسه[ویرایش | ویرایش]

عنصری با id برابر با "id01" را بر می‌گرداند: id="id01"

var myElement = $("#id01");


مشاهدهٔ نتیجه

JavaScript[ویرایش | ویرایش]

var myElement = document.getElementById("id01");


مشاهدهٔ نتیجه


پیدا کردن عناصر HTML با استفاده از نام تگ[ویرایش | ویرایش]

تمامی عناصر <p> را بر می‌گرداند:

var myElements = $("p");


مشاهدهٔ نتیجه


مثال[ویرایش | ویرایش]

var myElements = document.getElementsByTagName("p");


مشاهدهٔ نتیجه


پیدا کردن عناصر HTML با نام کلاس[ویرایش | ویرایش]

تمامی عناصری که نام کلاس آنها برابر با کلمه "intro" است را بر می‌گرداند: class="intro" .

var myElements = $(".intro");


مشاهدهٔ نتیجه

JavaScript[ویرایش | ویرایش]

var myElements = document.getElementsByClassName("intro");


مشاهدهٔ نتیجه


پیدا کردن عناصر از طریق نام کلاس در مرورگر اینترنت اکسپلور ۸ و نسخه‌های قدیمی‌تر کار نمی‌کند.

پیدا کردن عناصر HTML با استفاده از انتخابگرها[ویرایش | ویرایش]

لیستی از عناصر <p> با نام کلاس برابر با واژه "intro" را بر می‌گرداند: class="intro" .

var myElements = $("p.intro");


مشاهدهٔ نتیجه

JavaScript[ویرایش | ویرایش]

var myElements = document.querySelectorAll("p.intro");


مشاهدهٔ نتیجه


متد querySelectorAll() در اینترنت اکسپلور نسخه ۸ یا نسخه‌های قدیمی‌تر کار نمی‌کند.

منابع آموزشی[ویرایش]