jquery帶有參照數據的效果處理
幾個簡單小例子：javascript
1.入門二級聯動css
2.二級聯動html
3.三級聯動java
4.簡繁體轉換jquery
5.簡單答題數組
6.建立課程表模板數據結構
這些例子有個共同的原理，就是有一個寫好的參考數據模型，經過這個參考處理！什麼參考，看下面！app
1、最low的二級聯動ide
我們運行下面的代碼，引入jq類庫函數
<!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>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
$(".one-1").change(function(){
var relval=$(this).val();
handle(relval);
});
function handle(relval){
switch(relval)
{
case '1':
$(".tow-1").show().siblings().hide()
break;
case '2':
$(".tow-2").show().siblings().hide()
break;
case '3':
$(".tow-3").show().siblings().hide()
break;
case '4':
$(".tow-4").show().siblings().hide()
break;
default:
$(".sel-two").children().hide();
;
}
};
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
<option>請選擇</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</span>
<span class="sel-two">
<select class="tow-1" style="display:none">
<option>1-1</option>
<option>1-2</option>
<option>1-3</option>
<option>1-4</option>
</select>
<select class="tow-2" style="display:none">
<option>2-1</option>
<option>2-2</option>
<option>2-3</option>
<option>2-4</option>
</select>
<select class="tow-3" style="display:none">
<option>3-1</option>
<option>3-2</option>
<option>3-3</option>
<option>3-4</option>
</select>
<select class="tow-4" style="display:none">
<option>4-1</option>
<option>4-2</option>
<option>4-3</option>
<option>4-4</option>
</select>
</span>
</body>
</html>
徹底靠具體的分支判斷去告訴要顯示哪個，若是少還能夠，若是不是1-5而是20多個怎麼辦，估計這麼寫就累死，並且頁面會有一大推select標籤
2、二級聯動流程實現
我引導你們這麼去想：
1.頁面存放一級的select標籤，不過沒有option內容，
2.一級select的option都是動態插入內容
3.內容咱們放在一個數組裏，如['請選擇'，1,2,3,4]
4.找到一級select循環插入這些內容，
5.給一級select加change事件，輸出一級select內容
下面是引導後的代碼：
<!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>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=["請選擇",1,2,3,4];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i]+'</option>')
});
$(".one-1").change(function(){
var relval=$(this).val();
alert(relval)
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>
我是利用jq的$.each工具函數，你們用for是同樣的，如今咱們完成了一級的實現。
接下來的引導：
1.咱們點擊一級後，我要彈出和他相關的全部內容，
2.咱們能夠充實數組，把一維的變爲多維數組，以下
["請選擇",1,2,3,4] 改成
[["請選擇",'no'],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];
造成如此數組，咱們知道給一級select添加內容就是 arr[0][0]遍歷處理了
3.輸出一級內容相關的關係內容
代碼以下：
<!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>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=[["請選擇",'no'],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i][0]+'</option>')
});
$(".one-1").change(function(){
var relval=$(this).val();
$.each(onearr,function(i,ele){
if(onearr[i][0]==relval){
alert(onearr[i][1])
}
});
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>
除了一級內容爲「請選擇」時，其餘點擊選中彈出的內容就應該是咱們二級select的option，你們已經能夠發現
咱們對代碼進行動態節點插入操做：
排除第一項，就是onearr[i][0]的i等於0的不插入select
根據一級select的內容與數組做對比，若是相等
開始建立二級select，而且把相關的內容循環插入select
咱們每次二級select插入前要先刪除它，避免累計
爲告終構的統一，咱們把數組改爲[["請選擇",[]],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];
沒有的就讓相關數組爲空
完整代碼以下：
<!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>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=[["請選擇",[]],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i][0]+'</option>')
});
$(".one-1").change(function(){
var relval=$(this).val();
$.each(onearr,function(i,ele){
if(onearr[i][0]==relval){
if(onearr[i][1].length==0){
$(".sel-two").children().remove();
}else{
$(".sel-two").children().remove();
var twosel=$("<select></select>")
$(".sel-two").append(twosel);
$.each(onearr[i][1],function(j,ele){
twosel.append('<option>'+onearr[i][1][j]+'</option>')
});
};
}
});
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>
3、三級聯動
咱們預覽下面的二級聯動，是否是有很相識的感受
<!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>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=[["請選擇",[]],["河北省",["唐山市","石家莊"]],["河南省",["鄭州市","開封市","洛陽市","平頂山市"]],["吉林省",["長春市","四平市","白山市"]],["北京市",["朝陽區"]]];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i][0]+'</option>')
});
$(".one-1").change(function(){
var relval=$(this).val();
$.each(onearr,function(i,ele){
if(onearr[i][0]==relval){
if(onearr[i][1].length==0){
$(".sel-two").children().remove();
}else{
$(".sel-two").children().remove();
var twosel=$("<select></select>")
$(".sel-two").append(twosel);
$.each(onearr[i][1],function(j,ele){
twosel.append('<option>'+onearr[i][1][j]+'</option>')
});
};
}
});
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>
選擇省以後，關聯出省全部的市，咱們作的三級，就應該在二級市的選中後關聯出縣，沒有的如北京不彈出
咱們知道，咱們的二級select是js添加，俗稱腳本添加，這樣的元素不能和一級select同樣監聽事件，要用過
delegate去處理，咱們爲了合理處理，修改以下：
1.數組 市加入「請選擇」
2.給腳本添加的二級select添加事件測試
3.添加三級select容器
<!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>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=[["請選擇",[]],["河北省",["請選擇","唐山市","石家莊"]],["河南省",["請選擇","鄭州市","開封市","洛陽市","平頂山市"]],["吉林省",["請選擇","長春市","四平市","白山市"]],["北京市",["請選擇","朝陽區"]]];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i][0]+'</option>')
});
$(".one-1").change(function(){
var relval=$(this).val();
$.each(onearr,function(i,ele){
if(onearr[i][0]==relval){
if(onearr[i][1].length==0){
$(".sel-two").children().remove();
}else{
$(".sel-two").children().remove();
var twosel=$('<select class="two-1"></select>')
$(".sel-two").append(twosel);
$.each(onearr[i][1],function(j,ele){
twosel.append('<option>'+onearr[i][1][j]+'</option>')
});
};
}
});
});
$(".sel-two").delegate(".two-1","change",function(){
alert("將來元素或者腳本添加元素監聽事件")
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
<span class="sel-three">
</span>
</body>
</html>
咱們瀏覽頁面，彈出二級下拉，選擇選項出現了提示，提示部分就是咱們三級彈出的代碼位置
引導：
1.咱們已經處理了一級，二級會補充數組，在增長一層數據結構
2.事件處理
咱們對代碼作二級處理就能夠了，複製一級事件代碼內容到二級事件內部，經過數組遍歷和判斷，
完整代碼以下：
<!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>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=
[
["請選擇",[]],
["河北省",
[["請選擇",[]],
["唐山市",["玉田縣","豐潤縣"]],
["石家莊",["窮死縣","窮縣"]]]],
["河南省",
[["請選擇",[]],
["鄭州市",["1縣"]],
["開封市",[99]],
["洛陽市",[]],
["平頂山市",[]]]],
["吉林省",
[["請選擇",[]],
["長春市",[]],
["四平市",[]],
["白山市",[]]]],
["北京市",
[["請選擇",[]],
["朝陽區",[]]]]
];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i][0]+'</option>')
});
var twoindex=-1;
$(".one-1").change(function(){
var relval=$(this).val();
$.each(onearr,function(i,ele){
if(onearr[i][0]==relval){
if(onearr[i][1].length==0){
$(".sel-two").children().remove();
$(".sel-three").children().remove();
}else{
twoindex=i;
$(".sel-two").children().remove();
$(".sel-three").children().remove();
var twosel=$('<select class="two-1"></select>')
$(".sel-two").append(twosel);
$.each(onearr[i][1],function(j,ele){
twosel.append('<option>'+onearr[i][1][j][0]+'</option>')
});
};
}
});
});
$(".sel-two").delegate(".two-1","change",function(){
var tworelval=$(this).val();
$.each(onearr[twoindex][1],function(i,ele){
if(onearr[twoindex][1][i][0]==tworelval){
if(onearr[twoindex][1][i][1].length==0){
$(".sel-three").children().remove();
}else{
$(".sel-three").children().remove();
var threesel=$('<select class="three-1"></select>')
$(".sel-three").append(threesel);
$.each(onearr[twoindex][1][i][1],function(j,ele){
threesel.append('<option>'+onearr[twoindex][1][i][1][j]+'</option>')
});
};
}
});
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
<span class="sel-three">
</span>
</body>
</html>
4、簡繁體轉換
var onearr= [ ["請選擇",[]], ["河北省", [["請選擇",[]], ["唐山市",["玉田縣","豐潤縣"]], ["石家莊",["窮死縣","窮縣"]]]], ["河南省", [["請選擇",[]], ["鄭州市",["1縣"]], ["開封市",[99]], ["洛陽市",[]], ["平頂山市",[]]]], ["吉林省", [["請選擇",[]], ["長春市",[]], ["四平市",[]], ["白山市",[]]]], ["北京市", [["請選擇",[]], ["朝陽區",[]]]] ];
咱們搭建關聯多維數組，利用這種數據結構，實現了聯動，其實這算是比較複雜了，這種結構能夠變化的，多級聯動的結構有不少，能夠採用更加直觀，處理簡單的結構，這樣的算是一種很容易理解的結構建立！！！
簡繁體轉換是什麼？就是把你寫的正常文字（通常都是簡體，有人奇葩），轉爲過去人用的文字。
實現就是:
轉 ->轉
換-> 換
引導：
1.首先的有客戶輸入文字區域，那就是多行文本框就行，
2.js獲取全部文字（這時候是一堆字符串）
3.從頭到後遍歷一次，轉換？？？
這時候若是咱們的js中有這樣類型提供好的數據的話：
[['轉','轉'],['換','換']];
咱們把客戶字符串遍歷與數組每一項的第一個值做對比，相等把當前值改成這一項的第二個值就實現轉換了
咱們就用這隻有2個字的作處理，代碼以下：
<!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>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var jfchange=[['轉','轉'],['換','換']];
$("#btn").click(function(){
var str=$("#jfchange").val();
var arrstr=str.split("");
var len=arrstr.length;
if($("#btn").html()=="轉爲繁體"){
$.each(arrstr,function(i,e){
$.each(jfchange,function(j,e){
if(jfchange[j][0]==arrstr[i]){
arrstr[i]=jfchange[j][1];
}else{
arrstr[i]=arrstr[i];
};
});
});
$("#jfchange").val(arrstr.join(""));
$("#btn").html("轉爲簡體");
}else{
$.each(arrstr,function(i,e){
$.each(jfchange,function(j,e){
if(jfchange[j][1]==arrstr[i]){
arrstr[i]=jfchange[j][0];
}else{
arrstr[i]=arrstr[i];
};
});
});
$("#jfchange").val(arrstr.join(""));
$("#btn").html("轉爲繁體");
};
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<textarea id="jfchange" style="width:500px; height:200px; border:1px solid #000;">
</textarea>
<button id="btn">轉爲繁體</button>
</body>
</html>
咱們能夠擴展簡繁體的參考數據，這樣就能夠把更多文字轉換了
這時候咱們還能夠想到一個類似效果，「漢字註音」。
5、簡單答題處理
很是簡單的處理，每次只顯示一道題，選擇結果後跳到下一道，答題完顯示提交按鈕，最後輸出個統計
<!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>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var ok=['a','b','c','a','a'];
var rel=[];
$(".dd").find("input").change(function(){
rel.push($(this).val());
var obj=$(this);
setTimeout(function(){
obj.parent().parent().parent().hide().next().show();
},400);
});
$("#ok").click(function(){
var count=0;
$.each(rel,function(i,e){
if(rel[i]==ok[i]){
count+=1;
}
});
alert("正確個數是"+count+"個")
})
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<ul>
<li>
<p>1題</p>
<p class="dd">
<label><input type="radio" value="a"/>1</label>
<label><input type="radio" value="b"/>2</label>
<label><input type="radio" value="c"/>3</label>
</p>
</li>
<li style="display:none">
<p>2題</p>
<p class="dd">
<label><input type="radio" value="a"/>1</label>
<label><input type="radio" value="b"/>2</label>
<label><input type="radio" value="c"/>3</label>
</p>
</li>
<li style="display:none">
<p>3題</p>
<p class="dd">
<label><input type="radio" value="a"/>1</label>
<label><input type="radio" value="b"/>2</label>
<label><input type="radio" value="c"/>3</label>
</p>
</li>
<li style="display:none">
<p>4題</p>
<p class="dd">
<label><input type="radio" value="a"/>1</label>
<label><input type="radio" value="b"/>2</label>
<label><input type="radio" value="c"/>3</label>
</p>
</li>
<li style="display:none">
<p>5題</p>
<p class="dd">
<label><input type="radio" value="a"/>1</label>
<label><input type="radio" value="b"/>2</label>
<label><input type="radio" value="c"/>3</label>
</p>
</li>
<li style="display:none"><button id="ok">提交</button></li>
</ul>
</body>
</html>
6、建立課程表模板
一個課程表包含周和節次，建立模板就是建立周幾到周几上課，有多少節次的表格
<!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>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var weekcc= ['星期一','星期二','星期三','星期四','星期五'];
inittab(5,6,6,weekcc,4,2,0);
$(".updatatab-two").find("select").change(function(){
var am=zhuanInt($(".tabam").val());
var pm=zhuanInt($(".tabpm").val());
var ye=zhuanInt($(".tabye").val());
var rowb=parseInt(am)+parseInt(pm)+parseInt(ye);
weekcc=[];
$(".weekcon:checked").each(function(index) {
weekcc.push($(this).siblings("span").html());
});
var colb=$(".weekcon:checked").length;
$("#tablebox").remove();
inittab(colb,rowb,rowb,weekcc,am,pm,ye);
});
$(".weekcon").click(function(){
var am=zhuanInt($(".tabam").val());
var pm=zhuanInt($(".tabpm").val());
var ye=zhuanInt($(".tabye").val());
var rowb=parseInt(am)+parseInt(pm)+parseInt(ye);
weekcc=[];
$(".weekcon:checked").each(function(index) {
weekcc.push($(this).siblings("span").html());
});
var colb=$(".weekcon:checked").length;
$("#tablebox").remove();
inittab(colb,rowb,rowb,weekcc,am,pm,ye);
});
//end
});
//fun+++調用的幾個方法 ++++++++++++++++
function inittab(colval,rowval,jieci,weekc,am,pm,ye){
var tabc="<table width='100%' border='0' cellspacing='0' cellpadding='0' class='tablebox' id='tablebox'></table>";
$("#tabgu").append(tabc);
for(var i=0;i<rowval+1;i++){
var trc="<tr></tr>";
$("#tablebox").append(trc)
};
for(var j=0;j<colval+1;j++){
var tdc="<td></td>";
$("#tablebox").find("tr").append(tdc);
};
for(ii=1;ii<=jieci;ii++){
$("#tablebox").find("tr").eq(ii).find("td").eq(0).html("第"+ii+"節");
};
for(jj=1;jj<=weekc.length;jj++){
$("#tablebox").find("tr").eq(0).find("td").eq(jj).html(weekc[jj-1]);
};
for(var i1=1;i1<=am;i1++){
$("#tablebox").find("tr").eq(i1).addClass("am");
};
var i2val1=parseInt(am)+1;
var i2val2=parseInt(am)+parseInt(pm);
for(var i2=i2val1;i2<=i2val2;i2++){
$("#tablebox").find("tr").eq(i2).addClass("pm");
};
var i3val1=parseInt(am)+1+parseInt(pm);
var i3val2=parseInt(am)+parseInt(pm)+parseInt(ye);
for(var i3=i3val1;i3<=i3val2;i3++){
$("#tablebox").find("tr").eq(i3).addClass("ye");
};
};
function zhuanInt(yuanval){
if(yuanval=="不上課"){
return 0;
}else{
return yuanval;
}
};
//fun end
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
.wrapper{ width:1200px; margin:0 auto;}
.updatatab{ float:left; width:200px; background:#CCC;}
.tabcon{ float:left; width:800px;}
.tablebox{ border-collapse:collapse;}
.tablebox td{ border:1px solid #666; padding:20px;}
.updatatab-one label,.updatatab-two label{ display:block; margin:10px 5px;}
.am{ background:#fbf5e2;}
.pm{ background:#eef0f0;}
.ye{ background:#f8f7f4;}
</style>
</head>
<body>
<div class="wrapper">
<div class="updatatab">
<div class="updatatab-one">
<label><input type="checkbox" checked="checked" class="weekcon" /><span>星期一</span></label>
<label><input type="checkbox" checked="checked" class="weekcon" /><span>星期二</span></label>
<label><input type="checkbox" checked="checked" class="weekcon" /><span>星期三</span></label>
<label><input type="checkbox" checked="checked" class="weekcon" /><span>星期四</span></label>
<label><input type="checkbox" checked="checked" class="weekcon" /><span>星期五</span></label>
<label><input type="checkbox" class="weekcon" /><span>星期六</span></label>
<label><input type="checkbox" class="weekcon" /><span>星期日</span></label>
</div>
<div class="updatatab-two">
<label>上午<select class="tabam">
<option>不上課</option><option>1</option>
<option>2</option><option>3</option>
<option selected="selected">4</option>
<option>5</option><option>6</option>
</select>
</label>
<label>下午<select class="tabpm">
<option>不上課</option><option>1</option>
<option selected="selected">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</label>
<label>晚上<select class="tabye">
<option>不上課</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select></label>
</div>
</div>
<div class="tabcon" id="tabgu">
</div>
</div>
</body>
</html>
相關文章
- 1. jQuery效果函數
- 2. jQuery 效果函數
- 3. 【轉】5、android圖片特效處理之光照效果
- 4. Http請求帶有特殊字符的參數處理
- 5. 數據預處理之文件轉換kettle：使用參照表清理數據
- 6. jquery 動畫效果函數
- 7. HFSS數據處理結果
- 8. SQLite帶參數處理方法
- 9. jQuery--(4)效果
- 10. jquery——7效果
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • 錯誤處理 - RUST 教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery效果函數
- 2. jQuery 效果函數
- 3. 【轉】5、android圖片特效處理之光照效果
- 4. Http請求帶有特殊字符的參數處理
- 5. 數據預處理之文件轉換kettle：使用參照表清理數據
- 6. jquery 動畫效果函數
- 7. HFSS數據處理結果
- 8. SQLite帶參數處理方法
- 9. jQuery--(4)效果
- 10. jquery——7效果