准备jquery-3.2.1.js文件
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c11 {

            height: 100px;

            width: 100px;

            border-radius: 50%;

            border: 1px solid #cccccc;

            display: inline-block;

        }

        .c12 {

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="c11"></div>

<button id="switch" class="btn btn-default">开关</button>

<script src="jquery-3.2.1.js"></script>

<script>

    // id选择器

//    $("#i1")

//    $("#switch")[0].onclick = function () {

//        ....

//    }

//jQuery绑定事件

    $("#switch").on("click", function () {

        // 找灯泡

        $(".c11").toggleClass("c12");

    })

</script>

</body>

</html>

jQuery之开关灯示例的更多相关文章

  1. Jquery cookie操作示例，写入cookie，读取cookie，删除cookie

    <html> <head> <meta name="viewport" content="width=device-width" ...

  2. jquery Ajax请求示例，jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  3. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  4. jQuery ajax常用示例

    总结一下jQuery ajax常用示例 $.ajax({ type: "post", //类型get,post url: urls, //链接地址 data:{"id&q ...

  5. Jquery DataTables相关示例

    一.Jquery-DataTables DataTables 是jquery的一个开源的插件.它具有高度灵活的特性,基于渐进增强的基础,可以为任何表格添加交互.它特性如下: 提供分页,搜索和多列排序: ...

  6. jQuery简单导航示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery Ajax -附示例

    jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery 不是生产者,而是大自然搬运工. jQuery Aja ...

  8. jQuery+pjax简单示例汇总

    pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮. ajax缺点是破坏了浏览器的前进后退,因为ajax的请求 ...

  9. jquery datatable真实示例

    1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodin ...

随机推荐

  1. Python 项目实践二（生成数据）第一篇

    上面那个小游戏教程写不下去了,以后再写吧,今天学点新东西,了解的越多,发现python越强大啊! 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关,而数据挖掘指的是使用代码来探索数据集的 ...

  2. 写给自己的web总结——关于html的知识总结

    相信每个前端工程师初识前端之时,最先接触的都是html吧! html的全称是hyperText markup language, 超文本标记语言,在网页中所有的文字,图片,架构等都是由html来编写的 ...

  3. canvas 从初级到XX 2# 让我们在之前的基础之上，再迈进一步吧 [中级向] （上）

    还是老样子,先啰嗦一点前言. 最近各种事务缠身,所以也就隔了比较长的时间才开始码这篇文.希望不会这么快就过气. 好了,接下来就开始码代码.(写到中途,突然感觉到的.本篇设计大量初中物理知识,请怀念的往 ...

  4. iOS 网络监听、判断

    一 网络监听 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary ...

  5. spring-struts2-mybatis-maven 转账开发记录

          最近写一个转账需求向外提供接口,用的是spring+struts2+maven 方式,数据库是oracle.我先新建maven类,然后引入spring相关jar包和mybatis包,配置s ...

  6. 计算机和HMI设备通信之程序上下载

    1.传送模式 2.串行接口传送HMI,软件采用Wincc flexable smart v3 3.设置HMI设备,给HMI设备上电 打开控制面板,双击Transfer 使能Enable Channel ...

  7. ArcGIS 网络分析[8.4] 资料4 聚合——创建及打开网络数据集的类实现

    这篇是对前三篇的总结,因为网络数据集涉及的"点"太多了,我只能挑重点来设置,大家明白框架后可以自行寻求帮助文档添加功能. 我以C#类的形式给出,这个类包含很多种方法,因为本人的C# ...

  8. 9.11 test

    题面.pdf T1:通过打表发现,从一个点出发只有距离为1,2,3,5,6,9,10,13,17的点才不能到达: 那么我们转移的时候只有距离在20以内才不一定能直接转移,那么我们离散化之后; 对于每一 ...

  9. websocket教程（一） 非常有趣的理解websocket

    一.websocket与http WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算) 首先HTTP有 1 ...

  10. Golang丰富的I/O 二----cgo版Hello World

    h1 { margin-top: 0.6cm; margin-bottom: 0.58cm; direction: ltr; color: #000000; line-height: 200%; te ...