JQuery 網上搜到的幾個教程 , 編寫的測試代碼集合 . 別忘了去下載 jquery.js 這個文件 ...
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
<!----------------------menu.html------------------------->
test1_1.html 未使用 ajax 的切換
test1_2.html 使用 ajax 的切換
test2.html 簡單插入
test3.html 加載
test4.html 交替顏色和鼠標 overout 變顏色
test5.html window.status
test6.html 圖片疊加 || ball.jpg,corner_bl.gif,shadow.gif,shadow180.gif
test7.html DOM 外包一層
test8.html 結合 php, 做按鈕點后隨即產生 || script.php
<!------------------------test1_1.html----------------------->
<!-- 未使用 ajax 的切換 -->
<script language="javascript">
function test() {
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
var link = links.item(i);
link.onclick = function() {
return confirm('You are going to visit: ' + this.href);
};
}
}
</script>
<html>
<head>
<meta http-equiv="Content-Language" content="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
</head>
<body onload="javascript:test();">
<div id="external_links">
<a href="test1_1.html#1">a</a>
<a href="test1_1.html#2">b</a>
<a href="test1_1.html#3">c</a>
<a href="test1_1.html#4">d</a>
</div>
</body>
</html>
<!------------------------ test1_2.html ----------------------->
<!-- 使用 ajax 的切換 -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="jquery-<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" /><chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>
<script type="text/javascript">
function test() {
$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});
}
</script>
<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>//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-Language" content="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body onload="javascript:test();">
<div id="external_links">
<a href="test1_2.html#1">e</a>
<a href="test1_2.html#2">f</a>
<a href="test1_2.html#3">g</a>
<a href="test1_2.html#4">h</a>
</div>
</body>
</html>
<!----------------------test2.html------------------------->
<!-- 簡單插入 -->
<script type="text/javascript" src="jquery-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>
<script type="text/javascript">
function test() {
$('<p></p>')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");
}
</script>
<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>//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-Language" content="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body onload="javascript:test();">
</body>
</html>
<!----------------------test3.html------------------------->
<!-- 加載 -->
<script type="text/javascript" src="jquery-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Congratluations!");
});
</script>
<script type="text/javascript" src=""></script>
<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>//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-Language" content="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
</body>
</html>
<!-----------------------test4.html------------------------>
<!-- 交替顏色和鼠標 overout 變顏色 -->
<script type="text/javascript" src="jquery-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>
<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>//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-Language" content="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content=" 馬永占 (MyZ)" />
<meta name="Copyright" content=" 馬永占 (MyZ)" />
<meta name="descrīption" content="" />
<meta name="keywords"content="" />
<link rel="icon" href="" type="image/x-icon" />
<link rel="shortcut icon" href="" type="image/x-icon" />
<link href="" rel="stylesheet" type="text/css" />
<title></title>
<script type="text/javascript">
$(document).ready(function(){ // 這個就是傳說的 ready
$(".stripe tr").mouseover(function(){
// 如果鼠標移到 class 為 stripe 的表格的 tr 上時，執行函數
$(this).addClass("over");}).mouseout(function(){
// 給這行添加 class 值為 over ，并且當鼠標一出該行時執行函數
$(this).removeClass("over");}) // 移除該行的 class
$(".stripe tr:even").addClass("alt");
// 給 class 為 stripe 的表格的偶數行添加 class 值為 alt
});
</script>
<style>
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /* 這行將給所有的 tr 加上背景色 */
}
tr.over td {
background:#bcd4ec; /* 這個將是鼠標高亮行的背景色 */
}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!-- 用 class="stripe" 來標識需要使用該效果的表格 -->
<thead>
<tr>
<th> 姓名 </th>
<th> 年齡 </th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyZ</td>
<td>20</td>
<td>10000</td>
<td>10000@qq.com</td>
</tr>
<tr>
<td>MyZ</td>
<td>20</td>
<td>10000</td>
<td>10000@qq.com</td>
</tr>
<tr>
<td>MyZ</td>
<td>20</td>
<td>10000</td>
<td>10000@qq.com</td>
</tr>
<tr>
<td>MyZ</td>
<td>20</td>
<td>10000</td>
<td>10000@qq.com</td>
</tr>
<tr>
<td>MyZ</td>
<td>20</td>
<td>10000</td>
<td>10000@qq.com</td>
</tr>
</tbody>
</table>
</body>
</html>
<!----------------------test5.html------------------------->
<!-- window.status -->
<script type="text/javascript" src="jquery-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.affLink').mouseover(function(){window.status=" 特別的 status";return true;})
.mouseout(function(){window.status='Done';return true;});
});
</script>
<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>//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-Language" content="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content=" 馬永占 (MyZ)" />
<meta name="Copyright" content=" 馬永占 (MyZ)" />
<meta name="descrīption" content="" />
<meta name="keywords"content="" />
<link rel="icon" href="" type="image/x-icon" />
<link rel="shortcut icon" href="" type="image/x-icon" />
<link href="" rel="stylesheet" type="text/css" />
<title></title>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<a href="test5.html#a" class="affLink">aaa</a>
<a href="test5.html#b" class="affLink">bbb</a>
<a href="test5.html#c" class="affLink">ccc</a>
</body>
</html>
<!-----------------------test6.html------------------------>
<!-- 圖片疊加 -->
<script type="text/javascript" src="jquery-<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.2.1</chsdate>.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("img.dropshadow")
.wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" +
"<div class='wrap3'></div></div></div></div>");
});
</script>
<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>//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-Language" content="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content=" 馬永占 (MyZ)" />
<meta name="Copyright" content=" 馬永占 (MyZ)" />
<meta name="descrīption" content="" />
<meta name="keywords"content="" />
<link rel="icon" href="" type="image/x-icon" />
<link rel="shortcut icon" href="" type="image/x-icon" />
<link href="" rel="stylesheet" type="text/css" />
<title></title>
<style type="text/css">
.wrap0, .wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap0 {
float:left;
background:url(shadow.gif) right bottom no-repeat;
}
.wrap1 {
background:url(shadow180.gif) no-repeat;
}
.wrap2 {
background:url(corner_bl.gif) -18px 100% no-repeat;
}
.wrap3 {
padding:10px 14px 14px 10px;
background:url(corner_tr.gif) 100% -18px no-repeat;
}
body { background: #fff;}
</style>
</head>
<body>
<p>First, the old-school, multiple divs hard coded into the html</p>
<div class="wrap0">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img
src="ball.jpg"
alt="The object casting a shadow"
/>
</div>
</div>
</div>
發表評論
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
評論