مرجع کامل Selector ها در jQuery

فروردین ۵, ۱۳۹۱ توسط : سعید

selector ها در jQuery به ما اجازه میده تگ های HTML رو انتخاب و مدیریت کنیم. jQuery این قابلیت رو در اختیار ما قرار میده که بتونیم عمل انتخاب تگهای HTML رو به صورت تک یا به صورت گروهی انجام بدیم.در ادامه به توضیح شیوه های مختلف انتخاب تگهای HTML میپردازیم.


*

این سلکتور تمام تگهای HTML رو در بر میگیره.

$('*')  

اگر با یک عنصر دیگه ترکیب بشه تمام زیر محموعه (فرزندان) عنصر اصلی رو در بر میگیره.

$('body *')  

#

سلکتور شارپ برای انتخاب یک عنصر HTML با یک آی دی مشخص استفاده میشه.
تگ div زیر رو در نظر بگیرید :

<div id='logo'> </div>   

با استفادده از سلکتور زیر میتونیم به این تگ دسترسی داشته باشیم :

$('#logo')  

.

سلکتور . (dot) برای انتخاب یک تگ HTML  بایک class مشخص استفاده میشه.

<div class='header'></div>
…
$('.header')  

نام تگ HTML

با استفاده از نام مستقیم یک تگ HTML میتونیم در jQuery به تگ مورد نظر دسترسی داشته باشیم.

$('p')  

دستور بالا تمام تگهای p موجود رو در بر میگیره.


:first

این سلکتور بیشتر با بقیه سلکتور ها استفاده میشه.به این معنی که اولین عنصر رو در بر میگیره.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:first").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>

پس از اجرای  کد بالا اولین تگ p  پس زمینه قرمز خواهد داشت.


:last

این سلکتور آخرین عنصر زیر مجموعه رو انتخاب میکنه.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:last").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>

:even

این سلکتور هر عنصری با اندیس زوج رو انتخاب میکنه.( ۰ و ۲ و۴ و …)

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:even").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
</body>
</html>

در جدول بالا تمام ردیفهای زوج رنگ پس زمینه قرمز خواهند گرفت.


:odd

این سلکتور هر عنصری با اندیس فرد رو انتخاب میکنه.

$("tr:odd").css("background-color","blue");

:eq()

این سلکتور یک عنصر با یک اندیس خاص رو انتخاب میکنه.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:eq(1)").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>

در مثال بالا مقدار داخل پرانتز eq برابر با ۱ قرار داده شده.به این معنی که دومین تگ p رو انتخاب و پس زمینه قرمز رو بهش میده.


:gt()

این سلکتور عناصری رو انتخاب میکنه که اندیس آنها بزرگ تر از عدد داخل پرانتز باشه.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:gt(3)").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
</body>
</html>

در مثال بالا از ردیف چهارم تا آخر جدول پس زمینه قرمر خواهند گرفت.


:lt

این سلکتور عناصر کوچک از یک اندیس مشخص رو انتخاب میکنه.

 $("tr:lt(4)").css("background-color","red");

:not

این سلکتور تمام عناصر به غیر از یک عنصر مشخص رو انتخاب مبکنه.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:not(.intro)").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>

در مثال بالا تمام تگ های p به غیر از تگ  p که هست رو پس زمینه قرمز خواهد داد.


:header

این سلکتور تگهای h1 تا h6 رو در بر میگیره.

 $(":header").css("background-color","red");

:animated

با استفاده از این سلکتور میتونید تمام عناصری که با دستور animat به حرکت در آوردید رو انتخاب کنبد.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function aniDiv(){
$("div:eq(0)").animate({width:"50%"},"slow");
$("div:eq(0)").animate({width:"100%"},"slow",aniDiv);
}
aniDiv();
$(".btn1").click(function(){
$(":animated").css("background-color","red");
});
});
</script>
</head>
<body>
<button>Change color of animated element</button>
<div style="background:blue;">Div 1</div>
<div style="background:green;">Div 2</div>
<div style="background:yellow;">Div 3</div>
</body>
</html>

:contains(text)

این سلکتور عناصری رو که شامل یک متن خاص باشن رو انتخاب میکنه.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:contains(is)").css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>  

در مثال بالا دو خطی که شامل کلمه is هستند پس زمینه قرمز میگیرن.


:empty

عناصری که فرزند یا متن ندارند رو انتخاب میکنه .

$(":empty").css("background-color","red");  

:visible

عناصری که در حال نمایش هستند رو انتخاب میکنه.

  $("p:visible").css("background-color","red");

[attribute]

عناصری انتخاب میشن که خاصیت مشخص شده در براکت رو داشته باشن.

  $("[id]").css("background-color","red");

[attribute=value]

عناصری که خاصیت مشخص شده در براکت برابر با مقدار خاصی باشه انتخاب میشن.

$('[href=http://phpro.ir]') .css("background-color","red");

[attribute!=value]

عناصری که خاصیت مشخص شده در براکت برابر با مقدار خاصی نباشه انتخاب میشن.

$('[href!=http://phpro.ir]') .css("background-color","red");

[attribute$=value]

عناصری رو در بر میگیره که خاصیت مشخص شده در براکت با یک متن مشخص خاتمه پیدا کنه.

$("a:[href$=.org]") 

در مثال بالا تمام تگهای a که href آنها با .org تموم بشه انتخاب میشن.


:input

تگ input در فرم رو انتخاب میکنه.


:text

تگ input که از نوع text هست رو انتخاب میکنه.


:password

تگ input از نوع password رو انتخاب میکنه.


:radio

تگ input از نوع rasio رو انتخاب میکنه.


:checkbox

تگ input از نوع checkbox رو انتخاب میکنه.


:submit

تگ input از نوع submit  رو انتخاب میکنه.


:reset

تگ input از نوع reset  رو انتخاب میکنه.


:button

تگ input از نوع button  رو انتخاب میکنه.


:image

تگ input از نوع image  رو انتخاب میکنه.


:file

تگ input از نوع file  رو انتخاب میکنه.


:enabled

تمام عناصر فعال در فرم رو انتخاب مبکنه.


:disabled

تمام عناصر غیرفعال در فرم رو انتخاب مبکنه.


:selected

در تگ select مقدار انتخاب شده رو انتخاب مبکنه.

$(":selected").css("background-color","red");

:checked

در فرم checkbox ها یا radio button هایی که انتخاب شده رو انتخاب میکنه.

$(":checked").wrap("<span style='background-color:red' />");

مثالها و منبع : http://www.w3schools.com/jquery/jquery_ref_selectors.asp

بازدید : ۳۸۹۴

pooyan
اردیبهشت ۲۰, ۱۳۹۱ @ ۳:۳۹ ب.ظ

salam age mishe har amozesho pdf esho ham bezarid

پاسخ دادن
شهریور ۲۸, ۱۳۹۱ @ ۷:۱۹ ق.ظ

سلام
تشکر ولی چرا سلکتور div < li رو توضیح ندادید؟

پاسخ دادن
    سعید
    شهریور ۲۸, ۱۳۹۱ @ ۱۱:۵۹ ق.ظ

    سلام
    مثل اینکه جا افتاده. مرسی از تذکرتون.
    این سلکتور برای انتخاب فرزند بک عنصر استفاده میشه.

    <ul class="topnav">
        <li>Item 1</li>
        <li>Item 2 
            <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
           </li>
        <li>Item 3</li>
    </ul>
    <script>$("ul.topnav > li").css("border", "3px double red");</script>
    

    در مثال بالا فقط li انتخاب میشن و تگ ul که داخل li قرار داره انتخاب نمیشه.
    کدش رو از این لینک برداشتم. همونجا هم نمونه اش هست.

    پاسخ دادن
      mariam
      بهمن ۳, ۱۳۹۱ @ ۱:۲۸ ق.ظ

      vayyyyyyyyyy cheghade shomaha midonin
      khodaaa
      man vase tahghigham mikhasam
      azatoon mamnoonam alii boodesh
      sitaye dg eftez bood
      sarjam 2khat bishtar nabood
      bazam mamnoonam

      پاسخ دادن
        سعید
        بهمن ۳, ۱۳۹۱ @ ۱۱:۴۰ ق.ظ

        خواهش میکنم دوست عزیز.

        پاسخ دادن
جوان
دی ۵, ۱۳۹۱ @ ۱۱:۳۴ ب.ظ

عالی بود

پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*