前面的話

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

?

焦點狀態

:focus

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

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

style="width: 100%; height: 40px;" src="https://demo.xiaohuochai.site/jquery/selector/s28.html" frameborder="0" width="320" height="240">

　　對應于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>

style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/jquery/selector/s29.html" frameborder="0" width="320" height="240">

　　對應的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>

style="width: 100%; height: 70px;" src="https://demo.xiaohuochai.site/jquery/selector/s30.html" frameborder="0" width="320" height="240">

顯隱狀態

: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>

style="width: 100%; height: 90px;" src="https://demo.xiaohuochai.site/jquery/selector/s31.html" frameborder="0" width="320" height="240">

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。