Jquery学习（四）—Jquery 常用事件方法实例效果
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function() {
//当输入域获取焦点 (focus) 时改变其颜色
$("#input1").focus(function() {
$("#input1").css("background-color", "#FFFFCC");
});
//当输入域失去焦点 (blur) 时改变其颜色
$("#input1").blur(function() {
$("#input1").css("background-color", "#D6D6FF");
});
//当输入域发生变化 、被操作时改变其颜色
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
//当双击按钮时，隐藏或显示元素：dblclick
$("#button1").dblclick(function(){
$("#p1").slideToggle(1000,function(){
alert("双击按钮 隐藏 或显示结束了");
});
});
//当按下按键时，改变文本域的颜色keydown() keyup()
$("#input2").keydown(function(){
$("#input2").css("background-color","#FFFFCC");
});
//当键盘弹起
$("#input2").keyup(function(){
$("#input2").css("background-color","#D6D6FF");
});
//当按下鼠标按钮时，隐藏或显示元素
$("#button2").mousedown(function(){
$("#p2").slideToggle(1000,function(){
alert("鼠标事件执行结束了...")
});
});
//当鼠标指针进入（穿过）元素时，改变元素的背景色
$("#p3").mouseenter(function(){
$("#p3").css("background-color","yellow");
});
//鼠标离开时
$("#p3").mouseleave(function(){
$("#p3").css("background-color","#E9E9E4");
});
//获得鼠标指针在页面中的位置
$(document).mousemove(function(e){
$("#span1").text(e.pageX + ", " + e.pageY);
});
});
</script>
</head>
<body>
<h2>jQuery 事件</h2>
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
INPUT NAME:
<input type="text" id="input1"/>
<p>在某个域被使用或改变时，它会改变颜色</p>
INPUT NAME:
<input type="text" class="field"/>
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
<p id="p1">This is a paragraph.</p>
<button id="button1">Double-click to Toggle</button><br>
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
INPUT NAME:
<input type="text" id="input2"/><p></p>
<p id="p2">This is a paragraph.</p>
<button id="button2">mousedown to Toggle</button><br>
<p style="background-color:#E9E9E4" id="p3">请把鼠标指针移动到这个段落上。</p>
<p>鼠标位于坐标： <span id="span1"></span>.</p>
相关推荐
Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与...
50 个jQuery 实例，包含各种常用网页效果：选项卡切换，手风琴效果，相片画廊，验证规则，表格等。
**jQuery学习实例详解** jQuery，一个轻量级的JavaScript库，因其简洁的API和强大的功能，使得网页开发变得更加高效和简单。本实例集合是专为初学者设计的，旨在帮助理解并掌握jQuery的核心概念和常见用法。 1. **...
通过这个实例，我们能够了解jQuery如何实现动态效果，并且掌握如何使用鼠标事件和动画方法来丰富我们的Web应用交互体验。对于学习和使用jQuery的开发者来说，这是一个实用且简洁的例子，可以作为进一步探索jQuery...
这个资源 可以使你全面的掌握 JQuery，里面有我告诉你如何学习Jquery如何使用Jquery，里面还有Jquery的例子，还有Jquery的拓展UI，很好很强大的！！！这绝对是我精心压缩的一个资源，如果没学会，可以给我留言，然后...
### 七、jQuery实例 实例是学习jQuery的最佳方式。通过实际操作，你可以更好地理解和应用jQuery的各种功能。在这个压缩包中，你将找到各种jQuery的实例代码，涵盖了上述的所有知识点，包括选择器的使用、DOM操作的...
`js-0127-jQuery流行广告效果.rar` 可能包含了一些使用jQuery实现的动态广告效果实例，这对于学习如何利用jQuery创建吸引人的网页元素很有帮助。 `jquery手册.rar` 又一份jQuery的手册，可能包含不同的讲解角度或...
《jQuery经典实例60例-动画实例》是学习jQuery库中动画效果的宝贵资源，它涵盖了从基础到高级的各种动画技巧。jQuery库以其简洁、强大的API而闻名，尤其是在处理页面元素的动态展示和动画效果方面。以下将详细介绍...
总结来说，"jQuery实例演示及动态效果"是一份全面的jQuery学习资源，涵盖了基础操作到高级应用，适合初学者和有一定经验的开发者进行实践和提升。通过这些实例，学习者能够深入理解jQuery的强大功能，提升网页动态...
《jQuery学习手册及实例练习》是一份全面介绍jQuery库的学习资源，旨在帮助开发者深入理解和熟练运用这个强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务，使得前端开发变得更加...
本资源"35个经典Jquery实例方法"为我们提供了一个实用的工具集，包含了开发者在日常工作中可能会用到的jQuery核心功能。下面，我们将详细探讨这些实例方法，帮助你更好地理解和运用jQuery。 1. **选择器（Selectors...
总结来说，jQuery的学习包括理解选择器、DOM操作、事件处理、动画制作和Ajax交互等核心概念。通过不断的实践和应用，初学者可以迅速提升技能，成为一名熟练的jQuery开发者。这份"jQuery学习实例和心得"资源将是你...
JQuery应用实例学习(强烈推荐)---无私奉献了！！
这份压缩包包含了丰富的jQuery实例代码，旨在帮助初学者快速掌握jQuery的核心功能和实用技巧，同时也可作为进阶开发者巩固和深化jQuery知识的工具。 jQuery是一个高效、简洁的JavaScript库，它极大地简化了HTML文档...
jQuery的`mouseover`和`mouseout`事件以及DOM操作可以协助实现这一效果。 5. **透明字母**：这是一种视觉效果，使得文本的每个字母具有透明度变化。这可以通过jQuery的动画函数`fadeIn`和`fadeOut`或者CSS3的`...
五、jQuery实例 50个JS实例则涵盖了从简单到复杂的应用场景，如表单验证、图片轮播、下拉菜单、时间日期插件、拖放功能、Ajax请求等。这些实例可以帮助学习者将理论知识转化为实际技能，理解如何将jQuery应用于实际...
在jQuery的学习过程中，首先需要理解jQuery的核心概念，包括选择器（Selector）、DOM操作、事件处理和动画效果。选择器是jQuery的灵魂，它使得选取DOM元素变得极其简单，例如`$("#id")`选取ID为"id"的元素，`$("....
《锋利的jQuery实例》是人民邮电出版社出版的一本深入浅出的jQuery教程，它以其丰富的实践案例，详尽地介绍了jQuery库的使用方法和技巧。jQuery是一个广泛应用于Web开发的JavaScript库，其核心特性在于它的轻量级...
**jQuery 实例教程** ...通过这个jQuery实例教程，你将能够熟练地运用jQuery进行网页开发，无论是简单的交互还是复杂的动态效果，都能轻松应对。实践是检验理解的最好方式，所以不妨现在就动手尝试一下吧！
资源中包含的"jquery实例下载.rar"文件提供了更多的jQuery实践案例，涵盖了各种常见的网页交互功能，如下拉菜单、滑动效果、表单验证等，这些都是现代网页开发不可或缺的部分。 "实例"文件夹可能包含了更多的实战...