前几篇博客中讲了Jquery的基础和点击实际，下面来说一下和css搭配着来怎么做

还是和往常一样，举个例子

好几个方块，然后设置颜色

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

<style type="text/css">

.aa{ width:200px; height:200px; float:left;margin:5px; background-color:#039}

</style>

</head>

<body>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

</body>

</html>

顺便复习一下css的知识

给.aa加的样式   宽200像素  高200像素   向左流  距离5像素   颜色随便设置，这里设置的是蓝色

来看一下运行运行的效果

大概就这样，div设置几个都ok

让它执行每点击一块就变颜色

如果用Js来做的话，要写好多代码，所以选择Jquery方法来做

来看一下Jquery 代码部分

先找到.aa 点击加事件，里面的$(this)  是找到点击了谁，然后给他加css 背景色

来看一下运行的效果

点击哪块，哪块就会变为红色

但是得再让它变回来，所以还得加Jquery代码

只需要在它上面再加一句代码就可以了，两句代码组合起来的意思就是，当时点击谁谁背景色才会变为红的，其他的都是原先的背景色，这里要注意原来的背景色要和最上面设置的背景色一致

来看一下效果

点击哪块，哪块变为红的，当点其他块的时候，之前的那块又会变为原先的背景色

除了有点击事件，还有移上事件，也就是鼠标移上去就可以触发的事件

代码可以来看一下

暂时把点击代码部分注释了，。mousemove  移上的意思

只是换了一个代码而已，其他的代码都一样

有意向的可以做一下试试，移上事件就不看效果了，图片看不出来，背景色会跟着鼠标移动的位置改变

如果让两者同时实现的话，也可以

可能有人会想到这样操作

这样写操作起来会有BUG，这样操作的效果会是移上是黄色，点击一下只要鼠标不动就是红色，但是鼠标稍微移动，会立马变成黄色

来看一下代码正确的写法

先给点击事件加个属性标识，然后再在移上事件后面加句代码，属性筛选，根据该属性找到元素，设置背景颜色

看一下运行的效果

点击某一块会变成红色，鼠标移动除了被点击的那块，其他的会照样变成黄色

Jquery 搭配 css 使用，简单有效的更多相关文章

  1. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  2. jquery的css详解（二）

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  3. 用jQuery Mobile搭建一个简单的手机页面

    1.新增html页面. 2.声明html5Document. 3.载入jQuery Mobile Css.jQuery与jQuery Mobile链接库. 4.使用jQuery Mobile定义的ht ...

  4. Jquery easyui Tree的简单使用

    Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...

  5. jquery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  6. jQuery和CSS 3定制HTML 5视频播放器

    目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是 很值得开发者和用户关注的.现在,只需要有支持HTML5的浏览 ...

  7. jQ效果：jQuery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  8. 关于jquery的css的一些知识

    Query实例CSS 样式表动态选择本实例主要说的还是jquery的选择器,关于jquery的css的一些知识用类似 $("li").css("cursor", ...

  9. css实现简单的告警提示动画效果

    需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. 多线程的通信和同步(Java并发编程的艺术--笔记)

    1. 线程间的通信机制 线程之间通信机制有两种: 共享内存.消息传递.   2. Java并发 Java的并发采用的是共享内存模型,Java线程之间的通信总是隐式执行,通信的过程对于程序员来说是完全透 ...

  2. How those spring enable annotations work--转

    原文地址:http://blog.fawnanddoug.com/2012/08/how-those-spring-enable-annotations-work.html Spring's Java ...

  3. AFNetworking 3.0 源码解读（十）之 UIActivityIndicatorView/UIRefreshControl/UIImageView + AFNetworking

    我们应该看到过很多类似这样的例子:某个控件拥有加载网络图片的能力.但这究竟是怎么做到的呢?看完这篇文章就明白了. 前言 这篇我们会介绍 AFNetworking 中的3个UIKit中的分类.UIAct ...

  4. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  5. 【云知道】究极秒杀Loadrunner乱码

    Loadrunner乱码一击必杀 之前有介绍一些简单的针对Loadrunner脚本或者调试输出内容中乱码的一些设置,但是并没能完全解决一些小伙伴的问题,因为那些设置实在能力有限,还是有很多做不到的事情 ...

  6. 深入理解javascript的getTime方法

    1.理解getTime getTime() 方法返回一个时间的格林威治时间数值. 可以使用这个方法把一个日期时间赋值给另一个Date 对象. 语法: dateObj.getTime() 参数: 无. ...

  7. 推荐一个ASP.NET网站内容管理系统源码

    许多人都有各自的兴趣,如打球.踢毽子.看书.看电视.玩游戏等等....我近来迷上了猜灯谜,于是业余做了一个在线猜灯谜的网站:何问起谜语. 先出个谜语让你猜猜:不可缺一点(打一字).可以在线猜:http ...

  8. 利用for循环找出1000以内的质数

    var n=0; for(var i=2;i<=1000;i++){  var zhishu=true;  for(var j=2;j<i;j++){    if(i%j==0){    ...

  9. 设计模式之单例模式（Singleton）

    设计模式之单例模式(Singleton) 设计模式是前辈的一些经验总结之后的精髓,学习设计模式可以针对不同的问题给出更加优雅的解答 单例模式可分为俩种:懒汉模式和饿汉模式.俩种模式分别有不同的优势和缺 ...

  10. Android—关于自定义对话框的工具类

    开发中有很多地方会用到自定义对话框,为了避免不必要的城府代码,在此总结出一个工具类. 弹出对话框的地方很多,但是都大同小异,不同无非就是提示内容或者图片不同,下面这个类是将提示内容和图片放到了自定义函 ...