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>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 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;
width:24%;
text-align:left;
line-height:25px;
}
td div {
float:left;
width: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 { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
margin-left: 10px;
width: 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 { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
margin-left: 10px;
width: 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 { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
margin-left: 10px;
width: 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 { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
margin-left: 10px;
width: 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>
