ورود به کارتابل مشتریان وب مهراز
انتخاب گر های jQuery
یادگیری jQueryسلکتور های jQuery
سلکتور ها به شما این امکان را می دهند تا عناصر html را دستکاری کنید.
سلکتور ها برای پیدا کردن یا انتخاب عناصر html براساس نام، آیدی، کلاس ، نوع، ویژگی، مقدار، صفت و... به کار می روند. این سلکتور ها از روش سلکتورهای css استفاده می کنند، که علاوه بر آن برخی سلکتور های سفارشی مخصوص خود راهم دارند.
تمام سلکتور ها در jQuery با علامت $ و () نوشته می شوند : $() .
انتخابگر ها عنصر
سلکتور ها یا انتخاب گرهای عنصر jQuery عناصر را بر اساس نام آنها انتخاب می کند.
می توانید تمام عناصر <P> یک صفحه را با این دستور انتخاب کنید:
مثال:
زمانیکه کاربر روی دکمه کلیک می کند، تمام عناصر <p> مخفی می شود:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});سلکتور id
سلکتور id# از صفت آیدی تگ html برای پیداکردن عنصر خاص استفاده می کند.
هر آیدی در هر صفحه باید منحصر بفرد باشد، بنابراین زمانیکه از سلکتور id# استفاده می کنیم، می خواهیم یک عنصر منحصر بفرد را پیدا کنیم.
برای پیدا کردن یک عنصر با یک آیدی خاص، کاراکتر # را نوشته و جلوی آن نیز آیدی عنصر html را می نویسیم:
مثال:
زمانیکه کاربر روی دکمه کلیک می کند، عنصری که "id="test است، مخفی می شود:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
سلکتور class
سلکتور .class عناصری را کلاس خاص پیدا می کند. برای پیدا کردن عناصری با کلاس خاص، کاراکتر . را نوشته و جلوی آن نام کلاس مورد نظرا را بنویسید:
مثال:
زمانی که کاربر دکمه را فشار می دهد، عناصر با کلاس class="test" مخفی می شوند:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});مثال های بیشتر از سلکتورهای jQuery
توضیح
Syntax
تمام عناص را انتخاب می کند
$("*")
عنصر جاری را انتخاب می کند
$(this)
تمام عناصر <p> را که دارای کلاس class="intro"هستند را انتخاب می کند
$("p.intro")
اولین عنصر <p> را انتخاب می کند
$("p:first")
اولین عنصر <li>از اولین <ul> را انتخاب می کند.
$("ul li:first")
اولین عنصر <li> را از تمام<ul> ها انتخاب می کند.
$("ul li:first-child")
تمام عناصر را صفت href را انتخاب می کند.
$("[href]")
تمام عناصر <a> را که صفت target آن ها دارای مقدار _blank دارند را انتخاب می کند
$("a[target='_blank']")
تمام عناصر <a> را که صفت target آن ها مقدار _blank نیست را انتخاب می کند
$("a[target!='_blank']")
تمام عناصر <button> و تمام عناصر ورودی <input> از نوع type="button" را انتخاب می کندو
$(":button")
تمام سطر های زوج عنصر<tr> را انتخاب می کند.
$("tr:even")
تمام سطر های زوج عنصر <tr> را انتخاب می کند.
$("tr:odd")
توابع در یک فایل جداگانه
اگر وب سایت شما شامل صفحات زیادی می شود و می خواهید از توابع jQuery به راحتی نگهداری و استفاده کنید، می توانید توابع jQuery را در فایل .js جداگانه قرار دهید.
در این آموزش ها توابع به بخش <head> اضافه می شوند. بنابراین برخی اوقات می توان این توابع را در فایل جداگانه ای مانند مثال زیر قرار داد( از صفت src برای ارجاع دادن به فایل .js استفاده کنید ).
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
نظر شما
>