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>