قسمت چهارم : انتخاب گر ها (selector) بخش 1
همون طوری که در قسمت قبل اشاره ای کوتاه به انتخاب گر ها داشتیم الان میخوام انتخاب گر ها رو کامل برای شما توضیح بدم.
جی کوئری روش ها و متد های مختلفی برای انتخاب کردن عناصر داره و همین باعث میشه که شما به راحتی بتونید دقیقا همون عنصری رو که میخوایید انتخاب کنید. همچنین شما میتوانید این روش ها و متد ها را با یکدیگر ترکیب کنید و از اون ها استفاده کنید.
قدرت انتخاب گر های جی کوئری بسیار زیاد است به صورتی که شما میتوانید یک عنصر را علاوه بر خصوصیت های آیدی و کلاس توسط خصوصیت های دیگه مانند rel,href,name,alt,title, و .. نیز انتخاب کنید.
حالا انواع انتخابگر رو با مثال براتون توضیح میدم.
درضمن این نکته رو هم بگم که به دلیل زیاد بودن انتخابگر ها من در دو بخش اون ها رو توضیح میدم و این بخش اول هست.
و اینکه تمامی مثال ها از سایت خود jquery هستش و من فقط توضیحاتی کوتاه به شما میدم تا متوجه بشید و از شلوغی و سردرگمی سایت jquery به دور باشید و اگر کسی خواست اطلاعات بیشتری به دست بیاره به سایت jquery قسمت api قسمت selector ها مراجعه کنه.
انتخاب همه عناصر : این کد باعث میشود که همه عناصر موجود انتخاب شوند.
$("*")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
</body>
</html>
انتخاب عنصری که animate شده است : این کد div را که animate شده است انتخاب میکند.
$("div:animated")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
div.colored { background:green; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>
<script>
$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
</script>
</body>
</html>
انتخاب عنصر که توسط خصوصیت و prefix : این کد تمامی عنصر های a که خصوصیت hreflang آن ها با perfix en شروع میشود را انتخاب میکند.
$('a[hreflang|="en"]')
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
a { display: inline-block; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>
<script>
$('a[hreflang|="en"]').css('border','3px dotted green');
</script>
</body>
</html>
انتخاب عنصری که یک کلمه خاص در یک خصوصیت آن موجود میباشد : این کد تمامی ورودی هایی که در خصوصیت name آن ها کلمه man موجود می باشد را انتخاب میکند.
$('input[name*="man"]')
مثال:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
<script>$('input[name*="man"]').val('has man in it!');</script>
</body>
</html>
انتخاب عنصری که یک کلمه خاص در یک خصوصیت آن موجود نمیباشد : این کد تمامی ورودی هایی که در خصوصیت name آن ها کلمه man موجودنمی باشد را انتخاب میکند.
$('input[name~="man"]')
مثال:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input name="man-news" />
<input name="milk man" />
<input name="letterman2" />
<input name="newmilk" />
<script>$('input[name~="man"]').val('mr. man is in it!');</script>
</body>
</html>
انتخاب عنصری که در قسمت انتهایی مقدار یک خصوصیت آن یک کلمه خاص موجود باشد : این کد تمامی ورودی هایی که مقدار خصوصیت name آنها با letter تمام میشود را انتخاب میکند.
$('input[name$="letter"]')
مثال:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
<script>$('input[name$="letter"]').val('a letter');</script>
</body>
</html>
انتخاب عنصری که مقدار خصوصیت آن دقیقا برار مقدار وارد شده باشد : این کد تمامی ورودی هایی که مقدار خصوصیت value آنها برابر Hot Fuzz میباشد را انتخاب میکند.
$('input[value="Hot Fuzz"]')
مثال:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<label>
<input type="radio" name="newsletter" value="Hot Fuzz" />
<span>name?</span>
</label>
</div>
<div>
<label>
<input type="radio" name="newsletter" value="Cold Fusion" />
<span>value?</span>
</label>
</div>
<div>
<label>
<input type="radio" name="newsletter" value="Evil Plans" />
<span>value?</span>
</label>
</div>
<script>$('input[value="Hot Fuzz"]').next().text(" Hot Fuzz");</script>
</body>
</html>
انتخاب عنصری که مقدار خصوصیت آن برابر مقدار وارد شده نباشد : : این کد تمامی ورودی هایی که مقدار خصوصیت name آنها برابر newsletter نمی باشد را انتخاب میکند.
$('input[name!="newsletter"]')
مثال:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<input type="radio" name="newsletter" value="Hot Fuzz" />
<span>name is newsletter</span>
</div>
<div>
<input type="radio" value="Cold Fusion" />
<span>no name</span>
</div>
<div>
<input type="radio" name="accept" value="Evil Plans" />
<span>name is accept</span>
</div>
<script>$('input[name!="newsletter"]').next().append('<b>; not newsletter</b>');</script>
</body>
</html>
انتخاب عنصری که مقدار یک خصوصیت آن با کلمه خاصی شروع میشود : این کد تمامی ورودی هایی که مقدار خصوصیت name آنها با news شروع میشود را انتخاب میکند.
$('input[name^="news"]')
مثال:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
<script>$('input[name^="news"]').val('news here!');</script>
</body>
</html>
انتخاب تمامی button های موجود در صفحه : این کد تمامی button های موجود در صفحه را انتخا میکند.
$(":button")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
textarea { height:35px; }
div { color: red; }
fieldset { margin: 0; padding: 0; border-width: 0; }
.marked { background-color: yellow; border: 3px red solid; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<fieldset>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option<option/></select>
<textarea></textarea>
<button>Button</button>
</fieldset>
</form>
<div>
</div>
<script>
var input = $(":button").addClass("marked");
$("div").text( "For this type jQuery found " + input.length + "." );
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
انتخاب تمامی checkbox های موجود در صفحه : این کد تمامی checkbox های موجود در صفحه را انتخا میکند.
$(":checkbox")
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
textarea { height:25px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option<option/></select>
<textarea></textarea>
<button>Button</button>
</form>
<div>
</div>
<script>
var input = $("form input:checkbox").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
انتخاب همه checkbox هایی که check شده اند: این کد تمامی checkbox که check شده اند را انتخاب میکند.
$(":checked")
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<p>
<input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
<input type="checkbox" name="newsletter" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<input type="checkbox" name="newsletter" value="Yearly" />
</p>
</form>
<div></div>
<script>
function countChecked() {
var n = $("input:checked").length;
$("div").text(n + (n === 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checkbox").click(countChecked);
</script>
</body>
</html>
انتخاب عناصر داخلی یا فرزند (child) : این کد تمامی li هایی که داخل ul.topnav میباشند را انتخاب میکند.
$("ul.topnav > li")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:14px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<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>
</body>
</html>
انتخاب عنصر بر اساس خصوصیت class : این کد عنصری را که دارای خصوصیت class با نام myclass میباشد را انتخاب میکند.
$(".myClass")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
div,span {
width: 100px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<script>$(".myClass").css("border","3px solid red");</script>
</body>
</html>
انتخاب عنصر بر اساس data موجود درآن (contains) : این کد تمامی div هایی که کلمه john در آن ها باشد را انتخاب میکند.
$("div:contains('John')")
مثال:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$("div:contains('John')").css("text-decoration", "underline");
</script>
</body>
</html>
انتخاب بر اساس انتخا کننده های والد : چگونگی کار انتخاب کننده های والد این گونه هست که شما از کد زیر برای انتخاب input های موجود در فرم استفاده میکنید :
$("form input")
طبق کد بالا فقط input هایی که درون form هستند انتخاب میشوند. ممکن است داخل فرم یک div باشد که درون آن input وجود داشته باشد اما انتخاب نمیشود چون به صورت مستقیم داخل form نیست و به صورت فرزند یکی از فرزندان form میباشد.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:14px; }
form { border:2px green solid; padding:2px; margin:0;
background:#efe; }
div { color:red; }
fieldset { margin:1px; padding:3px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<div>Form is surrounded by the green outline</div>
<label>Child:</label>
<input name="name" />
<fieldset>
<label>Grandchild:</label>
<input name="newsletter" />
</fieldset>
</form>
Sibling to form: <input name="none" />
<script>$("form input").css("border", "2px dotted blue");</script>
</body>
</html>
انتخاب عناصر غیر فعال (برای فرم ها) : این کد تمامی ورودی های غیرفعال را انتخاب میکند.
$("input:disabled")
مثال:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
<script>$("input:disabled").val("this is it");</script>
</body>
</html>
انتخاب عناصر براساس نام خود آنها : این کد تمامی div های موجود در صفحه را انتخاب میکند.
$("div")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
div,span {
width: 60px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<script>$("div").css("border","9px solid red");</script>
</body>
</html>
انتخاب کردن عناصر خالی : این کد تمامی خانه های خالی جول را انتخاب میکند.
$("td:empty")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
td { text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td></td></tr>
<tr><td>TD #2</td><td></td></tr>
<tr><td></td><td>TD#5</td></tr>
</table>
<script>$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>
</body>
</html>
انتخاب عناصر فعال (برای فرم ها) : این کد تمامی ورودی های فعال را انتخاب میکند.
$("input:enabled")
مثال :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
<script>$("input:enabled").val("this is it");</script>
</body>
</html>
انتخاب بر اساس شماره عنصط مورد نظر : این کد سومین td از یک جدول را انتخاب میکند.
$("td:eq(2)")
مثال :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:eq(2)").css("color", "red");</script>
</body>
</html>
انتخاب عناصر که شماره آن ها زوج میباشد : این کد تمامی خانه های جدول را که شماره زوج دارند را انتخا ب میکند.
$("tr:even")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
table {
background:#eeeeee;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table border="1">
<tr><td>Row with Index #0</td></tr>
<tr><td>Row with Index #1</td></tr>
<tr><td>Row with Index #2</td></tr>
<tr><td>Row with Index #3</td></tr>
</table>
<script>$("tr:even").css("background-color", "#bbbbff");</script>
</body>
</html>
انتخاب ورودی های فایل : این کد تمام input هایی که از نوع file هستند را انتخاب میکند.
$("input:file")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
textarea { height:45px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option<option/></select>
<textarea></textarea>
<button>Button</button>
</form>
<div>
</div>
<script>
var input = $("input:file").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
انتخاب اول فرزند یک عنصر (first-child) : این کد اولین span موجود در div را انتخاب میکند.
$("div span:first-child")
همچنین میتوانید از nth-child(index) هم برای انتخاب عناصر فرزند استفاده کنید و به جای کلمه index شماره عنصر فرزند را وارد نمایید.
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
span { color:#008; }
span.sogreen { color:green; font-weight: bolder; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>
<div>
<span>Glen,</span>
<span>Tane,</span>
<span>Ralph</span>
</div>
<script>
$("div span:first-child")
.css("text-decoration", "underline")
.hover(function () {
$(this).addClass("sogreen");
}, function () {
$(this).removeClass("sogreen");
});
</script>
</body>
</html>
انتخاب اولین عنصر از یک عنصر خاص:این کد اولین tr موجود در جول را انتخاب میکند.
$("tr:first")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
td { color:blue; font-weight:bold; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
<script>$("tr:first").css("font-style", "italic");</script>
</body>
</html>
انتخاب کردن عناصری که focus شده اند : این کد تمامی ورودی هایی را که focus شده اند انتخاب میکند.
$("input:focus")
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
.focused {
background: #abcdef;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="content">
<input tabIndex="1">
<input tabIndex="2">
<select tabIndex="3">
<option>select menu</option>
</select>
<div tabIndex="4">
a div
</div>
</div>
<script>
$( "#content" ).delegate( "*", "focus blur", function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0);
});
</script>
</body>
</html>
خب دوستان منظر بخش دوم slector ها باشید.