前端使用JS和JQuery显示隐藏标签

JavaScript013

前端使用JS和JQuery显示隐藏标签,第1张

一.使用JQuery使用

二.jquery判断元素是否隐藏

三.使用JS隐藏和显示

a.隐藏后释放占用的页面空间

通过设置display属性可以使div隐藏后释放占用的页面空间.

style="display: none"

b.隐藏后仍占有页面空间，显示空白

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白.

style="visibility: none"

$("#id").hide()

或者：

$("#id").css("display", "none")

需要先引入jquery

<script language="javascript" type="text/javascript" src="js/jquery-1.7.2.js"></script>

v-show是通过其值为true或者false来决定所包含的元素是否显示。举例如下：

HTML：

<div id="app"> <p v-show="ok">123</p></div>

JavaScript（Vue）：

var vm = new Vue({el: '#app',data: {ok: true}})

默认情况下运行结果会在页面上显示这个p元素，也就是会出现123字符串。

当我们在控制台中使用vm.ok = false将其值设置为false后。123字符串将立即消失，即p元素被隐藏了。