سلام.
اين نكته جالب بود و باعث شد كه راجع به Selectorها در jquery مطلب بنويسم.چيزي كه آقاي
mehdi6755 گفت درست بود و ايشون مي گن براي selector از روش زير استفاده كنيم
$('#<%=TextBox1.ClientID%>')
كه بر اساس id گذاري يكتا استفاده ميشه ولي خوب بستگي به نام گذاري elemnt هاي صفحه تون داره كه از كدام روش استفاده كنيد يا با كدام راحتتر باشيد.
براي انتخاب كردن يك المنت صفحه با id ش :
<script>
$(document).ready(function(){
$("#myDiv").css("border","3px solid red");
});
</script>
<style>
div {
width: 90px;
height: 90px;
float:left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
</body>
</html>
اينجا 2 تا div داريم كه بر اساس id انتخاب مي شه.
انتخاب بر اساس element هاي صفحه
<script>
$(document).ready(function(){
$("div").css("border","3px solid red");
});
</script>
<style>
div,span {
width: 60px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
</body>
</html>
و اين باعث انتخاب كل div هاي صفحتون مي شه.
حالا يك چيز جالب در Selector بر اساس Class كه خيلي جالبه
<script>
$(document).ready(function(){
$(".myClass").css("border","3px solid red");
});
</script>
<style>
div,span {
width: 150px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
</body>
</html>
براي انتخاب كل المنت هاي صفحتون
<script>
$(document).ready(function(){
$("*").css("border","3px solid red");
});
</script>
<style>
div,span,p {
width: 150px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
</body>
</html>
اين يكي روش محشره مي تونيد چند المنت خاص با id خاص و يا نام كلاس خاص رو انتخاب كنيد
<script>
$(document).ready(function(){
$("div,span,p.myClass").css("border","3px solid red");
});
</script>
<style>
div,span,p {
width: 130px;
height: 60px;
float:left;
padding: 3px;
margin: 2px;
background-color: #EEEEEE;
font-size:14px;
}
</style>
</head>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
</body>
</html>
حالا اگر يك المنت درونش چند المنت ديگر تعريف شده باشد و حالت مادر و فرزندي داشته باشد
<script>
$(document).ready(function(){
$("#main > *").css("border", "3px double red");
});
</script>
<style>
body { font-size:14px; }
span#main { display:block; background:yellow; height:110px; }
button { display:block; float:left; margin:2px;
font-size:14px; }
div { width:90px; height:90px; margin:5px; float:left;
background:#bbf; font-weight:bold; }
div.mini { width:30px; height:30px; background:green; }
</style>
</head>
<body>
<span id="main">
<div></div>
<button>Child</button>
<div class="mini"></div>
<div>
<div class="mini"></div>
<div class="mini"></div>
</div>
<div><button>Grand</button></div>
<div><span>A Span <em>in</em> child</span></div>
<span>A Span in main</span>
</span>
</body>
</html>
روش بعدي روش فيلتر گذاريه كه اونم جالب و توي جداول بدرد مي خوره
<script>
$(document).ready(function(){
$("tr:first").css("font-style", "italic");
});
</script>
<style>
td { color:blue; font-weight:bold; }
</style>
</head>
<body>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
</body>
</html>
كه اولين tr رو انتخاب مي كنه آخرين tr
<script>
$(document).ready(function(){
$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
});
</script>
</head>
<body>
<table>
<tr><td>First Row</td></tr>
<tr><td>Middle Row</td></tr>
<tr><td>Last Row</td></tr>
</table>
</body>
</html>
اين يكي جالبه checkbox هايي كه انتخاب نشدن روش افكت مي ده و از كلمه كليدي not استفاده مي كنه
<script>
$(document).ready(function(){
$("input:not(:checked) + span").css("background-color", "yellow");
$("input").attr("disabled", "disabled");
});
</script>
</head>
<body>
<div>
<input type="checkbox" name="a" />
<span>Mary</span>
</div>
<div>
<input type="checkbox" name="b" />
<span>Paul</span>
</div>
<div>
<input type="checkbox" name="c" checked="checked" />
<span>Peter</span>
</div>
</body>
</html>
حالا اين روش انتخاب فيلتر گزاري كه مي تونيد بر اساس محتواي متني يك المنت انتخاب انجام بديد
<script>
$(document).ready(function(){
$("div:contains('hadi')").css("text-decoration", "underline");
});
</script>
</head>
<body>
<div>hadi</div>
<div>Sepide</div>
<div>Hadi gol agha</div>
<div>h.a..D.i
</body>
</html>
كه در div ها هر كدام شامل hadi بشن زيرش خط مي كشه.
------------------------------------------------------------------------------
با تشكر گل آقا