Jquery 元素显示隐藏操作与判断

[TOC]

## 1. 控制样式属性

通过元素样式中的 `display` 属性来控制元素是否显示，当 `display = 'none'` 时元素处于隐藏状态

获取 `display` 值的方式

+ 借助 `Jquery` 的 `css()` 方法获取 `display` 的值
+ 通过 `js` 的 `document.getElementById().style.display` 获取`display` 的值

> Jquery 的 css() 方法和 js 中的 document.getElementById().style.display 可以获取值，也可以赋值

## 2. 利用Jquery方法

通过 Jquery 的 show() 和 hide() 方法控制元素的显示隐藏，这种方法操作的显示隐藏也可以借助上面的方法来判断元素显示状态，判断元素 display 属性

通过 Jquery 的 is() 方法判断元素的显示状态，使用 is() 方法时需要结合 `:hidden` (隐藏), `:visible` （显示）, is() 返回的是bool类型，当元素显示状态时，`is(":visible")`返回ture，否则为false。使用 `:hidden` 时同理

```HTML
<html>
<head>
    <meta charset="utf-8" />
    <title>Js判断元素的显示隐藏</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <div style="display:none" id="dis"></div>
    </div>
    <script type="text/javascript">
        $(function () {
            //使用jquery的show()和hide()方法也可以使用获取display的值来判断元素显示隐藏
            $("#dis").hide()
            dis = $("#dis").css("display")
            console.log(dis)  //结果none
            $("#dis").show()
            dis = $("#dis").css("display")
            console.log(dis)  //结果block
            //使用jquery的is()方法来判断元素的显示隐藏，返回的结果是bool值
            $("#dis").css("display", "none")
            dis = $("#dis").is(":hidden")
            console.log(dis)  //结果true
            $("#dis").hide()
            dis = $("#dis").is(":hidden")
            console.log(dis)  //结果true
            dis = $("#dis").is(":visible")
            console.log(dis)  //结果false
            $("#dis").show()
            dis = $("#dis").is(":visible")
            console.log(dis)  //结果true
        })
    </script>
</body>
</html>
```

> 说明：变更css的display值和使用show()、hide()效果是一样的，判断元素的显示隐藏可以直接过去css中display的值["block","none"]来判断，也可以使用jquery的is(":hidden")和is(":visible")方法[true,false]来判断