1.定位標籤
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>exe_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<script type="text/javascript">
//定位3個p標籤
$("p").click( function(){
alert( $(this).text() );
} )
</script>
</body>
</html>
2.表格各行變色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>exe_2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<table border="1" align="center" width="70%">
<tr>
<th>用戶名</th>
<th>密碼</th>
<th>0</th>
</tr>
<tr>
<td>張三</td>
<td>123456</td>
<th>1</th>
</tr>
<tr>
<td>李四</td>
<td>654321</td>
<th>2</th>
</tr>
<tr>
<td>王五</td>
<td>162534</td>
<th>3</th>
</tr>
</table>
</form>
<script type="text/javascript">
//NO1)將索引號爲奇數的行背景色設爲藍色
$("table tr:odd").css("background-color","blue");
//NO2)將索引號爲偶數的行背景色設爲黃色
$("table tr:even").css("background-color","yellow");
//NO3)將第一行背景色設爲粉色
$("table tr:first").css("background-color","pink");
</script>
</body>
</html> 3.複選框的事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>exe_3.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="checkbox" value="籃球"/>籃球
<input type="checkbox" value="排球"/>排球
<input type="checkbox" value="羽毛球"/>羽毛球
<input type="checkbox" value="乒乓球"/>乒乓球
<input type="button" value="選中的個數"/>
<input type="button" value="依次顯示選中的value"/>
<script type="text/javascript">
//定位"選中的個數"按鈕，同時添加單擊事件
$(":button:first").click( function(){
//獲取選中的複選框個數
var size = $(":checkbox:checked").size();
//判斷
if(size == 0){
alert("這傢伙太賴了");
}else{
alert("你選中了"+size+"個項目");
}
} );
//定位"依次顯示選中的value"按鈕，同時添加單擊事件
$(":button:last").click( function(){
//獲取選中的複選框
var $checkbox = $(":checkbox:checked");
//迭代所有選中的複選框的value屬性值
$checkbox.each(function(){
//alert( $(this).val() );//提倡
alert( this.value );//不提倡
});
} );
</script>
</body>
</html>
4.下拉框的批量右移操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>
<select style="width:60px" multiple size="10" id="leftID">
<option>選項A</option>
<option>選項B</option>
<option>選項C</option>
<option>選項D</option>
<option>選項E</option>
<option>選項F</option>
<option>選項G</option>
<option>選項H</option>
<option>選項I</option>
<option>選項J</option>
</select>
</div>
<div style="position:absolute;left:100px;top:60px">
<input type="button" value="批量右移" id="rightMoveID"/>
</div>
<div style="position:absolute;left:100px;top:90px">
<input type="button" value="全部右移" id="rightMoveAllID"/>
</div>
<div style="position:absolute;left:220px;top:20px">
<select multiple size="10" style="width:60px" id="rightID">
</select>
</div>
</body>
<script type="text/javascript">
//雙擊右移
//定位左邊的下拉框，同時添加雙擊事件
$("#leftID").dblclick(function(){
//獲取雙擊時選中的option標籤
var $option = $("#leftID option:selected");
//將選中的option標籤移動到右邊的下拉框中
$("#rightID").append( $option );
});
//批量右移
//定位批量右移按鈕，同時添加單擊事件
$("#rightMoveID").click(function(){
//獲取左邊下拉框中選中的option標籤
var $option = $("#leftID option:selected");
//將選中的option標籤移動到右邊的下拉框中
$("#rightID").append( $option );
});
//全部右移
//定位全部右移按鈕，同時添加單擊事件
$("#rightMoveAllID").click(function(){
//獲取左邊下拉框中所有的option標籤
var $option = $("#leftID option");
//將選中的option標籤移動到右邊的下拉框中
$("#rightID").append( $option );
});
</script>
</html>5.動態增加表格行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table id="tableID" border="1" align="center" width="60%">
<thead>
<tr>
<th>用戶名</th>
<th>密碼</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodyID">
<!-- 動態增加行
<tr>
<td>哈哈</td>
<td>123</td>
<td><input type="button" value="刪除" οnclick=""/></td>
</tr>
-->
</tbody>
</table>
<hr/>
用戶名：<input type="text" id="usernameID"/>
密碼： <input type="text" id="passwordID"/>
<input type="button" value="增加" id="addID"/>
</body>
<script type="text/javascript">
//定位"增加"按鈕，同時添加單擊事件
$("#addID").click(function(){
//獲取用戶名和密碼的值
var username = $("#usernameID").val();
var password = $("#passwordID").val();
//去掉二邊的空格
username = $.trim(username);
password = $.trim(password);
//如果用戶名或密碼沒有填
if(username.length == 0 || password.length == 0){
//提示用戶
alert("用戶名或密碼沒有填");
}else{
//創建1個tr標籤
var $tr = $("<tr></tr>");
//創建3個td標籤
var $td1 = $("<td>"+username+"</td>");
var $td2 = $("<td>"+password+"</td>");
var $td3 = $("<td></td>");
//創建input標籤，設置爲刪除按鈕
var $del = $("<input type='button' value='刪除'>");
//爲刪除按鈕動態添加單擊事件
$del.click(function(){
//刪除按鈕所有的行，即$tr對象
$tr.remove();
});
//將刪除按鈕添加到td3標籤中
$td3.append($del);
//將3個td標籤依次添加到tr標籤中
$tr.append($td1);
$tr.append($td2);
$tr.append($td3);
//將tr標籤添加到tbody標籤中
$("#tbodyID").append($tr);
//清空用戶名和密碼文本框中的內容
$("#usernameID").val("");
$("#passwordID").val("");
}
});
</script>
</html>6.複選框的表格內全選，取消，和反選
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table border="1" align="center">
<thead>
<tr>
<th>狀態</th>
<th>用戶名</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>趙</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>錢</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>孫</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>李</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>周</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="checkbox" />
全選
</td>
<td>
<input type="button" value="全反選" />
</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
//全選中和全取消
//定位tfoot中的全選複選框，同時添加單擊事件
$("tfoot input:checkbox").click(function(){
//獲取該全選複選框的狀態
var flag = this.checked;
//如果選中
if(flag){
//將tbody中的所有複選框選中
$("tbody input:checkbox").attr("checked","checked");
//如果未選中
}else{
//將tbody中的所有複選框取消
$("tbody input:checkbox").removeAttr("checked");
}
});
</script>
<script type="text/javascript">
//全反選
//定位tfoot標籤中的全反選按鈕，同時添加單擊事件
$("tfoot input:button").click(function(){
//將tbody標籤中的所有選中的複選框失效
$("tbody input:checkbox:checked").attr("disabled","disabled");
//將tbody標籤中的所有生效的複選框選中
$("tbody input:checkbox:enabled").attr("checked","checked");
//將tbody標籤中的所有失效的複選框生效且設置爲未選中
$("tbody input:checkbox:disabled").removeAttr("disabled").removeAttr("checked");
});
</script>
</body>
</html>
========================================================================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
alert("傳統");
}
$(function(){
alert("現代");
});
</script>
</body>
</html>select框change事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<select id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">廣州</option>
</select>
<script type="text/javascript">
//當<select>標籤觸發onchange事件,顯示選中<option>的value和innerHTML屬性的值
$("#city").change( function(){
var $option = $("#city option:selected");
var value = $option.val();
var text = $option.text();
alert(value+":"+text);
} );
</script>
</body>
</html>
========================================================================================================
文本框焦點
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>focus.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="text" value="加載頁面時獲取光標並選中所有文字" size="50"/>
<script type="text/javascript">
//加載頁面時獲取光標並選中所有文字
$(function(){
//光標定位文本框
$(":text").focus();
//選中文本框的所有文本
$(":text").select();
});
</script>
</body>
</html>
========================================================================================================
按鍵事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>keyup.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
//當按鍵彈起時，顯示所按鍵的unicode碼
$(function(){
//IE瀏覽器會自動創建event這個事件對象，那麼程序員可以根據需要來使用該event對象
$(document).keyup(function(){
//獲取按鈕的unicode編碼
var code = event.keyCode;
alert(code);
});
});
</script>
</body>
</html>
鼠標滾動事件顯示座標
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>focus.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
X=<input type="text" id="xID"/>
<br/>
Y=<input type="text" id="yID"/>
<script type="text/javascript">
//顯示鼠標移動時的X和Y座標
$(function(){
$(document).mousemove(function(){
var x = event.clientX;
var y = event.clientY;
$("#xID").val(x);
$("#yID").val(y);
});
});
</script>
</body>
</html>=========================================================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>06_mouseover_mouseout.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table border="2" align="center" width="80%" id="tableID">
<tr>
<td>張三</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>26</td>
</tr>
<tr>
<td>週六</td>
<td>男</td>
<td>28</td>
</tr>
</table>
<hr/>
<img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%;border-style:dashed;border-color:white"/>
<img height="120px" src="../images/lb.jpg" style="position:absolute;left:60%;border-style:dashed;border-color:white"/>
<script type="text/javascript">
//鼠標移到某行上，某行背景變色
$("table tr").mouseover(function(){
$(this).css("background-color","inactivecaption");
});
//鼠標移出某行，某行還原
$("table tr").mouseout(function(){
$(this).css("background-color","white");
});
//鼠標移到某圖片上，爲圖片加邊框
$("img").mouseover(function(){
$(this).css("border-color","red");
});
//鼠標移出圖片，圖片還原
$("img").mouseout(function(){
$(this).css("border-color","white");
});
</script>
</body>
</html>表單提交簡單驗證：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>submit.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form action="06_mouseover_mouseout.html" method="post">
用戶名：<input type="text"/>
<input type="submit" value="表單提交"/>
</form>
<script type="text/javascript">
//瀏覽器加載web頁面時觸發
$(function(){
//將光標定位於文本框中
$(":text").focus();
});
</script>
<script type="text/javascript">
//檢測是否爲中文，true表示是中文，false表示非中文
function isChinese(str){
if(/^[\u3220-\uFA29]+$/.test(str)){
return true;
}else{
return false;
}
}
</script>
<script type="text/javascript">
//當表單提交前檢測
$("form").submit(function(){
var flag = false;
//獲取文本框的中內容
var name = $(":text").val();
//去二邊的空格
name = $.trim(name);
//如果沒有填內容
if(name.length == 0){
alert("用戶名必填");
//將光標定位於文本框中
$(":text").focus();
//清空文本框中的內容
$(":text").val("");
}else{
//調用方法
flag = isChinese(name);
//如果不是中文
if(!flag){
alert("用戶名必須填中文");
//將光標定位於文本框中
$(":text").focus();
//清空文本框中的內容
$(":text").val("");
}
}
return flag;
});
</script>
</body>
</html>