:hidden 選取不可見元素
:visible 選取到可見的元素
案例
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery/jquery-3.2.1.min.js"></script>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:800px;
height:500px;
margin:25px auto;
}
.box ul li{
float:left;
margin-right:25px;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>蘋果</li>
<li>小米</li>
<li>VIVO</li>
<li>OPOP</li>
<li>聯想</li>
<li>華為</li>
<li>其他品牌</li>
</ul>
<button>更多</button>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
var str=$(".box li:gt(3):not(:last)"); //隱藏掉2個元素
str.css("display","none");
$("button").click(function(){
// $(".box li").css("display","block");
if(str.is(":visible")){ //is為檢查元素內容
str.css("display","none");
$("button").text("更多");
}else{
str.css("display","block");
$("button").text("收起");
}
})
})
</script>
```
效果:


- JQuery選擇器
- 基本過濾選擇器
- 內容過濾器
- 可見性過濾器
- is篩選
- 屬性選擇器
- DOM查找
- JQuery 獨有選擇器(馬士兵)
- JQ操作CSS屬性常用寫法
- attr("")獲取標簽屬性值
- html方法與val方法操作表單文本
- 動畫特效
- 添加與刪除類名addClass()與removeClass()
- 查詢索引與遍歷index() each()
- 選擇獲取父級元素parent()
- 函數上下文$(this)
- 選擇器獲取兄弟級別元素siblings()
- 選擇器獲取子集元素children()
- animate 動畫函數
- animate 動畫函數解決積累問題stop(true)
- 獲取節點數據的width與height方法
- next()獲取匹配節點的下一個節點
- nextAll()獲取到匹配的節點,后面全部的姊妹節點
- prev()方法獲取某一個節點的前一個姐妹元素
- prevALL()方法獲取某一個節點的前所有的姐妹元素
- jquery中文官方網站