深入學習jQuery選擇器系列第六篇——過濾選擇器之狀態選擇器 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　過濾選擇器的內容非常多，本文介紹過濾選擇器的最后一部分——狀態選擇器

焦點狀態

:focus

　　:focus選擇器選擇當前獲得焦點的元素

<div>
   <button>btn1</button>
   <button>btn2</button>
   <button>btn3</button>
</div>
<script>    
document.onclick = function(){
    $(':focus').css('color','red');
}
</script>

　　對應于CSS選擇器:focus

:focus{color:red}

　　如果用javascript實現類似效果

var tags = document.getElementsByTagName('*');
for(var i = 0; i < tags.length; i++){
    tags[i].onfocus = function(){
        this.style.color = 'red';
    }
}

哈希狀態

:target

　　:target選擇器用于匹配錨點對應的目標元素

<div>
    <a href="#test">錨點</a>
    <div id="test">變色</div>
</div>
<script>
window.location = '#test';
$(':target').css('color','red');
</script>

　　對應的CSS選擇器是:target選擇器，用于匹配錨點對應的目標元素

:target{color:red;}

動畫狀態

:animated

　　:animated選擇器選擇所有正在執行動畫效果的元素

<button id="btn">run</button>
<div id="mover" style="height:30px;width: 30px;background-color: green;"></div>
<script>
function animateIt() {
  $("#mover").slideToggle("slow", animateIt);
}
animateIt();
btn.onclick = function(){
     $("div:animated").css('background-color','red');
}
</script>

顯隱狀態

:hidden

　　:hidden選擇器選擇所有隱藏的元素，返回集合元素

隱藏

　　元素不可見并不是隱藏，元素被認為隱藏有以下幾種情況：

　　【1】display:none

　　【2】表單元素的type='hidden'

　　【3】寬度和高度都設置為0

　　【4】祖先元素是隱藏的

　　[注意]元素visibility: hidden或opacity: 0被認為是可見的，因為他們仍然占據布局空間

:visible

　　:visible選擇器選擇所有可見的元素，如果元素占據文檔一定的空間，元素被認為是可見的

　　[注意]隱藏元素上做動畫，元素被認為是可見的，直到動畫結束

<button id="btn1">$('#test :hidden')</button>
<button id="btn2">$('#test :visible')</button>
<button id="reset">還原</button>
<div id="test">
    <div>
        <div style="display:none;">hidden</div>  
        <div>visible</div> 
    </div>
    <form>
        <input type="hidden" />
        <input/>
    </form>   
</div>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){this.innerHTML = '有'+$('#test :hidden').length+'個隱藏元素'}
btn2.onclick = function(){this.innerHTML = '有'+$('#test :visible').length+'個可見元素'}
</script>