jQuery 是一个 JavaScript 库。
以下代码来自度娘或W3Cschool。
一、入门实例
<html>
<head>
<title>入门实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
<!--
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档，因此无需选择器。
允许使用以下三种语法：
1.$(document).ready(function)
2.$().ready(function)
3.$(function)
提示：ready() 函数不应与 <body onload=""> 一起使用。
-->
<script type="text/javascript">
// jQuery 函数位于一个 document ready 函数中,这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码
$(document).ready(function(){
$('#div1').append('<b>Hello World</b>');
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
二、使用jQuery的html()和text()方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>使用jQuery的html()和text()方法</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$(selector).html(content) 改变被选元素的（内部）HTML
$('#divResult').html($('#p1').text());
//text()方法，设置或返回被选元素的文本内容。
$('#divResult2').html($('#p1').html());
});
</script>
</head>
<body>
<div id="div1">
<p id="p1"><b>W3Cschool</b></p>
<p id="p2">jQuery太好了</p>
</div>
<div id="divResult"></div>
<div id="divResult2"></div>
</body>
</html>
三、对class进行动态操作
<!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=utf-8" />
<title>对class进行动态操作 </title>
<script src="script/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table tr").mouseover(function() {
$(this).addClass("over");
});
$("#table tr").mouseout(function() {
$(this).removeClass("over");
});
// 选择每个相隔的（偶数） <tr> 元素，触发的事件
$("#table tr:even").addClass("double");
});
// 去除样式
function removeEvenTdClass() {
$("#table tr:even").removeClass();
}
// 增加样式
function addEvenTdClass() {
$("#table tr:even").addClass("double");
}
</script>
<style type="text/css">
th {
background: gray;
color: white;
}
table {
width: 30em;
height: 10em;
}
td {
border-bottom: 1px solid #95bce2;
text-align: center;
}
tr.over td {
font-weight: bold;
}
tr.double td {
background: #DAF3F1;
}
</style>
</head>
<body>
<table id="table" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
<th>手机</th>
</tr>
<tr>
<td>aaaa</td>
<td>18</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>bbbb</td>
<td>20</td>
<td>广州</td>
<td>13088888888</td>
</tr>
<tr>
<td>ccccc</td>
<td>23</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>ddddd</td>
<td>24</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>eeeee</td>
<td>43</td>
<td>北京</td>
<td>13088888888</td>
</tr>
<tr>
<td>fffff</td>
<td>26</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>gggggg</td>
<td>19</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>hhhhhh</td>
<td>43</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>iiiiii</td>
<td>32</td>
<td>上海</td>
<td>13088888888</td>
</tr>
</table>
<input id="btnRemoveClass" name="btnRemoveClass" type="button" value="removeEvenTdClass" onclick="removeEvenTdClass()"/>
<input id="btnAddClass" name="btnAddClass" type="button" value="addEvenTdClass" onclick="addEvenTdClass()"/>
</body>
</html>
四、对表格的操作，选择器的使用
<!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=utf-8" />
<title>对表格的操作，选择器的使用 </title>
<script src="script/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table tr").mouseover(function() {
$(this).addClass("over");
});
$("#table tr").mouseout(function() {
$(this).removeClass("over");
});
// 选择每个相隔的（偶数） <tr> 元素，触发的事件
$("#table tr:even").addClass("double");
});
</script>
<style type="text/css">
th {
background: gray;
color: white;
}
table {
width: 30em;
height: 10em;
}
td {
border-bottom: 1px solid #95bce2;
text-align: center;
}
tr.over td {
font-weight: bold;
}
tr.double td {
background: #DAF3F1;
}
</style>
</head>
<body>
<table id="table" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
<th>手机</th>
</tr>
<tr>
<td>aaaa</td>
<td>18</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>bbbb</td>
<td>20</td>
<td>广州</td>
<td>13088888888</td>
</tr>
<tr>
<td>ccccc</td>
<td>23</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>ddddd</td>
<td>24</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>eeeee</td>
<td>43</td>
<td>北京</td>
<td>13088888888</td>
</tr>
<tr>
<td>fffff</td>
<td>26</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>gggggg</td>
<td>19</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>hhhhhh</td>
<td>43</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>iiiiii</td>
<td>32</td>
<td>上海</td>
<td>13088888888</td>
</tr>
</table>
</body>
</html>
五、jQuery的隐藏特效hide()方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>jQuery的隐藏特效hide()方法</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
<!--
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$(selector).hide(speed,callback),
speed：可选。规定元素从可见到隐藏的速度。默认为 "0"。
callback：可选。hide 函数执行完之后，要执行的函数
-->
<script type="text/javascript">
$(document).ready(function(){
$("#table").hide(4000,function(){
alert("Animation Done!");
});
});
</script>
</head>
<body>
<table id="table" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="50">姓名</th>
<th width="50">年龄</th>
<th>手机</th>
</tr>
<tr>
<td>阿狸</td>
<td>21</td>
<td>13800138000</td>
</tr>
<tr>
<td>桃子</td>
<td>21</td>
<td>13800138000</td>
</tr>
<tr>
<td>影子</td>
<td>21</td>
<td>13800138000</td>
</tr>
</table>
</html>
六、对DOM的简单操作
<html>
<head>
<title>对DOM的简单操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
<!--
insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。
注释:如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。
语法:$(content).insertBefore(selector)
content：必需。规定要插入的内容。可能的值：
selector：必需。规定在何处插入被选元素。
after() 方法在被选元素后插入指定的内容。
语法：$(selector).after(content)
content 必需。规定要插入的内容（可包含 HTML 标签）。
-->
<script type="text/javascript">
function sure(){
$("<b>Hello</b>").insertBefore("#p1");
$("#p1").after("<b>World</b>");
};
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
<br/>
在文字前面加上Hello，后面加上World
<input type='button' onclick="sure();" value="确定"/>
</body>
</html>
七、对CSS的操作
<html>
<head>
<title>对CSS的操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
<!--
css() 方法设置或返回被选元素的一个或多个样式属性。
-->
<script type="text/javascript">
$(document).ready(function(){
$("p").css({ "margin-left": "10px", "background-color": "blue" });
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>
八、有关attr属性的应用，2个例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>有关attr属性的应用1</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
<!--
:gt() 选择器选取 index 值高于指定数的元素。index 值从 0 开始。
语法：$(":gt(index)")
index：必需。规定要选择的元素。
attr() 方法设置或返回被选元素的属性值。
语法：$(selector).attr(attribute,value)
attribute：规定属性的名称。
value：规定属性的值。
-->
<script>
function sure(){
$("button:gt(0)").attr("disabled","disabled");
};
</script>
<style>
button { margin:10px; }
</style>
</head>
<body>
<button>0th Button</button>
<button>1st Button</button>
<button>2nd Button</button>
除第一个按钮以外，其它禁用
<input type="button" value="确定" onclick="sure();" />
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>有关attr属性的应用2</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
<!--
attr() 方法设置或返回被选元素的属性值。
语法：$(selector).attr(attribute)
attribute：规定要获取其值的属性。
-->
<script>
function sure(){
var title = $("em").attr("title");
$("div").text(title);
};
</script>
<style>
em { color:blue; font-weight;bold; }
div { color:red; }
</style>
</head>
<body>
<!-- <em> 把文本定义为强调的内容。 -->
<p>
Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
The title of the emphasis is:<div></div>
获取em的title属性
<input type='button' onclick='sure();' value='确定' />
</body>
</html>
九、demos
相关推荐
jQuery简单应用实例
Vs2005C#下使用Jquery实现的Ajax简单实例
jquery简单实例代码，适合初学者入门。
SSI整合的jar包、jquery的简单实例SSI整合的jar包、jquery的简单实例
jQuery简单例子 初学者可以看一下效果 图片隐藏的实现
jquery实例，希望对刚开始学习jquery的人有说帮助
介绍ajax和jquery整合的一些简单的例子。 包括ajax单独和两个的整合。
php+jquery+ajax最简单例子
适合初学者的一些jquery实例，很简单的例子，文件也很小
实际上我比较喜欢java（少接触Ruby 罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过...
《Web开发典藏大系：jQuery网页开发实例精解》是一本介绍jquery网页开发基础应用的书籍，是一本简单 易懂，把复杂问题简单化的书。本书立足于jquery入门基础技术，对jquery的产生、jquery基础、如何将 jquery应用...
IW12.2.8JQueryAjax简单例子byC5Soft.rar
jQuery一些表单实例打包，Ajax表单判断代码，锋利的JQuery一书里的随书实例： Demo 1 : form插件的使用--ajaxForm(). Demo 2 : form插件的使用---ajaxSubmit(). Demo 3 : form插件的使用--formSerialize()组装...
jquery popup js 下的一个很简单的弹出窗口实体，可以快速，高效进行操作
简单的入门小例子，一看便会，希望能帮助你。。。
MVCAJAX用JQUERY调用实例例子 一个简单的入门例子 MVC下用JQUERY调用AJAX并用JSON返回输入的值
IntraWeb12.2内部已集成jQuery，无需额外下载。IntraWeb中有一个控件TIWJQueryWidget,使用该控件的文档却很少。 实际上TIWJQueryWidget的OnReady属性就是放置jQuery的$(document).ready()函数代码的位置。本例中在...
jquery简单实例适合初学者 ajax
jquery.multiSelect多选下拉框简单实例
.Net的DOM和JQuery简单实例让更多的.Net人员体验到开发中常用的技术