<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>jQuery.jsp</title>
<style type="text/css">
.eventr{
background-color:#555666
}
.oddtr{
background-color:#111222
}
</style>
<script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery-hello.js"></script>
<script type="text/javascript">
$(function(){
$("#p1").mouseover(function(){
//alert($(this).text());
});
});
</script>
<script type="text/javascript">
$(function(){
$("#biggerBtn").click(function(){
var fontSize = $("#data").css("font-size");
$("#data").css("font-size", parseInt(fontSize) + 5 + "px");
});
$("#smallerBtn").click(function(){
var fontSize = $("#data").css("font-size");
$("#data").css("font-size", parseInt(fontSize) - 5 + "px");
});
});
$(function(){
//通过css函数控制样式
$("#tb1 tr:even").css("background", "#FFF999");
$("#tb1 tr:odd").css("background", "#999FFF");
//通过样式表控制样式
$("#tb2 tr:even").addClass("eventr");
$("#tb2 tr:odd").addClass("oddtr");
});
$(function(){
$("#hiddenBtn").click(function(){
$("#p2").fadeOut(300);
});
$("#showBtn").click(function(){
$("#p2").fadeIn(300);
});
});
</script>
<script type="text/javascript">
$(function(){
$("#span1").myHello();
});
</script>
<script type="text/javascript">
$(function(){
var pAry = $("p");
var p = pAry[1];
alert(p.innerHTML);
});
</script>
<style type="text/css">
.normalStyle{
background:#C3D9FF;
}
.alterStyle{
background:#DDF8CC;
}
.h{
background:#FCCEBA;
border:solid 1px #DDD000;
}
.button{
background:#FAFAA0;
border:solid 1px #000DDD;
padding:4px;
}
</style>
<script type="text/javascript">
$(function(){
$("li").addClass("normalStyle");//标签选择器
$(".alter").addClass("alterStyle");//类选择器
$("h1,h2,h3").addClass("h");//群组选择器
$("#btn").addClass("button");//id选择器
});
</script>
<script type="text/javascript">
$(function(){
//层次选择器
$("ul li").css("color","#FFDDEE");//选择<ul>里的所有<li>元素
$("div>span").css("color","#AABBCC");//选择<div>元素下的<span>元素
$("div+span").css("color","#CCDDEE");//选择紧接在div元素后的span元素
$("div~span").css("background","#FFCCDD");//选择div元素之后的所有span元素
});
</script>
<script type="text/javascript">
$(function(){
var btns = $("input[type='button']:first");
alert(btns[0].value);
});
$(function(){
var ps = $("p:parent");
alert(ps[0].value);
});
</script>
</head>
<body>
<p/>
<p id="p1">Hello jQuery</p>
<p id="data">实力决定尊严</p>
<input type="button" id="biggerBtn" value="放大"/>
<input type="button" id="smallerBtn" value="缩小"/>
<br/>
<table id="tb1">
<tr>
<td>忘掉过去的事</td>
</tr>
<tr>
<td>尽量去想开心的事</td>
</tr>
<tr>
<td>忘掉过去的事</td>
</tr>
<tr>
<td>尽量去想开心的事</td>
</tr>
</table>
<hr/>
<table id="tb2">
<tr>
<td>我会很快成为一个内心强大的人</td>
</tr>
<tr>
<td>我会很快成为一个思维缜密的人</td>
</tr>
</table>
<hr/>
<p id="p2">极度关心自己的每一点利益，不允许它受到任何侵害！</p>
<input type="button" id="hiddenBtn" value="隐藏"/>
<input type="button" id="showBtn" value="显示"/>
<br/>
<span id="span1">你好！</span>
<hr/>
<ul>
<li>选项一</li>
<li class="alter">选项二</li>
<li>选项三</li>
<li class="alter">选项四</li>
</ul>
<h1>标题一</h1>
<h1>标题二</h1>
<h1>标题三</h1>
<input type="button" id="btn" value="按钮"/>
<hr/>
<div>
<span>span1</span>
</div>
<span>span2</span>
<span>span3</span>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</body>
</html>
分享到：
相关推荐
这个【原创】的Jquery 示例代码集合涵盖了基础使用方法和AJAX应用，对于初学者和开发者来说是极好的学习资源。 首先，jQuery的基本使用方法包括以下几个方面： 1. **选择器**：jQuery提供了丰富的选择器，如ID选择...
通过这份《JQuery示例大全》，无论是初学者还是经验丰富的开发者，都能深入理解并熟练掌握jQuery的各种技巧，从而提升网页开发的效率和质量。每一个示例都是一个实际应用的缩影，可以帮助你在实际项目中快速解决问题...
这个“jQuery 示例代码”压缩包提供了一系列 JavaScript 代码片段，旨在帮助初学者和有经验的开发者更好地理解和应用 jQuery。** 在 JavaScript 中，jQuery 提供了一种更简洁、更高效的语法来处理 DOM 操作、事件...
在这个"最简单的 jQuery 示例 - 拼猫游戏"中，我们可以深入理解 jQuery 的基本用法，并通过一个实际的游戏应用来实践这些知识。 首先，jQuery 的核心概念是选择器（Selectors），它允许我们轻松地选取 HTML 元素。...
"jQuery示例"文件夹则可能包含使用jQuery实现的各种功能示例，如简单的DOM操作、事件监听、动画效果和Ajax请求。通过这些示例，你可以学习如何有效地利用jQuery提高开发效率。 学习和实践这些示例，对于提升...
"starterkit-JQuery示例"旨在帮助初学者快速掌握jQuery的基本用法，通过实例来理解其核心功能。 1. **选择器**: jQuery的核心在于选择DOM元素，如`$("#id")`选择ID为"id"的元素，`$(".class")`选择所有class为...
这个“自己写的jQuery示例”压缩包显然包含了作者个人编写的jQuery代码实例，旨在帮助学习者理解并应用jQuery的核心功能。下面将详细讨论这些知识点。 首先，我们来看“Ajax各种请求方式”。Ajax（Asynchronous ...
以下是一些简单的 jQuery 代码示例，展示了其基本用法： 1. **选择元素**： ```javascript // 选取 id 为 "myElement" 的元素 var myElement = $('#myElement'); ``` 2. **事件绑定**： ```javascript // 当按钮被...
在"50个jQuery示例demo"中，我们可以深入学习和理解jQuery的各种功能和用法。 1. DOM操作：jQuery 提供了简便的方法来选择、遍历和操作HTML元素。例如，`$("#id")` 用于选取ID为指定值的元素，`$(".class")` 用于...
《精彩绝伦的JQuery示例源代码》这个压缩包文件包含了从《精彩绝伦的JQuery》一书中提取的所有示例的源代码，旨在帮助读者深入理解和掌握JQuery这门强大的JavaScript库。JQuery是一个广泛使用的开源库，它简化了...
PhoneGap+jQuery示例项目是一个将这两者结合的实践应用，旨在帮助开发者了解如何使用PhoneGap框架和jQuery库创建跨平台的移动应用程序。PhoneGap是一个开放源代码的开发框架，它允许开发人员使用HTML、CSS和...
**jQuery示例** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在本示例中，我们将深入探讨jQuery的核心功能，并通过实际代码片段来理解其工作原理。 1. **选择器*...
标题“struts+js”和“struts+jquery示例”暗示我们将探讨如何将Struts与JavaScript以及jQuery结合使用，以创建更强大的Web应用。 首先，Struts框架的核心组件包括Action类、ActionForm、Struts配置文件和JSP页面。...
本示例集主要展示了jQuery的基本用法，包括：** 1. **光标效果（自定义选择器光膀效果.html）** - jQuery 允许开发者创建自定义的选择器，以更高效地定位页面中的特定元素。在这个示例中，可能演示了如何通过...
这些文件可能分别代表不同的jQuery示例代码，例如01可能是基础选择器的示例，02可能是DOM操作的示例，04和05可能是动画效果的示例，而03和06可能是事件处理和Ajax交互的示例。每个文件内部可能包含一个或多个独立的...
《锋利的jQuery》是一本深受开发者喜爱的jQuery教程书籍，其随书光盘包含了丰富的示例代码，旨在帮助读者深入理解和应用jQuery库。这本书覆盖了jQuery的基础到高级技巧，通过实例来阐述jQuery的核心功能和实用技巧。...
**jQuery入门小示例** jQuery 是一款非常流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者来说，掌握jQuery的基础知识可以大大提高开发效率，减少代码量。本文将...
详细的锋利的jquery案例 本文件是《锋利的jQuery》一书的源代码，该书共八章，主要讲到jQuery的基本选择器、jQuery与ajax的集成，还有一些华丽的页面特效，是一款很适合初学者的jQuery教程。
适合菜鸟级的入门选手，内容简单。使用前须有基本的Dom，css,javascript基础才行！欢迎大家下载！ 非常适合jQuery入门
人民邮电出版社出版的《锋利的jQuery》，提供全书示例代码下载。 jQuery代言：Write less,do more! 没多学一点知识，就少学一行代码。 只要下载此示例代码，光学知识，不用敲代码，高速学习jQuery，你值得下载！