zoukankan      html  css  js  c++  java
  • jQuery基本toggle() toggleClass() 使用

    今天来学习一下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{
    				 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()

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

  • 相关阅读:
    第六周上机任务
    java第四次作业
    第二次上机练习
    第三周作业
    第一次上机作业
    计算机1802刘思源
    第五次上机作业
    第六周作业
    第四次上机作业
    第三次上机作业
  • 原文地址:https://www.cnblogs.com/chongzixing/p/9323219.html
Copyright © 2011-2022 走看看