第一个jQuery demo ，鼠标换过，变换图片。
<!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 language="JavaScript" src="jquery.js"></script>
</head>
<body>
<style type="text/css">
#research_main{
width:796px;
height:auto
}
#leftside{
float:left;
width:28%;
}
#middlesile{
float:left;
width:40%
}
#rightsile{
float:left;
width:28%
}
.singleone{
width:98%;
padding: 0px 5px;
}
.singleone h3{
font-size:13px;
color:#97cace;
margin:0px;
padding:0px;
background:url(yfheader_bg.jpg) no-repeat
}
.singleone p{
width:100%;
text-align:justify;
text-justify:inter-ideograph
}
#middlesile img{
border:none;
}
</style>
<script language="JavaScript">
$(document).ready(function(){ //页面加载后，加载的方法
$("#fristarea").mouseover(function(){
//document.getElementById("telogyimg").src ="changeone.jpg";//用js实现
$("#telogyimg").attr("src","changeone.jpg");
});
$("#vedioarea").mouseover(function(){
$("#telogyimg").attr("src","default.jpg");
});
});
</script>
<div id="research_main">
<div id="leftside">
<div class="singleone" id="fristarea">
<h3>视频芯片技术</h3>
<p id="txtdesc">针对芯片技术进行显示和处理，以高科技的发展适应现代的发展需要</p>
</div>
</div>
<div id="middlesile">
<img id="telogyimg" src="default.jpg"/>
</div>
<div id="rightsile">
<div class="singleone" id="vedioarea">
<h3>视频芯片技术</h3>
<p>针对芯片技术进行显示和处理，以高科技的发展适应现代的发展需要</p>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
6. **遍历和过滤**：`each()`函数遍历集合，`first()`和`last()`选取第一个或最后一个元素，`not()`和`:not()`用于排除匹配的元素，`has()`和`:has()`选取包含特定子元素的元素。 7. **插件开发**：jQuery的插件...
接下来，我们将通过一个简单的示例来演示如何创建一个jQuery Treeview。假设我们有一个名为`focus`的文件夹，里面包含以下HTML和JavaScript文件： - `index.html`：页面主体，包含HTML结构和jQuery脚本。 - `jquery...
1. 第一个 jQuery 程序 2. jQuery 对象和 DOM 对象 3. 基本选择器 4. 层次选择器 5. 基本过滤选择器 6. 内容过滤选择器 7. 可见性过滤选择器 8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小...
7. **插件扩展（Plugins）**：jQuery拥有丰富的第三方插件，如滑动插件、轮播图插件等，可以极大地丰富网页交互效果。例如，`$("#slider").slider()`可以应用滑动插件。 8. **版本与兼容性（Version and ...
本系列的多个Demo将深入展示jQuery如何实现各种常见和复杂的效果，帮助开发者快速掌握jQuery的核心技能。** 1. **DOM操作**： - `$(selector)`：jQuery的选择器用于选取HTML元素，例如`$("#myID")`选择ID为"myID...
《锋利的jQuery 第2版》是一本深入探讨jQuery库的书籍，旨在帮助读者掌握jQuery的核心功能和高级技巧。本书的"demo"部分是作者为了辅助理解书中理论知识而提供的实际示例代码，通过这些代码，读者可以更直观地学习...
"jQuery插件大全（内含Demo）"是一个宝贵的资源库，涵盖了网页开发所需的多种功能。通过学习和应用这些插件，开发者不仅可以快速构建功能丰富的网页，还能提升自身技能，更好地应对日益复杂和多变的前端开发需求。在...
在"jQuery_pagination分页demo"中，首页和末页按钮的设计是为了让用户快速跳转到数据的第一条和最后一条。这通常通过设置分页参数（如当前页数和每页显示条数）并发送请求到服务器来实现。而跳转页功能则允许用户...
第一部分：鼠标交互 1.1 Draggables:拖拽 所需文件： ui.mouse.js ui.draggable.js ui.draggable.ext.js 用法：文件载入后，可以拖拽class = "block"的层 $(document).ready(function(){ $(".block")....
这个压缩包包含的 "jQueryDemo" 文件可能包含了30个展示 jQuery 主要功能和应用场景的实例。这些示例可能涵盖以下方面： 1. **选择器示例**：演示如何使用基础和组合选择器，如 ID 选择器 (`#id`), 类选择器 (`....
在 "JqueryAPI +easyUI+demo" 中，你可能找到使用jQuery和EasyUI开发的实例，如创建响应式的表格，使用动画效果，以及实现与服务器的交互。这些示例可以帮助你更好地理解如何将这两个库结合使用，以构建功能丰富的...
jQuery Charisma UI 是一个强大且灵活的前端框架，用于构建具有吸引力和响应式的用户界面。这个演示Demo包含了9种不同的主题样式，每种样式都为开发者提供了丰富的UI控件和组件，使得创建专业且美观的Web应用程序变...
在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。jQuery的出现使得网页开发变得更加高效和简单。本篇将重点介绍jQuery中的一个经典功能——...
此外，为了优化用户体验，我们还可以添加一些附加功能，比如默认选中第一个省份和城市，或者在用户选择省份时自动清空已有的城市选项。这可以通过在JavaScript中设置选择器的`selected`属性，或者使用`empty()`方法...
"jQuery前台模板demo"就是这样一个实用的工具，它结合了jQuery的强大功能和易用性，为前端设计提供了一套便捷的解决方案。 **一、jQuery简介** jQuery是一款高效、简洁的JavaScript库，它简化了HTML文档遍历、事件...
要开始使用jQuery-webcam，第一步是引入必要的库文件。在HTML文件中，我们需要链接jQuery库和jQuery-webcam插件的JavaScript文件。同时，为了显示摄像头的预览图像，我们需要一个div元素作为容器： ```html <!...
这会先将元素向左移动100像素，然后在第一个动画完成后立即向上移动50像素。 在"jQuery+Animate+Demo+By_褪色"的项目中，开发者可能演示了各种Animate的用法，比如页面滚动、元素淡入淡出、滑动门效果等。通过查看...
本文将深入探讨一个名为"jquery炫酷demo"的资源包，其中包含了50个精心设计的jQuery示例，旨在帮助开发者快速理解和应用jQuery的各种功能，提升网页的交互性和视觉效果。 一、jQuery基础 jQuery的核心在于其简洁的...
jQuery，一个广泛使用的JavaScript库，提供了丰富的插件来简化这一任务。本篇将深入讲解"jQuery插件集之(分页插件)"，适合初学者入门学习。这个插件不仅提供了分页的基本功能，还具有易于理解和配置的特点，以及三种...