jQuery ?? ?? ???
???? ?? ??? ??? ?? ?? ????? ?? ?????. ?, ??? ?? ?? ?? ??? ????. ??? jQuery ????? ??? ? ?? ?? ??? ???? ??????. jQuery selector? ??? ??? CSS? ?? ??? ??? ??? ?????. ???? ?? ??(:)?? ?????. ??? ??? ??? ?? ????? jQuery?? ???? ??? ?? ????. ?? ???, ??? ???, ??? ???, ?? ???, ?? ?? ???, ?? ?? ?? ??etc . ??? "?? ?? ???"? ?? ?? ??????. "
jQuery Selector - Hierarchical Selector" ?? HTML? DOM ?? ?????? ?? ??? ?? ?? ???? ?? ???????. <form class="form" action="#" method="post">
<div class="form-item">
<label for="name">Name:</label>
<input name="name" type="text" class="form-text" id="name" />
</div>
<div class="form-item">
<label for="lastname">LastName:</label>
<input name="lastname" type="text" class="form-text" id="lastname" />
</div>
<div class="form-item">
<label for="password">Password:</label>
<input name="password" type="text" class="form-text" id="password" />
</div>
<fieldset>
<div class="form-item">
<label>Newsletter:</label>
<input name="newsletter" type="text" class="text-form" id="newsletter"/>
</div>
</fieldset>
<div class="form-item">
<input type="submit" value="submit" class="form-submit" id="submit" />
<input type="reset" value="reset" calss="form-submit" id="reset" />
</div>
??:
$('E:first') //其中E是DOM元素，:first是過濾
? ?? ?? ??
?? ?:?? ??
?:<script type="text/javascript"> $(document).ready(function(){
$('input:first').css('border','1px solid red');
});</script>
??? ???? ??? ?? ??? ??? ??? ?????.
??:
??:
$('E:last') //其中E是DOM元素，:last是過濾
??? ?? ??
?? ?:?? ??
Instance:<script type="text/javascript"> $(document).ready(function(){
$('input:last').css('border','1px solid red');
});</script>
???? ? ?? ?? ??? ??? ??? ?????.
?? :
?? :
$("E:not(selector)") //E表示有效果的DOM元素，而selector是用來篩選的選擇器
?? ?:
Collection ??Instance:
<script type="text/javascript"> $(document).ready(function(){
$('input:not(fieldset input)').css('border','1px solid red');
});</script>Function:
fieldset ??? ??? ??? ?? ?? ??? ??? ?? ????:
jQuery 1.3?? ????? ???? ??? ?? ? ???? ?? ??? ???? ??? ? ????. $("E:not(div,a , ?)").
4. ?? ?? ??? - :even
??:
$("E:even") //E指所有有效的DOM元素，:even是指元素的索引值為偶數(shù)??:
??? ?? ?? ??? ???????. ??? ?? 0?? ?????. ?? 0, 2, 4...
?? ?:
Collection ??
????:
<script type="text/javascript"> $(document).ready(function(){
$('input:even').css('border','1px solid red');
});</script>??:
???? ?? ??? ?? ?? ?? ?? ?? ??? ??? ?????. ?, ?? ??? ?? 0, 2, 4, 6 ?? ?? ??? ?? ??? ??? ?????.
5. ?? ?? ??? - :odd
:odd ?: Even? :even? ??? ?? ??? ?? :odd? ??? ?? ???? ?? ???? ??? ?? ?????.
??: ??
$("E:odd")??: ??? ?? ??? ?? ??? ???????. ??? ??? ?? 0, ? 1, 3, 5, 7...?? ?????.
?? ?:??? ??
????:<script type="text/javascript"> $(document).ready(function(){
$('input:odd').css('border','1px solid red');
});</script>??:
????? ?? ??? ?? ??? ??? ?????.
??:?? ? ??? ? ? ??? ??? ??? ?? ??? ???? ????. ?? ?? ? ??? 7?? ?? ??? ????. ??? ??? ????? ?? 1, 3, 5, 7? ? ?? ??? ?? ??? ?? ??? ? ???? 1? ? ??(??? ??? ?)?? ??? ?? ??? ?? ??? ?????. ??? ??? ???? ????. 3?? ?? 2, 4, 6? ?? ???? 1? ??? ?? ?? ?? ??? ?? ??? ?? ?????. ??? ?? ??? ? ???? ??????:
??? ????, ??? ?????
. (?? ??, ?? ?: ??? ??? ????, ??? ??? ?????) ?? ??? ?? ??? ??? ? ??? ??????. ?? ?? ??? ??? ? ? ????.
6. ?? ?? ??? - :eq(index)
??:
$("E:eq(index)") //其中E為有效DOM元素，:eq(index)是指定一個索引值元素??:
??? ?? index? ??? ??? ?????. ??? ???? 0
?? ?????. ?:?? ??
????:<script type="text/javascript"> $(document).ready(function(){
$('input:eq(1)').css('border','1px solid red');
});</script>??:
????? ??? ?? 1? ??? ??? ?? ??
??:
7. ?? ?? ??? - :gt(index)
??:
$("E:gt(index)") //其中E為有效DOM元素，:gt(index)是指定一個索引值元素??:
??? ?? ????? ? ??? ?????. ??? ???? 0
?? ?????. ???:
??? ??
????:
<script type="text/javascript"> $(document).ready(function(){
$('input:gt(1)').css('border','1px solid red');
});</script>??:
????? ?? ??? ?? 1?? ? ??? ??? ?? ??
??:
eight , ?? ?? ???——:lt(index)
??: ??
$("E:lt(index)") //其中E為有效DOM元素，:lt(index)是指定一個索引值元素??:
?? ?? index?? ?? ??? ?????. ??? ??? 0
Return ?:
??? ??
????:
<script type="text/javascript"> $(document).ready(function(){
$('input:lt(1)').css('border','1px solid red');
});</script>??:
????? ?? ??? ?? 1?? ?? ??? ??? ?? ??
??:
9. ?? ?? ??? - —:header
??:
$(":header") //:heaer是指頁面所有標題：h1~h6??:
???? ?? ?? ?? h1~h6? ??
?? ?:
?? ??
????:
<script type="text/javascript"> $(document).ready(function(){
$(':header').css('border','1px solid red');
});</script> ??:
???? ?? ?? ??? ??? ?????
? ???? ?? ??? ?? ? ?? ??? ?? ??? ????.
10. ?? ?? ??? - :animated
??:
$("E:animated") //E為任何有效的DOM元素，:animated為當前正在執(zhí)行動畫的元素??:
?? ?????? ?? ?? ?? ?? ??
?? ?:
?? ??
????:
<script type="text/javascript"> $(document).ready(function(){
$('input:not(:animated)').css('border','1px solid red');
});</script>??:
????? ?????? ???? ?? ?? ?? ??? ??? ??? ?????.
??:
