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>
分享到：
相关推荐
虽然没有具体的描述，但我们可以根据标题推测其内容可能涵盖了jQuery的基础知识以及一些实用技巧。 首先，jQuery的核心是选择器，它使得能够快速准确地定位到HTML文档中的元素。例如，使用`$("#id")`可以选择ID为...
Ajax（Asynchronous JavaScript and XML）和jQuery是实现这种效果的常用技术。Ajax可以实现页面的异步更新，而jQuery则提供了一套简洁易用的JavaScript库，使得DOM操作、事件处理和动画效果更为简便。 Ajax的核心...
**jQuery 演示：深入理解与应用** jQuery 是一个高效、简洁且功能...通过学习和实践jQuery，你可以构建更具交互性的网页应用，提升用户体验。这个"jQuerydemo"压缩包中的案例，将会是你学习和探索jQuery的宝贵资源。
你可以通过CDN（内容分发网络）链接或者下载本地副本。一个常用的jQuery CDN链接是： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来，我们需要创建HTML结构来表示进度条...
通过`$()`选择器可以轻松选取HTML元素，`$(element).click(function() {...})`可以绑定点击事件，`$(element).hide()`和`$(element).show()`用于元素的显示和隐藏，而`$(element).animate()`则实现了平滑的动画效果...
### jQuery常用效果详解 在日常的前端开发工作中，jQuery因其简单易用的特性而成为许多开发者的选择，尤其是在处理DOM操作、动画效果以及AJAX请求时。以下是对给定文件中的几个常见jQuery效果的深入解析： #### 1....
虽然这个示例是一个简单的轮播效果，但可以通过以下方式增强其功能： 1. **添加导航点**：为每个幻灯片创建一个小点，根据当前显示的幻灯片改变选中的状态。 2. **左右箭头控制**：添加左右箭头，允许用户手动切换...
本文将详细介绍jQuery的一些常用插件，这些插件极大地提升了开发效率，为网页添加了许多实用功能。 首先，`validate插件`是jQuery的一个强大验证工具，用于表单验证。它提供了一种灵活的方式来确保用户输入的数据...
### jQuery常用插件详解 #### 1. Horizontal Accordion: jQuery **知识点**: 水平方向折叠控件，基于jQuery开发，设计简洁，适用于快速实现网页中的菜单或信息展示板块。 #### 2. jQuery-HorizontalAccordion **...
这个"jQuery实现的3种常用网站图片轮播切换特效源码.zip"压缩包提供了三种不同的图片轮播切换效果实现，适用于各种类型的网站，如产品展示、新闻更新或个人作品集等。 首先，我们来深入了解一下jQuery的基础知识。...
然后，我们引入jQuery库，这可以通过在HTML头部添加CDN链接或者将jQuery.js文件下载到本地并引入。比如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 最后，编写jQuery...
在网页开发中，jQuery 和 JavaScript 是两种常用的前端技术，它们能帮助开发者轻松地实现各种交互效果，其中就包括屏幕蒙层效果。屏幕蒙层通常用于显示提示信息、加载动画、弹窗对话框等，它可以在页面上覆盖一层半...
加载完内容后，可以通过jQuery的.fadeIn()方法实现内容的淡入效果，让内容的替换看起来更加平滑和自然。 以上两种方法都体现了前端开发中异步数据交互的场景。第一种方法更侧重于代码的简化和快速实现，适用于结构...
标题中的“jquery走马灯轮换效果”是指在网页中使用jQuery库实现的一种动态展示内容的特效，通常用于图片轮播、广告展示等场景。走马灯（Carousel）是一种常见的用户体验设计元素，它允许用户通过点击或自动滚动来...
用户可以通过简单的API设置列定义、数据源和操作按钮，实现动态加载和数据操作。 3. **Layer**：Layer是一个轻量级的弹窗插件，它为网页添加了丰富的弹出层功能，如提示、警告、确认对话框、图片预览、iframe加载等...
本资源“jquery实现的三个非常简单且常用的幻灯片切换特效源码.zip”提供了一种利用jQuery实现幻灯片切换效果的方法，这对于网页设计和开发来说是一个极其实用的功能。 幻灯片切换效果是网页设计中的重要组成部分，...
在使用该插件时，首先需要在HTML文档中引入jQuery库（如`jquery.min.js`）和`jquery.easydropdown.min.js`文件，然后可以通过简单的jQuery代码将Select元素应用该插件。例如： ```html <script src="jquery.min.js...
"多种常用滚动效果jquery插件.zip" 提供了一系列的jQuery插件，可以帮助开发者实现各种创新的滚动动画，提升用户体验。这个压缩包的核心组件是kxbdSuperMarquee插件，它具备丰富的功能，如图片与文字的无缝滚动、...
下面我们将详细介绍jQuery中常见的操作实现方式以及一些常用的函数方法。 ### 选择器的使用 jQuery选择器允许开发者以一种简洁的语法选择页面中的元素。常用的几种选择器有： - `$("标签名")`：选取页面上所有指定...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery...