انتخابگر یا Selector ها در جی کوئری
مقدمه
درود و عرض ادب خدمت شما علاقه مندان به آموزش جی کوئری . بنده علیرضا حاتمی نیا در خدمت شما هستم با آموزش برنامه نویسی و قسمت جدید آموزش جی کوئری.
در جلسه دوم آموزش جی کوئری به معرفی رویداد ready در جی کوئری پرداختیم و در این جلسه از آموزش با گرینشگرها یا انتخابگرها (selectors) در جی کوئری آشنا خواهیم شد.
از آنجایی که برای درک و تفهیم بهتر گزینشگرها در جیکوئری نیاز به آشنایی با مفهوم DOM و یا سیستم درختی یا پدر، فرزندی در HTML دارید، به توضیحات مختصری را در این باره می پردازیم.
سند HTML یک درخت است
در این دوره از آموزش jquery شاید گاهی با واژه هایی چون پدر، فرزند و ... مواجه شوید. معنی و مفهوم اصلی این واژه ها بیانگر این است که یک سند HTML در قالب یک درخت تعریف می شود. تمامی تگ های آن با هم روابط خانوادگی نیز دارند. کاربرد زبان جاوا اسکریپت و همین طور جی کوئری مدیریت و دستکاری تگ ها و عناصر HTML است. برای مثال انتخاب و حذف یک عنصر div در صفحه و یا انتخاب یک <p> با یک ID مشخص و مخفی کردن آن.
شما بایستی تگ های یک صفحه را به صورت یک درخت تصور کنید. به مثال زیر توجه کنید
<html>
<head>
<title> Dom example </title>
</head>
<body>
<div>
</div>
<p>
some text
</p>
</body>
</html>
کد بالا را می توان به صورت درخت زیر تصور کرد:
در بین عناصر این درخت می توان گفت که پدر تمامی تگ ها تگ <html> می باشد که خود دو فرزند <body> و <head> نیز دارند. دو تگ ذکر شده هر کدام نیز فرزندانی دارند که تگ های مجاور آنها به عنوان برادر یاد می شوند. مثلا رابطه برادری بین دو تگ <p> و <img> برقرار است. این روش ساده ترین روش توضیح مدل درختی <html> یا مدل DOM می باشد.
انتخاب گر یا گزینشگر در جی کوئری (Selectors)
گزینشگر ها یا selector ها در جی کوئری این امکان را به شما می دهند تا به تگ های HTML و صفاتشان و مقادیراش و ... دسترسی داشته باشید و آنها را مدیریت کنید. این دسترسی می تواند توسط نام یک تگ ، کلاس یا شناسه ID عناصر ، مقادیر و صفاتشان باشد.
توجه داشته باشید که کلیه گزینشگر ها در جی کوئری با یک علامت $ و دو پرانتز باز و بسته تعریف می گردند
$()
در ادامه به توضیح مهمترین انواع گزینش یا انتخاب عناصر در HTML می پردازیم :
انتخاب عناصر در جیکوئری:
در این روش می توانید عناصر HTML را توسط نام هر عنصر انتخاب کنید:
مثلا توسط کد زیر شما کلیه عناصر <div> صفحه را انتخاب می کنید.
$("div")
در مثال زیر کلیه تگ های div با کلیک به روی دکمه مخفی می شوند.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<div>This is div1.</div>
<div>This is div2.</div>
<div>This is div3.</div>
<button>Click here to hide divs</button>
</body>
</html>
در مثال بالا از رویداد click و افکت hide استفاده شده است که در آینده با آنها آشنا خواهید شد. فقط در همین حد توجه داشته باشید که کلیه تگ های <div> توسط نام آنها انتخاب یا select شده و مخفی می شوند.
انتخاب عناصر HTML توسط صفت شناسه id
در جی کوئری شما می توانید هر تگ را بر اساس شناسه id آنها انتخاب نمایید. با توجه به اینکه هر تگ تنها یک id منحصر به فرد می تواند داشته باشد پس اگر بیشتر از یک شناسه را select کنید فقط اولین شناسه نوشته شده انتخاب می شود.
جهت انتخاب یک عنصر توسط صفت id کافیست نام شناسه را همراه با یک علامت # بنویسید. به شکل زیر :
$("#myId")
در مثال زیر با کلیک به روی دکمه buttonعنصری که id برابر با myId دارد پنهان می شود
$(document).ready(function(){
$("button").click(function(){
$("#myId").hide();
});
});
انتخاب عناصر HTML توسط صفت class
در جی کوئری شما می توانید هر تگ را بر اساس صفت class آنها انتخاب نمایید. توجه داشته باشید که هر عنصری که کلاسی با نام انتخابی شما را داشته باشد انتخاب خواهد شد.
جهت انتخاب یک عنصر توسط صفت class کافیست نام کلاس را همراه با یک علامت نقطه (.) بنویسید. به شکل زیر :
$(".myClass")
در مثال زیر با کلیک به روی دکمه buttonعنصری که کلاسی برابر با myClass دارد پنهان می شود
$(document).ready(function(){
$("button").click(function(){
$(".myClass ").hide();
});
});
نظرات کاربران