toggle是点击元素来实现切换,这个可以实现实现左右移动效果：
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="D:\test\jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").toggle(
function(){
$("div").animate({marginLeft:'500px'},"slow");
},function(){
$("div").animate({marginLeft:'0px'},"slow");
}
)
})
</script>
</head>
<body>
<p>hello</p>
<div>yyyyyyyyyyyyyyy</div>
</body>
</html>
===========================================
hover是鼠标移入移出元素来实现切换，这个可以实现背景色切换效果：
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="D:\test\jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function(){
$("div").css("background-color","red");
},function(){
$("div").css("background-color","");
})
})
</script>
</head>
<body>
<p>hello</p>
<div style=" font-size: 24px;">hhhhhhhhhhhh</div>
</body>
</html>
==============================================================
each可以对元素进行遍历，以下实现隔行变色的效果：
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="D:\test\jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hh").click(function(){
$("#uu").find("li").each(function(i){
if(i%2==0){
$(this).css("background-color","blue");
}else{
$(this).css("background-color","red");
}
})
})
})
</script>
</head>
<body>
<p id="hh" style="background-color:">嘿嘿</p>
<ul id="uu">
<li>aa</li>
<li>bb</li>
<li>vv</li>
<li>dd</li>
<li>ff</li>
</ul>
</body>
</html>
分享到：
相关推荐
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...
实现的原理很简单：鼠标悬停在图片上后，左侧的图片向上移动半个图片的距离(两个效果的图片事先做到一个图片上) 鼠标移走后图片恢复到原来位置。 但是最近好多懒人疑问想找这样的效果一直找不到，所以，...
在使用原生JavaScript开发过程中，存在许多问题，如查找元素的方法单一、遍历数组很麻烦，通常需要嵌套一大堆的for循环，有兼容性问题，实现简单的动画效果也很麻烦，以及代码冗余等问题。为了解决这些问题，提高...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...
51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图...
此外，jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样使得Web后端开发者如虎添翼，使用少量代码就可以实现复杂的功能。特别是新版本1.4.x的发布，jQuery在功能和性能方面都有质的提升，极大...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...
《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器，充分向读者演示了如何使用jQuery的各项技术，实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发，对最实用的...
使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）： 代码 var a = $("#cid"); var b = $("<p>hello</p>"); var c = document.createElement("table"); var tb = $（c）; 编辑本段代替body...
如果是静态的CSS，当然是可以直接写上去的，但有些界面是需要一些动态效果的，比如颜色变化，字体大小变化，甚至DIV 的隐藏于现实等，这些都需要用javascript 动态控制其CSS样式，下面就常用的jquery 控制 css 样式...
jQuery+PHP实现的抽奖程序，用简单的代码，实现常用的大转盘抽奖效果；用PHP使用整个程序更加动态
jQuery简单JS实现分页 jQuery进度条 jQuery录音插件 jQuery气泡跟随功能 jQuery上传压缩图片 jQuery社会华分享插件 jQuery生成带指定图像效果js二维码 jQuery在线问卷出题 jquery-自动关闭消息通知插件 Unicode转码...
本文实例讲述了jquery实现的Accordion折叠面板效果代码。分享给大家供大家参考。具体如下： 这是一款Accordion折叠面板，折叠菜单代码，简单Accordion效果，采用CSS与jQuery实现，鼠标点击后展开，再次点击后折叠...
jquery特效动画以及常用效果，案例展示这款jQuery按钮插件的使用方法也很简单，给按钮指定一个类，然后用一行JS代码初始化即可。
jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我自己写了一个可以兼容ie和ff的渐变动画, 使用大量javascript代码实现, 费心费力不说, 写完后没有太多帮助过一...
jQuery的存在，让学习前端开发的人感到前端越来越容易入门了，用简单的几行代码就可以实现需求，但是，你真的会用jQuery么，当代码运行后无法看到自己预期的效果，是不是觉得jQuery出了问题，其实，问题还是出在了...
Safari 2 3575ms 475ms 753% Opera 9.1 3196ms 326ms 980% Average improvement: 867% <br>下表为jQuery1.1.3与常用的一些JS库选择器的对比： Browser Prototype jQuery Mootools Ext Dojo ...
6.5 综合案例分析—用ajax实现新闻点评即时更新 6.5.1 需求分析 6.5.2 效果界面 6.5.3 功能实现 6.5.4 代码分析 6.6 本章小结 第7章 jquery常用插件 7.1 jquery插件概述 7.2 验证插件validate 7.3...
jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一。它不仅不会减少在JavaScript编码简单的技术开销，而且也使您的代码的跨浏览器兼容。我已经写了许多关于jQuery教程，这个时候，我也用这个简单的纯实现...