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,这样操作的效果会是移上是黄色,点击一下只要鼠标不动就是红色,但是鼠标稍微移动,会立马变成黄色

来看一下代码正确的写法

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

看一下运行的效果

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

时间: 2024-10-18 11:30:44

Jquery 搭配 css 使用,简单有效的相关文章

用html+css+jQuery实现的一个简单的图片切换特效

这篇文章主要介绍了用html+css+js(jQuery)实现的一个简单的图片切换特效,需要的朋友可以参考下. 记得要引入一个jQuery库文件,可以是网上在线的,也可以是本地的,注意路径. 如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="htt

关于jquery的css的一些知识

Query实例CSS 样式表动态选择本实例主要说的还是jquery的选择器,关于jquery的css的一些知识用类似 $("li").css("cursor","pointer"); 这样的方式来确定具体的大家就看代码吧 css样式表一 body{background:#000;color:#fff}h1{font-size:14px;color:#fff;font-weight:bold;}p{font-size:12px;color:#fff

jquery的css详解(二)

jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ style: function( elem, name, value, extra ) { // Don't set styles on text and comment nodes if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ||

使用jquery实现的动画简单实例

使用jquery实现的动画简单实例:下面介绍一段利用jquery实现的动画效果,非常的简单,当然在实际项目中不可能有这么简单的应用,不过可供初学者参考一下大致的实现原理,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/"

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

1.新增html页面. 2.声明html5Document. 3.载入jQuery Mobile Css.jQuery与jQuery Mobile链接库. 4.使用jQuery Mobile定义的html标准.编写网页架构及内容. 向网页中添加jQuery Mobile,添加方法如下: 从CDN引用jQuery Mobile(推荐) <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jque

jQuery实现的动画简单介绍

jQuery实现的动画简单介绍:在网页制作中,使用jQuery可以轻松的实现简单的动画效果,比使用原生的js要简单不少,这是前端程序员的幸运,下面再来对此简单做一些介绍,寄希望能够给需要的朋友带来一定的帮助.一般来说animate()函数是最为常用的函数: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

解析JQuery中css()方法,获取元素CSS值之getComputedStyle方法(转载,写的很好)

一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法. 对于那些只想混口饭吃的人来讲,晓得CSS()如何使用就足够了.对于希望在JS道路上越走越远的来人说,简单了解一些JS库底层实现对自己的学习很有帮助.可能谈不上信手拈来的使用,至少对创造一些创意新颖的新技术拓宽了思路. jQuery为何受欢迎,其中原因之一就是方法名称比较短.好比打架一样,块头大的潜意识认为厉害,就不由得心生畏惧,退避三舍:小个子(

DIV+CSS 样式简单布局Tab 切换

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../JS/JQuery/jquery-1.9.1.js" type="text/javascript"></script> <style type="

nodejs + jquery Mobile构建一个简单的移动web (客户端)

前面展示了使用nodejs技术和jqm来搭建一个简单的支持CRUD操作应用的服务端部分(参见:nodejs + jquery Mobile构建一个简单的移动web(服务端) ),服务端采用nodejs技术实现,使用了mongodb数据库和轻量级web开发框架expressJS, 路由使用restful风格,所以你也可以使用restify来开发. 客户端的实现主要通过ajax调用实现.使用jade模板引擎. 客户端主要包含两个文件:layout.jade和index.jade 1. layout.