首頁 > web前端 > js教程 > jQuery可見性過濾器使用案例詳解

jQuery可見性過濾器使用案例詳解

php中世界最好的语言
發布: 2018-05-02 16:12:49
原創
1614 人瀏覽過

這次帶給大家jQuery可見性過濾器使用案例詳解,jQuery可見性過濾器使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

一 介紹

元素的可見狀態有兩種,分別是隱藏狀態和顯示狀態。可見性過濾器就是利用元素的可見狀態來匹配元素的。因此,可見性過濾器也有兩種,一種是匹配所有可見元素的:visible過濾器,另一種是匹配所有不可見元素的:hidden過濾器。

在套用:hidden過濾器時,display屬性是none以及input元素的type屬性為hidden的元素都會被配對到。

二套用

取得頁面上隱藏和顯示的input元素的值

三代碼

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<input type="text" value="显示的input元素">
<input type="text" value="我是不显示的input元素" style="display:none">
<input type="hidden" value="我是隐藏域">
<script type="text/javascript">
   $(document).ready(function() {
      var visibleVal = $("input:visible").val();     //取得显示的input的值
      var hiddenVal1 = $("input:hidden:eq(0)").val();   //取得隐藏的input的值
      var hiddenVal2 = $("input:hidden:eq(1)").val();   //取得隐藏的input的值
      alert(visibleVal+"\n\r"+hiddenVal1+"\n\r"+hiddenVal2);  //弹出取得的信息
   });
</script>
登入後複製

四運行效果

##我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

CDN優化首屏加載方法詳解

vue-cli有哪些方式縮短首屏加載時間

以上是jQuery可見性過濾器使用案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板