jQuery基本toggle() toggleClass() 使用

时间:2024-01-03 21:33:20

今天来学习一下jQuery的基本函数的使用,很简单。

首先写一个button做控制按钮,然后写一个div用按钮控制idv做动画,从而测试JQuery的动画函数

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>
div{
width: 100px;
height: 100px;
background: #FA8072;
}
div.bg{
background: #0A8CD2;
}
</style>
</head>
<body>
<button>按钮</button>
<div class="box bg red"></div>
</body>

接下来就是在script中使用JQuery函数了

toggle()

<script type="text/javascript">
$(function(){
$("button").click(function(){
$("div").hide();
})
})
</script>

上面的点击Button就会使div消失。

$("div").show();

使用show()方法的时候 点击button的时候会使div展现

但是jQuery对象.toggle() 语法同show()和hide()一样,而且会很简单,是show()和hide()的互斥方法。

$("div").toggle()

toggle与show()和hide()互斥,如果是隐藏的就显示如果是显示的就隐藏。

我们还可以给它加个过度

$("div").toggle(2000)

 toggleClass()

首先了解一下 addClass()和removeClass()

addClass()是给对象增加类,removeClass()是给对象移除类,使用方法如下:

$("button").click(function(e){
$("div").addClass("red");
})

再点击button的时候会给div对象加一个red类,同理removeClass也可以这么使用

jQuery对象.toggleClass("类名1 类名2.....",参数2)是addClass()和removeClass()的互斥方法。

如果jQuery对象上的某个类,想去掉此类toggleClass()可以模拟removeClass()

如果jQuery对象上没有某个类,想加上这个类,toggleClass可以模拟addClass()

参数2:可选 布尔值 是否增加类

如果为false 模拟removeClass()

如果为true 模拟addClass()

如果没有参数,当有这个类的时候会移除这个类,没有这个类的时候会增加这个类。