示例1：鼠標點擊左側菜單實現打開和關閉功能：
html及css代碼部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*css代碼*/
<style>
/*下面定義的樣式是隱藏*/
.hide {
display: none;
}
</style>
</head>
<div>
<div onclick="Change(this);">菜單一</div>
<div class="content hide">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
</div>
<div>
<div onclick="Change(this);">菜單二</div>
<div class="content hide">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
</div>
<div>
<div onclick="Change(this);">菜單三</div>
<div class="content hide">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/tab.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
js 代碼如下：
function Change(arg){
//選擇器案列：
/*找到，到底點擊一個
var t=$(arg).text();
$(arg) 當前點擊的標簽
*/
/*
隱藏閉合標簽步驟：
1找到下一個標簽，移除hide 【注意：hide 是自己定義的class樣式】
1）$(arg).next() 下一個標簽
2）removeClass('hide') 移除標簽
2.找到其他標簽，將內容隱藏，添加hide
1）當前標簽的父親標簽 $(arg).parent()
2) 所有父親標簽的兄弟標簽 $(arg).parent('content').siblings('hide') 【注意：content 是每個子標簽共有的一個樣式】
*/
$(arg).next().removeClass('hide');
$(arg).parent().siblings().find('.content').addClass('hide');
}
示例2：實現全選、反選、取消 功能：
html及css代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*CSS代碼*/
<style>
.subBorder {
position: fixed;
left: 50%;
right: 50%;
width: 400px;
height: 200px;
margin: 0 auto;
background: #999999;
}
.hide {
display: none;
}
#dialog form {
text-align: center;
}
</style>
</head>
<input type="button" onclick="CheckAll();" value="全選" />
<input type="button" onclick="CheckReverse();" value="反選" />
<input type="button" onclick="CheckCancel();" value="取消" />
<table border="2">
<thead></thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox" /></td>
<td>mysql-001</td>
<td>10.10.8.10</td>
<td>15379</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>redis-001</td>
<td>10.10.9.10</td>
<td>16379</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>monitor-001</td>
<td>10.10.10.10</td>
<td>17379</td>
</tr>
</tbody>
</table>
<div id="dialog" class="subBorder hide">
<form action="" method="get">
<p>主機名：<input type="text" id="hostname"/></p>
<p>ip地址：<input type="text" id="ip" /></p>
<p>端口號：<input type="text" id="port"/></p>
<input type="submit" onclick="return SubmitForm();" value="確認"/>
<input type="button" onclick="Cancel();" value="取消"/>
</form>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/checked.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
js 代碼如下：
//全選
function CheckAll(){
//$('#tb1').find(':checkbox').attr('checked','checked');
$('#tb1').find(':checkbox').prop('checked',true);
}
//反選
function CheckReverse(){
//找，如果選中，取消，位選中，則選中
$('#tb1').find(':checkbox').each(function(){
//$(this) 等於 每一個復選框
//$(this).prop() 如果選中，true，否則false
//attr 如果選中，checked，checked=checked
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
function CheckCancel(){
//$('#tb1').find(':checkbox').removeAttr('checked'); <==>
$('#tb1').find(':checkbox').prop('checked',false);
}
示例3：實現彈出編輯對話框及編輯功能：
html及css代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*css代碼*/
<style>
.subBorder {
position: fixed;
left: 50%;
right: 50%;
width: 400px;
height: 200px;
margin-left: -200px;
margin-bottom: -100px;
background: #999999;
}
.hide {
display: none;
}
#dialog form {
text-align: center;
}
</style>
</head>
<table border="2">
<thead></thead>
<tbody>
<tr>
<td>mysql-001</td>
<td>10.10.8.10</td>
<td>15379</td>
<td onclick="GetPrev(this);">編輯</td>
</tr>
<tr>
<td>redis-001</td>
<td>10.10.9.10</td>
<td>16379</td>
<td onclick="GetPrev(this);">編輯</td>
</tr>
<tr>
<td>monitor-001</td>
<td>10.10.10.10</td>
<td>17379</td>
<td onclick="GetPrev(this);">編輯</td>
</tr>
</tbody>
</table>
<div id="dialog" class="subBorder hide">
<form action="" method="get">
<p>主機名：<input type="text" id="hostname"/></p>
<p>ip地址：<input type="text" id="ip" /></p>
<p>端口號：<input type="text" id="port"/></p>
<input type="submit" onclick="return SubmitForm();" value="確認"/>
<input type="button" onclick="Cancel();" value="取消"/>
</form>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/edit.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
js 代碼如下：
function GetPrev(getvalue){
var list = [];
$.each($(getvalue).prevAll(),function(i){
var item = $(getvalue).prevAll()[i];
var text = $(item).text();
list.push(text);
});
var new_list = list.reverse();
//在彈出框的hostname中設置值
$("#hostname").val(new_list[0]);
$("#ip").val(new_list[1]);
$("#port").val(new_list[2]);
$("#dialog").removeClass("hide");
}
function Cancel(){
$("#dialog").addClass("hide");
}
function SubmitForm(){
//獲取表單中的input值，並在判斷值是否為空
var ret=true;
//遍歷所有的input，只要值為空，就將ret設置為false
//$("input[type='text']") <==> $(':text')
$(':text').each(function(){
//$(this) 等於要循環的每一個元素
var value=$(this).val();
if (value.trim().length==0){ //判斷長度是否為0. 或判斷是否為空：<==> if (value.itrm()=="") //trim: 去除空格
$(this).css('border-color','red'); //設置邊框為紅色（意思是：如果用戶輸入為空，則邊框顯示紅色警示）
ret=false //設置false
}else{
$(this).css('border-color','green') //當輸入不為空時，提交時將所有不為空的元素邊框設置為綠色
}
});
return ret;
}