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()

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

  • 相关阅读:
    【leetcode】Binary Search Tree Iterator
    【leetcode】Palindrome Partitioning II
    【leetcode】Best Time to Buy and Sell Stock III
    【leetcode】Best Time to Buy and Sell Stock II
    【leetcode】Longest Consecutive Sequence
    【leetcode】Factorial Trailing Zeroes
    【leetcode】Simplify Path
    【leetcode】Generate Parentheses
    【leetcode】Combination Sum II
    【leetcode】Combination Sum
  • 原文地址:https://www.cnblogs.com/chongzixing/p/9323219.html
Copyright © 2011-2022 走看看