准备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. intellij idea svn使用一 导入、更新、提交、解决冲突

    大体上是转载,针对版本14有一些特殊的添加. 查看svn的资源库: 下面的多出了一个svn的窗口,在左边有加号可以添加一个svn的库 输入svn的地址,我用的是本地的测试,所以地址为svn://127 ...

  2. 那些容易遗忘的web前端问题

    背景: 年底将至,本人这只才出门的前端菜鸟,终于有空闲的时间来整理一下最近投简历时出现的问题.有的是经常使用但是没有仔细留意造成的:有的是个人认为根本没人使用而忽略的.为了下次不出现这种错误,进行一下 ...

  3. [Maven] Missing artifact

    今天从朋友那拷过来一个maven工程,eclipse中maven配置好了,maven仓库也配置完毕,但是一直报Missing artifact,然后开网执行maven update,下载完jar后,还 ...

  4. Python3.5:装饰器的使用

    在Python里面函数也是一个对象,而且函数对象可以被赋值给变量,所以,通过变量也能调用该函数,简单来说函数也是变量也可以作文函数的参数 >>> def funA(): ... pr ...

  5. 网关 php-cgi fastcgi phpfpm

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/88 关于网关的理解,一句话就是:作为一种翻译器,抽象出了一种能够 ...

  6. jquery提供的插件无法删除cookie的解决办法

    之前使用jquery的cookie插件提供的 $.cookie("key",null)方法删除cookie,结果发现代码中的cookie一直无法删除,导致后面的种种问题. 经过各种 ...

  7. Java基础之引用（String，char[]，Integer）总结

    1.String的引用: 下列代码执行后的结果为: public class Test { public static void main(String[] args) { StringBuffer  ...

  8. h5拖拽上传图片

    h5实现拖拽上传图片 本文将为大家介绍如何通过js实现拖拽上传图片. 首先我们要禁用调浏览器默认的拖拽事件: window.onload = function(){ //拖离 document.add ...

  9. Ajax 原生和jQuery的ajax用法

    https://www.cnblogs.com/jach/p/5709175.html form数据的序列化: $('#submit').click(function(){ $('#form').se ...

  10. C# 控件拖动

    https://zhidao.baidu.com/question/2116834779399609987.html [DllImport("user32.dll", EntryP ...