26、jQuery 中的 DOM 操作
（1）DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件
（2）DOM 操作的分类:
DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时, 有许多专属于 HTML-DOM 的属性
CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性
26、内部插入节点
（1）append(content) :向每个匹配的元素的内部的结尾处追加内容
（2） appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
（3） prepend(content):向每个匹配的元素的内部的开始处插入内容
（4） prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
下拉框应用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<title>无标题文档</title>
<style type="text/css">
<!--
BODY
{
font-family:Courier;;
font-size: 12px;
margin:0px 0px 0px 0px;
overflow-x:no;
overflow-y:no;
background-color: #B8D3F4;
}
td
{
font-size:12px;
}
.default_input
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.default_input2
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.nowrite_input
{
border:1px solid #849EB5;
height:18px;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}
.default_list
{
font-size:12px;
border:1px solid #849EB5;
}
.default_textarea
{
font-size:12px;
border:1px solid #849EB5;
}
.nowrite_textarea
{
border:1px solid #849EB5;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}
.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd {
font-size: 12px;
text-align: left;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color:#fff;
}
.wordtd_2{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd
{
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2
{
text-align: center;
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg
{
font-size:12px;
}
.tb{
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
border-right-width:0px;
border-left-width:0px;
border-top-width:0px;
border-bottom-width:1px;}
.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}
.noborder {
border: none;
}
.button {
border: 1px ridge #ffffff;
line-height:18px;
height: 20px;
width: 45px;
padding-top: 0px;
background:#CBDAF7;
color:#000000;
font-size: 9pt;
font-family:Courier;;
}
.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color:transparent;
text-align: left
}
-->
</style></head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//<input name="add" id="add" type="button" class="button" value="-->" />
$("#add").click(function(){
$("#first>option:selected").appendTo( $("#second") );
});
//<input name="add_all" id="add_all" type="button" class="button" value="==>" />
$("#add_all").click(function(){
$("#first>option").appendTo( $("#second") );
});
//<input name="remove" id="remove" type="button" class="button" value="<--" />
$("#remove").click(function(){
$("#second>option:selected").appendTo( $("#first") );
});
//<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
$("#remove_all").click(function(){
$("#second>option").appendTo( $("#first") );
});
//双击
//左边双击
$("#first").dblclick(function(){
$("#first>option:selected").appendTo( $("#second") );
});
//右边双击
$("#second").dblclick(function(){
$("#second>option:selected").appendTo( $("#first") );
});
</script>
</html>
28、外部插入节点
（1）after(content) :在每个匹配的元素之后插入内容
（2）before(content):在每个匹配的元素之前插入内容
（3）insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
（4）insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
（5）以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.
29、查找节点
查找节点:
查找属性节点: 通过 jQuery 选择器完成.
查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值
30、创建节点
（1）创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.
（2）注意:
动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)或$(“p”)
（3）创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
31、创建新节点案例
在该节点下添加新的节点
<li id="tj" name="tianjin">天津</li>
32、删除节点
（1）remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
（2）empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
33、使用 JQuery 实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<title>添加用户</title>
</head>
<body>
<center>
<br><br>
添加用户:<br><br>
姓名: <input type="text" name="name" id="name"/>
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" /><br><br>
<button id="addUser">提交</button>
<br><br>
<hr>
<br><br>
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=Jerry">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
<script language="JavaScript">
//<button id="addUser">提交</button>
$("#addUser").click(function(){
//姓名: <input type="text" name="name" id="name"/>
//email: <input type="text" name="email" id="email" />
//电话: <input type="text" name="tel" id="tel" /><br><br>
//获取用户输入的信息
var $name = $("#name").val();
var $email = $("#email").val();
var $tel = $("#tel").val();
//alert($name);
//---------------------------
//创建tr td
//<td>Jerry</td>
//<td>jerry@sohu.com</td>
//<td>8000</td>
//<td><a href="deleteEmp?id=Jerry">Delete</a></td>
var $tdName = $("<td></td>")
$tdName.text($name);
var $tdEmail = $("<td></td>")
$tdEmail.text($email);
var $tdTel = $("<td></td>");
$tdTel.text($tel);
var $tdDelete = $("<td></td>");
var $a = $("<a></a>");
$a.attr("href","deleteEmp?id="+$tdName);
$a.text("Delete");
$a.click(function(){
//调用删除tr的方法
return deleteTr($a);
});
$a.appendTo( $tdDelete );
//创建TR
//<tr>
//<td>Jerry</td>
//<td>jerry@sohu.com</td>
//<td>8000</td>
//<td><a href="deleteEmp?id=Jerry">Delete</a></td>
//</tr>
var $tr = $("<tr></tr>");
$tr.append($tdName);
$tr.append($tdEmail);
$tr.append($tdTel);
$tr.append($tdDelete);
//将tr 添加到表格中
$("tbody").append($tr);
});
//调用删除tr的方法
function deleteTr($a){
//<tr>
//<td>Jerry</td>
//<td>jerry@sohu.com</td>
//<td>8000</td>
//<td><a href="deleteEmp?id=Jerry">Delete</a></td>
//</tr>
var $deleteName = $a.parent().parent().children().eq(0).text();
//alert($deleteName);
var flag = confirm("您确定要删除 [ "+ $deleteName +" ]吗?");
//alert(flag);
if(flag){
//删除tr
$a.parent().parent().remove();
}
return false;
}
</script>
</html>
34、复制节点
（1）clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
（2）clone(true): 复制元素的同时也复制元素中的的事件
<button>保存</button>
<p>段落</p>
$("button").click(function(){
alert("点击按钮");
});
//克隆节点，不克隆事件
$("button").clone().appendTo("p");
//克隆节点，克隆事件
$("button").clone(true).appendTo("p");
35、替换节点
（1）replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
（2）replaceAll(): 颠倒了的 replaceWith() 方法.
（3）注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
//<p>段落</p>
//方式一
$("p").replaceWith("<button>登陆</button>");
//方式二
$("<button>登陆</button>").replaceAll("p");
36、属性操作
（1）attr(): 获取属性和设置属性
当为该方法传递一个参数时, 即为某元素的获取指定属性
当为该方法传递两个参数时, 即为某元素设置指定属性的值
（2）jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等.
（3）removeAttr(“属性名”): 删除指定元素的指定属性
$(“div”).html(“<p>奥运接受了</p>");
$(“div”).html();
37、多选框应用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<form method="post" action="">
请选择您的爱好!
<br><input type="checkbox" id="checkedAll_2"/>全选/全不选
<br/>
<input type="checkbox" name="items" checked="checked" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br/>
<input type="button" id="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/>
<input type="button" id="send" value="提 交"/>
</form>
</body>
<script language="JavaScript">
//<input type="button" id="CheckedAll" value="全 选"/>
$("#CheckedAll").click(function(){
$("input[name='items']").each(function(index, domEle){
$(domEle).attr("checked","checked");//attr("checked",true)
});
});
//<input type="button" id="CheckedNo" value="全不选"/>
$("#CheckedNo").click(function(){
$("input[name='items']").each(function(index, domEle){
$(domEle).attr("checked", null);//attr("checked",false)
});
});
//<input type="button" id="CheckedRev" value="反 选"/>
$("#CheckedRev").click(function(){
$("input[name='items']").each(function(index, domEle){
// $(domEle).attr(checked);
// domEle.checked
$(domEle).attr("checked", !domEle.checked);
});
});
//<input type="checkbox" id="checkedAll_2"/>全选/全不选
$("#checkedAll_2").click(function(){
$("input[name='items']").each(function(index, domEle){
//alert($("#checkedAll_2").attr("checked"));
$(domEle).attr("checked", $("#checkedAll_2").attr("checked"));
// $(domEle).attr("checked", this.attr("checked"));
});
});
</script>
</html>
38、样式操作
（1）获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
（2）追加样式: addClass()
（3）移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
（4）切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
（5）判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
39、设置和获取 HTML, 文本和值
（1）读取和设置某个元素中的 HTML 内容: html(“<p></p>”) . 该方法可以用于 XHTML, 但不能用于 XML 文档
（2）读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.
（3）读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组
（4）即便是一组 radio, 利用 val() 方法为其赋值时, 也要使用 js 数组来为其赋值
40、val()练习_1
<!DOCTYPE HTML>
<html>
<head>
<title>XXX</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<!--
<input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br>
-->
<input type="text" value="" placeHolder="用户邮箱/手机号/用户名" id="b1"/><br>
<input type="password" value="" id="b2"/><br>
<input type="button" value="登陆" id="b3"/>
<br>
</body>
<script language="JavaScript">
//window.onload(function(){
//});
// $(window).load(function(){
// });
//$().ready == $(document).ready(function){}
//$().ready(function(){
// //获取焦点
// $("#b1").focus(function(){
// if($(this).val()==this.defaultValue){
// $(this).val("");
// }
// })
// //失去焦点
// $("#b1").blur(function(){
// //alert("1:"+this.value);//当前输入的值
// //alert("2:"+this.defaultValue);//页面加载时的初始值
// if($.trim($(this).val())==""){
// $(this).val(this.defaultValue);
// }
// })
//})
</script>
</html>
41、练习5 val()练习_2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" value="使单选下拉框的'2号'被选中"/><br>
<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
<input type="button" value="使单选框的'单选2'被选中"/><br>
<input type="button" value="打印已经被选中的值"/><br>
<br/>
<select id="one">
<option>1号</option>
<option>2号</option>
<option>3号</option>
</select>
<select id="many" multiple="multiple" style="height:120px;">
<option selected="selected" >1号</option>
<option>2号</option>
<option>3号</option>
<option>4号</option>
<option>5号</option>
<option selected="selected">6号</option>
</select>
<br/>
<br/>
<input type="checkbox" name="c" value="check1"/> 复选1
<input type="checkbox" name="c" value="check2"/> 复选2
<input type="checkbox" name="c" value="check3"/> 复选3
<input type="checkbox" name="c" value="check4"/> 复选4
<br/>
<input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r" value="radio2"/> 单选2
<input type="radio" name="r" value="radio3"/> 单选3
</body>
<script language="JavaScript">
//<input type="button" value="使单选下拉框的'2号'被选中"/><br>
/**
* <select id="one">
<option>1号</option>
<option>2号</option>
<option>3号</option>
</select>
*/
$("input[type='button']:eq(0)").click(function(){
// alert( $("#one>option:eq(1)").text() );
// $("#one>option:eq(1)").attr("selected","selected");
$("#one").val("2号");
});
//<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
$("input[type='button']:eq(1)").click(function(){
/**
<select id="many" multiple="multiple" style="height:120px;">
<option selected="selected" >1号</option>
<option>2号</option>
<option>3号</option>
<option>4号</option>
<option>5号</option>
<option selected="selected">6号</option>
</select>
*/
// $("#many>option").each(function(index, domEle){
// $(domEle).removeAttr("selected");
//
// if(index ==1 || index == 4){
// $(domEle).attr("selected","selected");
// }
// });
$("#many").val(["2号","5号"]);
});
//<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
// <input type="checkbox" name="c" value="check1"/> 复选1
// <input type="checkbox" name="c" value="check2"/> 复选2
// <input type="checkbox" name="c" value="check3"/> 复选3
// <input type="checkbox" name="c" value="check4"/> 复选4
$("input[type='button']:eq(2)").click(function(){
$("input[type='checkbox']").val(["check2", "check4"]);
});
//<input type="button" value="使单选框的'单选2'被选中"/><br>
$("input[type='button']:eq(3)").click(function(){
$("input[type='radio']").val(["radio2"]);
});
//<input type="button" value="打印已经被选中的值"/><br>
$("input[type='button']:eq(4)").click(function(){
//下拉选
$("select>option").each(function(index, domEle){
if($(domEle).attr("selected")){
alert($(domEle).text());
}
});
//复选框和单选框
$("input:checked").each(function(index,domEle){
alert($(domEle).val());
})
//:checked
//[checked='checked']
});
</script>
</html>
42、常用的遍历节点方法
（1）取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
（2）取得匹配元素后面紧邻的同辈元素的集合:next();
（3）取得匹配元素前面紧邻的同辈元素的集合:prev()
（4）取得匹配元素前后所有的同辈元素: siblings()
<input type="button" value="查找所有子元素" id="b2"/>
<input type="button" value="获取后面的同辈元素" id="b3"/>
<input type="button" value="获取前面的同辈元素" id="b4"/>
43、弹出层
<!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 type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<script type="text/javascript">
</script>
<!-- 收缩展开效果 -->
<div class="box">
<h1>收缩展开效果</h1>
<div id="menu1">
1<br />
2<br />
3<br />
4<br />
5<br />
</div>
</div>
<br />
<div id="menu2">
<h1>收缩展开效果</h1>
<div class="text">
1<br />
2<br />
</div>
</div>
<div id="menu3">
<h1>收缩展开效果</h1>
<div class="text">
1<br />
2<br />
</div>
</div>
</body>
<script language="JavaScript">
// $("h1").click(function(){
// //收缩展开效果
// $("h1").next().slideToggle("normal");
// });
$("h1").each(function(index, domEle){
$(domEle).click(function(){
//收缩展开效果
$(domEle).next().slideToggle("normal");
});
});
</script>
</html>
43、CSS-DOM 操作
（1）获取和设置元素的样式属性: css()
（2）获取和设置元素透明度: opacity 属性
注:IE6,IE7不支持此属性,请使用Firefox1.5,或Opera9浏览
opacity:0.1
（3）获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);
（4）获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
（5）em是相对长度单位。相对于当前对象内文本的字体尺寸
44、jQuery 中的事件 -- 加载 DOM
在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.
45、crm项目中的权限控制
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择菜单</title>
<link href="style_cn.css" rel="stylesheet" type="text/css">
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<style type="text/css">
<!--
fieldset div {
float:left;
24%;
text-align:left;
line-height:25px;
}
td div {
float:left;
24%;
text-align:left;
line-height:25px;
}
-->
</style>
<script language="javascript">
function goSelect(id){
var $menuModule = $("#"+id);
var value = $menuModule.val();
var list = value.split(",");
if(list[0]==list[1]){
//操作的是"客户管理"
if($menuModule.attr("checked")){
//* 当选中"客户管理"的时候，所有子元素都被选中
$("input[id^="+list[0]+"]:not([id$="+list[0]+"])").attr("checked","checked");
}else{
//* 当不选中"客户管理"的时候，所有子元素都不被选中
$("input[id^="+list[0]+"]:not([id$="+list[0]+"])").attr("checked",null);
}
}else{
//操作的是所有子元素
//* 当任意一个子元素被选中的时候，"客户管理"也被选中
if($menuModule.attr("checked")){
$("input[id^="+list[0]+"][id$="+list[0]+"]").attr("checked","checked");
}
//* 当所有子元素都不被选中的时候，"客户管理"也不被选中
var flag = false;
$("input[id^="+list[0]+"]:not([id$="+list[0]+"])").each(function(index,domEle){
if($(domEle).attr("checked")){
flag = true;
}
});
if(!flag){
$("input[id^="+list[0]+"][id$="+list[0]+"]").attr("checked",null);
}
}
}
</script>
</head>
<body>
<form name="ActionForm" method="post" action="/webcrm0527/sys/sysRoleAction_set.do">
<input type="hidden" name="method" value="updateMenu">
<input type="hidden" name="roleId" value="402881e42ab919a5012ab91a0b110001">
<br/>
<div class="control">
<button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"
onClick="SelectAllBox()">
<img src="./button/quanbuxz.png" border='0'
align='absmiddle'> 全部选中</button>
<button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"
onClick="UnSelectAllBox()">
<img src="./button/quanbubxz.png" border='0'
align='absmiddle'> 全部不选中</button>
<button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"
onClick="document.ActionForm.submit();">
<img src="./button/baocun.png" border='0'
align='absmiddle'> 保存</button>
<button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"
onClick="parent.close();">
<img src="./button/guanbi.png" border='0'
align='absmiddle'> 关闭</button>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#6A82A8">
<tr>
<td align="center" height="25"><span style="color:#FFFFFF; font-weight:bold">操作权限组：人力资源部权限组</span></td>
</tr>
</table>
<div class="border" style="padding:3px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<fieldset style='padding:5px;clear:left;'>
<legend><input type='checkbox' class='checkbox' name='menuModule' value='company,company'
id='company_company' onClick='goSelect(this.id)'
title="客户管理" >客户管理
</legend>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='company,base'
id='company_base' onClick='goSelect(this.id)'
title='客户拜访'>客户拜访</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='company,linkMan'
id='company_linkMan' onClick='goSelect(this.id)'
title='联系人列表' >联系人列表</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='company,linkTouch'
id='company_linkTouch' onClick='goSelect(this.id)'
title='联系记录列表' >联系记录列表</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='company,rule'
id='company_rule' onClick='goSelect(this.id)'
title='客户查重设置 ' >客户查重设置 </div>
</fieldset>
<fieldset style='padding:5px;clear:left;'>
<legend><input type='checkbox' class='checkbox' name='menuModule' value='sys,sys'
id='sys_sys' onClick='goSelect(this.id)'
title="系统设置 "
>系统设置
</legend>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='sys,group'
id='sys_group' onClick='goSelect(this.id)'
title='部门设置'
>部门设置</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='sys,user'
id='sys_user' onClick='goSelect(this.id)'
title='人事管理' >人事管理</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='sys,role'
id='sys_role' onClick='goSelect(this.id)'
title='操作权限组' >操作权限组</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='sys,province'
id='sys_province' onClick='goSelect(this.id)'
title='省份资料' >省份资料</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='sys,city'
id='sys_city' onClick='goSelect(this.id)'
title='城市资料' >城市资料</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='sys,code'
id='sys_code' onClick='goSelect(this.id)'
title='编码规则' >编码规则</div>
</fieldset>
<fieldset style='padding:5px;clear:left;'>
<legend><input type='checkbox' class='checkbox' name='menuModule' value='report,report'
id='report_report' onClick='goSelect(this.id)'
title="报表与分析" >报表与分析
</legend>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='report,khflfx'
id='report_khflfx' onClick='goSelect(this.id)'
title='客户分类分析 ' >客户分类分析 </div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='report,khfx'
id='report_khfx' onClick='goSelect(this.id)'
title='客户分析 ' >客户分析 </div>
</fieldset>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
46、jquery表单验证
下载地址和Demo
http://jquery.bassistance.de/validate/jquery.validate.zip
首页： http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery validation 1.9 ---验证插件 需要:jQuery 1.3.2 或 1.4.2版本
调用jquery.validate({});方法进行验证
$("#empForm").validate({
* //自定义验证规则
* //自定义提示信息
})
47、jquery自定义验证规则
自定义校验规则可以通过自定义检验函数的方式新增加校验规则
步骤如下：
1. 在定义校验规则之前定义一个新的方法
2. 在rules中指定某个域使用此校验规则
3. 在messages中指定这个域使用此校验规则没有通过的提示
信息
<!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=ISO-8859-1" />
<title>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
<style type="text/css">
#commentForm { 500px; }
#commentForm label { 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { 670px; }
#signupForm label.error {
margin-left: 10px;
auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
</head>
<body>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
<div id="main">
<p>Default submitHandler is set to display an alert into of submitting the form</p>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" class="required" minlength="2" />
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" class="required" />
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url" />
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<label for="newsletter">I'd like to receive the newsletter</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</p>
<fieldset id="newsletter_topics">
<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
Marketflash
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
Latest fuzz
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic" />
Mailing list digester
</label>
<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
</fieldset>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
<h3>Syntetic examples</h3>
<ul>
<li><a href="errorcontainer-demo.html">Error message containers in action</a></li>
<li><a href="custom-messages-metadata-demo.html">Custom Messages as Metadata</a></li>
<li><a href="radio-checkbox-select-demo.html">Radio and checkbox buttons and selects</a></li>
<li><a href="ajaxSubmit-intergration-demo.html">Integration with Form Plugin (AJAX submit)</a></li>
<li><a href="custom-methods-demo.html">Custom methods and message display.</a></li>
<li><a href="dynamic-totals.html">Dynamic forms</a></li>
<li><a href="themerollered.html">Forms styled with jQuery UI Themeroller</a></li>
</ul>
<h3>Real-world examples</h3>
<ul>
<li><a href="milk/">Remember The Milk signup form</a></li>
<li><a href="marketo/">Marketo signup form</a></li>
<li><a href="multipart/">Buy and Sell a House multipart form</a></li>
<li><a href="captcha/">Remote captcha validation</a></li>
</ul>
<h3>Testsuite</h3>
<ul>
<li><a href="../test/">Validation Testsuite</a></li>
</ul>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2623402-1";
urchinTracker();
</script>
</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=ISO-8859-1" />
<title>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
});
</script>
<style type="text/css">
#commentForm { 500px; }
#commentForm label { 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { 670px; }
#signupForm label.error {
margin-left: 10px;
auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" class="required" minlength="2" />
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" class="required" />
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url" />
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</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=ISO-8859-1" />
<title>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate the comment form when it is submitted
// $("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
<style type="text/css">
#commentForm { 500px; }
#commentForm label { 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { 670px; }
#signupForm label.error {
margin-left: 10px;
auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<label for="newsletter">I'd like to receive the newsletter</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</p>
<fieldset id="newsletter_topics">
<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
Marketflash
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
Latest fuzz
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic" />
Mailing list digester
</label>
<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
</fieldset>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</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>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate the comment form when it is submitted
// $("#commentForm").validate();
// validate signup form on keyup and submit
/**
* 表单验证
* $("#signupForm").validate({key , value});
* 验证规则
* rules:{ key , value }
* key 页面元素中的name属性值
* value 指定的验证规则
* messages:{ key , value }
* key 页面元素中的name属性值 (与rules中key是同一个key)
* value 页面中提示的错误信息
*/
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "请输入 姓",
lastname: "请输入 名",
username: {
required: "请输入用户名",
minlength: "用户名的长度必须大于2位"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
<style type="text/css">
#commentForm { 500px; }
#commentForm label { 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { 670px; }
#signupForm label.error {
margin-left: 10px;
auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<label for="newsletter">I'd like to receive the newsletter</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</p>
<fieldset id="newsletter_topics">
<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
Marketflash
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
Latest fuzz
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic" />
Mailing list digester
</label>
<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
</fieldset>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>