准备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. jdk动态代理举例

    JDK动态代理是基于接口的代理,下面举例说明 代理类:proxy,代理动作必须要基于一个proxy实例来执行 代理执行类:实现InvocationHandler,案例中是TestInvocationH ...

  2. [.Net跨平台]部署DTCMS到Jexus遇到的问题及解决思路--验证码

    上一篇博客我们已经基本完成了部署工作,目前发现了验证码出现500错误,分析其代码,我们可以看到验证码使用的是System.Drawing命名空间下的类库, GDI+ 位图,这个在肯定是平台相关的,所以 ...

  3. 《金领简历：敲开苹果、微软、谷歌的大门》【PDF】下载

    <金领简历:敲开苹果.微软.谷歌的大门>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196331 内容简介 <金领简历:敲开 ...

  4. AI 系列 总目录

    AI 系列 答应了园区大牛 张善友 要写AI 的系列博客,所以开始了AI 系列之旅. 一.四大平台系列(百度AI.阿里ET.腾讯.讯飞) 1.百度篇 (1) 百度OCR文字识别-身份证识别 (2) 基 ...

  5. Hive实际应用小结

    1.简介 Hive是数据仓库平台,构建在Hadoop之上用来处理结构化数据.Hive是一个SQL解析引擎,能够将SQL语句转化成MapReduce作业并在Hadoop上执行,从而使得查询和分析更加方便 ...

  6. 个人的MySql配置总结

    lower_case_table_names参数是用来设置MySQL是否让Schema和数据表大小写敏感,我测试的是在查询界面和MySQL控制台界面无法改变它的值,要在配置文件中改变(先关闭服务),一 ...

  7. mysql 先分组在排序

    mysql语句的语法模板: select distinct <select_list> from <left_table><join_type> join < ...

  8. JavaWeb之数据源连接池(3)---Tomcat

    此文续 <JavaWeb之数据源连接池(2)---C3P0>. Apache Tomcat作为一款JavaWeb服务器,内置了DBCP数据源连接池.在使用中,只要进行相应配置即可. 首先, ...

  9. Xamarin Android Gestures详解

    通过Gesture的监听我们将实现一个,手指的快速滑动显示坐标的变化,我们先来看一看效果图: 1.Android中手势交互的执行顺序 1.手指触碰屏幕时,触发MotionEvent事件! 2.该事件被 ...

  10. 学习Object.assign()

    Object.assign()用于将所有可枚举的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, ...source); var obj = { ...