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

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

jQuery基本toggle() toggleClass() 使用的更多相关文章

  1. jQuery的toggle()的自动触发真烦人

    jQuery的toggle()方法应该是在鼠标点击后才会触发,现在的问题是在ready加载后就自动触发了,怎么回事呢? 答案是jQuery的版本问题,在1.9以后的版本toggle()就存在这个问题, ...

  2. 关于jQuery中toggle()函数的使用

    今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续 ...

  3. JQuery hover toggle事件使用

    JQuery hover toggle事件使用: <%@ page language="java" import="java.util.*" pageEn ...

  4. jQuery addClass removeClass toggleClass hasClass is(.class)用法

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

  5. 手动实现jQuery的toggle()效果

    有时候我们希望实现toggle()切换效果,但是切换的同时需要完成一些其他要做的事情.所以我们需要对jQuery的toggle()函数进行改造. 下面好test2()函数就是一个实现toggle效果的 ...

  6. Jquery 中toggle的用法举例

    toggle用法是使得两个以上的方法交替出现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  7. Jquery中toggle的用法详情

    jquery ----toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click事件 如果元素是可见的,切换为隐藏的:如果元素是隐藏 ...

  8. jQuery 效果 - toggle() 方法切换元素的可见状态。

    定义和用法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法 $(selector).toggle(speed,callback, ...

  9. jQuery使用toggle()方法进行显示隐藏

    转自:https://www.cnblogs.com/sosoft/p/3460556.html 这是一个示例: 1 <html> 2 <head> 3 <script ...

随机推荐

  1. Python爬虫--- 1.1请求库的安装与使用

    来说先说爬虫的原理:爬虫本质上是模拟人浏览信息的过程,只不过他通过计算机来达到快速抓取筛选信息的目的所以我们想要写一个爬虫,最基本的就是要将我们需要抓取信息的网页原原本本的抓取下来.这个时候就要用到请 ...

  2. 【Udacity】解决：字幕遮挡视频内容怎么办？Udacity字幕大小调整

    字幕有没有办法显示在最下方,否则把内容挡住了,根本看不清老师所指的内容 Chrome 的小插件,能方便地调节视频的字幕大小,譬如:Udacity 的学习视频字幕大小不能调节,有时候不想它占太多位置,而 ...

  3. python 案例一（电话铺）

    经过自己努力,做了一个简单的电话铺的录入和查询小程序,比较简单,喜欢的朋友可以练练手. 题目: 创建你自己的命令行 地址簿 程序.在这个程序中,你可以添加.修改.删除和搜索你的联系人(朋友.家人和同事 ...

  4. SQL Server 2017 on Linux

    此文转载,原文地址:https://docs.microsoft.com/zh-cn/sql/linux/sql-server-linux-whats-new CTP 2.0 The CTP 2.0 ...

  5. 修改Tomcat8w.exe可执行路径：Path to executable

    学习java web时,先下载了Tomcat8.5,在Eclipse中配置了Tomcat的相关环境后,出现了个别版本不兼容问题,就打算换成8.0版本.但是删除整个8.5的文件夹后,运行8.0bin中的 ...

  6. 使用redux开发的简单步骤

    一.安装redux包 npm install redux --save 二.根据APP数据结构或者后台请求的数据结构拟定state的大致结构. 可以把state写成一个对象字面量,放在reducer文 ...

  7. 代码注释模板（把内容保存为xml文件，导入eclipse中即可）

    <?xml version="1.0" encoding="UTF-8" standalone="no"?><templa ...

  8. 阅读MySQL文档第20章：存储程序和函数

    本文把阅读到的重点摘抄下来. 一.一个子程序要么是一个程序要么是一个函数.使用CALL语句来调用程序,程序只能用输出变量传回值.就像别其它函数调用一样,函数可以被从语句外调用(即通过引用函数名),函数 ...

  9. bzoj5152 [Wc2018]通道

    题目链接 正解:不会做. 写一个爬山算法就过官方数据了(逃 具体来说就是每次随机一个根,然后迭代找最长路的那个点. 多随机几次取$max$就行了.正解以后再补.. #include <bits/ ...

  10. miniui dataGrid detail grid

    <div >      <div id="vkhGrjx_grid" class="mini-datagrid" style="wi ...