前面的話

　　過濾選擇器的內(nèi)容非常多，本文介紹過濾選擇器的最后一部分——狀態(tài)選擇器

?

焦點(diǎn)狀態(tài)

:focus

　　:focus選擇器選擇當(dāng)前獲得焦點(diǎn)的元素

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

　　對應(yīng)于CSS選擇器:focus

:focus{color:red}

　　如果用javascript實(shí)現(xiàn)類似效果

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

?

哈希狀態(tài)

:target

　　:target選擇器用于匹配錨點(diǎn)對應(yīng)的目標(biāo)元素

<div><a href="#test">錨點(diǎn)</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">

　　對應(yīng)的CSS選擇器是:target選擇器，用于匹配錨點(diǎn)對應(yīng)的目標(biāo)元素

:target{color:red;}

?

動畫狀態(tài)

:animated

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

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

顯隱狀態(tài)

:hidden

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

隱藏

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

　　【1】display:none

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

　　【3】寬度和高度都設(shè)置為0

　　【4】祖先元素是隱藏的

　　[注意]元素visibility: hidden或opacity: 0被認(rèn)為是可見的，因?yàn)樗麄內(nèi)匀徽紦?jù)布局空間

:visible

　　:visible選擇器選擇所有可見的元素，如果元素占據(jù)文檔一定的空間，元素被認(rèn)為是可見的

　　[注意]隱藏元素上做動畫，元素被認(rèn)為是可見的，直到動畫結(jié)束

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

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。