Jquery 搭配 css 使用，简单有效
前几篇博客中讲了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 使用，简单有效的更多相关文章
- 利用HTML5与jQuery技术创建一个简单的自动表单完成
来源:GBin1.com 在线演示 在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...
- jquery的css详解（二）
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- 用jQuery Mobile搭建一个简单的手机页面
1.新增html页面. 2.声明html5Document. 3.载入jQuery Mobile Css.jQuery与jQuery Mobile链接库. 4.使用jQuery Mobile定义的ht ...
- Jquery easyui Tree的简单使用
Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...
- jquery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- jQuery和CSS 3定制HTML 5视频播放器
目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是 很值得开发者和用户关注的.现在,只需要有支持HTML5的浏览 ...
- jQ效果：jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- 关于jquery的css的一些知识
Query实例CSS 样式表动态选择本实例主要说的还是jquery的选择器,关于jquery的css的一些知识用类似 $("li").css("cursor", ...
- css实现简单的告警提示动画效果
需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- js复杂对象和简单对象的简单转化
var course = { teacher :{ teacherId:001, teacherName:"王" }, course : { courseId : 120, cou ...
- Python列表去重
标题有语病,其实是这样的: 假设有两个列表 : L1 = [1,2,3,4] ; L2 = [1,2,5,6] 然后去掉L1中包含的L2的元素 直接这样当然是不行的: def removeExists ...
- UWP开发之ORM实践：如何使用Entity Framework Core做SQLite数据持久层？
选择SQLite的理由 在做UWP开发的时候我们首选的本地数据库一般都是Sqlite,我以前也不知道为啥?后来仔细研究了一下也是有原因的: 1,微软做的UWP应用大部分也是用Sqlite.或者说是微软 ...
- Win.ini和注册表的读取写入
最近在做打包的工作,应用程序的配置信息可以放在注册表文件中,但是在以前的16位操作系统下,配置信息放在Win.ini文件中.下面介绍一下Win.ini文件的读写方法和注册表的编程. 先介绍下Win.i ...
- Smarty的基本使用与总结
含义: Smarty是PHP的一个引擎模板,可以更好的进行逻辑与显示的分离,即我们常说的MVC,这个引擎的作用就是将C分离出来. 环境需求:PHP5.2或者更高版本 我使用的环境是:PHP5.3,wi ...
- 简析服务端通过GT导入SHP至PG的方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 项目中需要在浏览器端直接上传SHP后服务端进行数据的自动入PG ...
- 【置顶】CoreCLR系列随笔
CoreCLR配置系列 在Windows上编译和调试CoreCLR GC探索系列 C++随笔:.NET CoreCLR之GC探索(1) C++随笔:.NET CoreCLR之GC探索(2) C++随笔 ...
- c# Enumerable中Aggregate和Join的使用
参考页面: http://www.yuanjiaocheng.net/ASPNET-CORE/asp.net-core-environment.html http://www.yuanjiaochen ...
- 使用JavaScript为一张图片设置备选路径
在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径.这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验. 注意到网页 ...
- windows 7（32/64位）GHO安装指南（U盘制作篇）~
本篇接着上篇的介绍,为同学讲解U盘启动盘的制作.虽然本篇大白菜的官网上也有类似的教程,但是为了完整性,我将在这里为大家细细的讲解.在这里说一下,系统包和软件包的下载大家可以自行下载,很简单的,小主就不 ...