: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>
```
效果:
![](https://img.kancloud.cn/3f/f7/3ff733e6051c97fc6ae32390cc9c203f_1070x345.png)
![](https://img.kancloud.cn/92/56/925625437935d22d3933313a5675f1e0_1101x301.png)
- 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中文官方网站