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 οnlοad=""> 一起使用。
-->
<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" οnclick="removeEvenTdClass()"/>
<input id="btnAddClass" name="btnAddClass" type="button" value="addEvenTdClass" οnclick="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' οnclick="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="确定" οnclick="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' οnclick='sure();' value='确定' />
</body>
</html>
九、demos