准备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. Eclipse 插件安装、升级和卸载的方法

    Eclipse 的插件可以装在内部,也可以装在外部,装在内部的方法很简单:把插件的features和plugins目录copy到eclipse的安装目录即可. eclipse和其插件升级比较频繁,用过 ...

  2. go基础之--函数和map

    在整理函数之前先整理一下关于指针 指针 普通类型变量存的就是值,也叫值类型.指针类型存的是地址,即指针的值是一个变量的地址.一个指针指示值所保存的位置,不是所有的值都有地址,但是所有的变量都有.使用指 ...

  3. 【java】method.invoke(方法底层所属对象/null，new Object[]{实际参数})

    反射调方法时无论是静态/非静态,固定/可变参数,都有Object对象数组对参数进行包装. package com.tn.clas; import java.lang.reflect.Method; i ...

  4. Xcode极速代码，征服Xcode

    当谈论到iOS开发工具时,有一个肯定是所有iOS开发者都熟悉的,那就是Xcode.Xcode是使所有令人赞叹的iOS app成为可能的驱动力. Xcode能帮助我们完成非常多的事情,但是这也有点让人头 ...

  5. nginx编译参数的内容

    最近公司安排我安装几台云服务器环境 采用nginx做反向代理: 查了一下官方文档,参数比较多,很多在上线后 可能才知道注意一下的. 编译安装nginx的话 需要安装一些前置组件: 1.gcc环境:用于 ...

  6. 谈谈CommonsChunkPlugin抽取公共模块

    引言 webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍: 该插件是we ...

  7. 506. Relative Ranks

    Given scores of N athletes, find their relative ranks and the people with the top three highest scor ...

  8. Docker（一）：Docker安装

    简介:Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).bare met ...

  9. Golang文件IO 一

    Golang文件IO 一 文件IO编程最基本.最常用的就属读写文件操作了.ioutil包实现了一些IO实用功能,其中就包括非常简捷.好用的文件读取功能. ioutil包有7个函数1个变量: var D ...

  10. 《精通Spring 4.X企业应用开发实战》读书笔记1-1（IoC容器和Bean）

    很长一段时间关注在Java Web开发的方向上,提及到Jave Web开发就绕不开Spring全家桶系列,使用面向百度,谷歌的编程方法能够完成大部分的工作.但是这种不系统的了解总觉得自己的知识有所欠缺 ...