[toc]
JS
window.setInterval（）
該函數(shù)的意義是讓瀏覽器定時(shí)執(zhí)行一些設(shè)定好的函數(shù)代碼翎嫡，
如:window.setInterval（'abc()',3000）拟淮；即瀏覽器第隔3稱秒都會(huì)執(zhí)行一次abc函數(shù)耸采。
jquery $.each(data, function (index, value)
遍歷處理data灭翔，可以是數(shù)組、DOM剔氏、json等威恼，取決于直接給定或者ajax返回的類型function (index, value)中index是當(dāng)前元素的位置，value是值疆拘。
// each處理一維數(shù)組
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});
// 處理json數(shù)據(jù)蜕猫，例如ajax的返回值
var obj = { one:1, two:2, three:3};
$.each(obj, function(key, val) {
alert(key);
alert(val);
});
ajax的提交數(shù)據(jù)返回json數(shù)據(jù)
var obj =
{
type : "POST",
url : "/ZNPK/TeacherKBFB_table" + "/" + semester_select + "/"+ teacher_select + "/" + code
};
$.ajax(obj).done(function(result)
{
if (result.length == 0)
{
$('#List').empty();
alert("此老師沒(méi)有課程/驗(yàn)證碼錯(cuò)誤！");
}
else
{
//情況table數(shù)據(jù)
$('#List').empty();
createTable(result);
}
});
$.ajax(
{
url: "/api/getWeather",
data:
{
zipcode: 97201
},
success: function( result )
{
$( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
}
});
var obj=
{
contentType: "application/json; charset=utf-8",
type:"POST",
url:"http://"+ip+"/teacher/queryClassByTeacher",
data:JSON.stringify(
{
term:xqxn,
teacher:teacher,
yzm:code})
};
$.ajax(obj).done(function(result)
{
if(result['success'] && result['error']==null)
{
************
}
else
{
var error=result['error'];
alert(error);
return ;
}
});
SpringMVC Controller接收前臺(tái)ajax的GET或POST請(qǐng)求返回各種參數(shù)：
http://blog.csdn.net/xie_xiansheng/article/details/54377311
href="javascript:void(0)"
javascript:是偽協(xié)議哎迄，表示url的內(nèi)容通過(guò)javascript執(zhí)行回右。
void(0)表示不作任何操作，這樣會(huì)防止鏈接跳轉(zhuǎn)到其他頁(yè)面漱挚。
這么做往往是為了保留鏈接的樣式翔烁，但不讓鏈接執(zhí)行實(shí)際操作，具體的操作交給鏈接的onclick事件處理
Bootstrap
1 Bootstrap的常用類的總結(jié)
網(wǎng)格選項(xiàng)
row :行
col-*-: 列 (第一個(gè)*可以為xs[超小]/sm[小型]/md[中型]/lg[大型]第二個(gè)**必須為12以內(nèi)的[列數(shù)])
col-*-offset-* :列偏移(第一個(gè)*和上面一樣,第二個(gè)*范圍是1到11,表示把該列的左外邊距(margin)增加*列)
col-*--:列排序(第一個(gè)*和上面一樣,第二個(gè)***可以為push[向右]/pull[向左],第三個(gè)*范圍是1到11[列數(shù)])
排版
small:內(nèi)聯(lián)子標(biāo)題
lead:引導(dǎo)主體副本
text-*:文本樣式(*號(hào)可以為
left[左對(duì)齊]/center[居中對(duì)齊]/right[右對(duì)齊]/muted[減弱文本]
/primary/success/info/warning/danger
/justify[自動(dòng)換行]/nowrap[不換行]
/lowercase[小寫(xiě)]/uppercase[大寫(xiě)]/capitalize[首字母大寫(xiě)])
list-inline:列表置于同一行
表格
table:基本樣式(只有橫向分隔線)
table-*:表格樣式(*可以為striped[添加條紋]/bordered[添加邊框]/hover[啟用懸停]/condensed[更加緊湊])
tr/th/td 有active/success/info/warning/danger來(lái)改變背景顏色
將任意的table放在table-responsive內(nèi),實(shí)現(xiàn)響應(yīng)式表格
bootstrap里active/success/info/warning/danger對(duì)應(yīng)的背景顏色
表單
創(chuàng)建基本表單(垂直表單)的步驟
1.向父 <form> 元素添加 role="form"旨涝。
\2. 把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中蹬屹。這是獲取最佳間距所必需的。
\3. 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control哩治。
創(chuàng)建水平表單的步驟
1.向父 <form> 元素添加 class .form-horizontal秃踩。
2.把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。
3.向標(biāo)簽添加 class .control-label业筏。
常見(jiàn)的表單控件主要是 input、textarea鸟赫、checkbox蒜胖、radio 和 select。
input: 聲明type有text抛蚤、password台谢、datetime、datetime-local岁经、date朋沮、month、time缀壤、week樊拓、
number、email塘慕、url筋夏、search、tel 和 color图呢。
textarea: row決定高度
checkbox: 復(fù)選框
radio:單選框
checkbox-inline:內(nèi)聯(lián)的復(fù)選框和單選框
select:選擇框
對(duì)父元素添加驗(yàn)證狀態(tài)has-*:驗(yàn)證樣式(*可以為warning/error/success)
按鈕
btn:基本樣式
btn-*:其他樣式(*可以為default/primary/success/info/warning/danger
/link[讓按鈕看起來(lái)像個(gè)鏈接]
/lg/sm/xs/
block[塊級(jí)按鈕,拉伸至父元素100%的寬度]/active/disabled)
圖片
img-*:圖片樣式(*可以為rounded[圓角6px]
? /circle[圓形]
? /thumbnail[添加內(nèi)邊距和一個(gè)灰色的邊框]/responsive)
輔助類
Bootstrap里的一些輔助類,除了上面的active/success/info/warning/danger 還有
pull-left/right 元素浮動(dòng)到左邊/右邊
center-block 設(shè)置元素為 display:block 并居中顯示
clearfix 清除浮動(dòng)
show/hidden 強(qiáng)制顯示/隱藏
close 顯示關(guān)閉按鈕
caret 顯示下拉式功能
divider 分隔線
字體圖標(biāo)
在 fonts 文件夾內(nèi)可以找到字體圖標(biāo)条篷，它包含了下列這些文件：
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff12341234
更多圖標(biāo)參考http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
下拉菜單
dropdown:下拉菜單
dropdown-menu: 下拉菜單
dropdown-header:下拉菜單區(qū)域標(biāo)題
按鈕組
btn-group:里面放置一系列btn
btn-toolbar:里面放置幾組btn-group
btn-group-*:調(diào)整按鈕組的樣式(*可以為xs/sm/lg/vertical)
.btn-group 容器添加 .dropup實(shí)現(xiàn)按鈕上拉菜單
輸入框組
向 .form-control 添加前綴或后綴元素的步驟如下：
1.把前綴或后綴元素放在一個(gè)帶有 class .input-group 的 <div> 中。
2.接著蛤织，在相同的 <div> 內(nèi)赴叹，在 class 為 .input-group-addon 的 <span> 內(nèi)放置額外的內(nèi)容。
3.把該 <span> 放置在 <input> 元素的前面或者后面指蚜。
為了保持跨瀏覽器的兼容性乞巧，請(qǐng)避免使用
<select>元素，因?yàn)樗鼈冊(cè)?WebKit
瀏覽器中不能完全渲染出效果姚炕。也不要直接向表單組應(yīng)用輸入框組的class摊欠，輸入框組是一個(gè)孤立的組件。
導(dǎo)航元素
nav nav-tabs :標(biāo)簽式的導(dǎo)航菜單
nav nav-pills: 膠囊式的導(dǎo)航菜單
//同時(shí)使用nav-stacked 讓膠囊垂直堆疊
//同時(shí)使用nav-justified 讓標(biāo)簽式或膠囊式導(dǎo)航菜單與父元素等寬
導(dǎo)航欄
創(chuàng)建一個(gè)默認(rèn)的導(dǎo)航欄的步驟如下：
1.向 <nav> 標(biāo)簽添加 class .navbar柱宦、.navbar-default些椒。
2.向上面的元素添加 role="navigation"，有助于增加可訪問(wèn)性掸刊。
3.向 <div> 元素添加一個(gè)標(biāo)題 class .navbar-header免糕，內(nèi)部包含了帶有 class navbar-brand 的 <a> 元素。這會(huì)讓文本看起來(lái)更大一號(hào)。
為了向?qū)Ш綑谔砑渔溄邮ぃ恍枰?jiǎn)單地添加帶有 class .nav牌芋、.navbar-nav 的無(wú)序列表即可。
navbar-btn: 導(dǎo)航欄中的按鈕
navbar-text:導(dǎo)航欄中的文本
navbar-link:非標(biāo)準(zhǔn)導(dǎo)航鏈接
navbar-left/right:向左/向右對(duì)齊
navbar-fixed-top/bottom:固定在頂部/底部(為了防止導(dǎo)航欄與頁(yè)面主體中的其他內(nèi)容的頂部相交錯(cuò)松逊，請(qǐng)向 <body>標(biāo)簽添加至少 50 像素的內(nèi)邊距（padding）躺屁，內(nèi)邊距的值可以根據(jù)您的需要進(jìn)行設(shè)置)
navbar-static-top:能隨著頁(yè)面一起滾動(dòng)的導(dǎo)航欄
nav-inverse :帶有黑色背景白色文本的導(dǎo)航欄
面包屑導(dǎo)航
breadcrumb11
分頁(yè)
`pagination`:分頁(yè)
`disabled/active` :不可點(diǎn)擊/當(dāng)前頁(yè)面
`pager`:翻頁(yè)
`previous/next`:把鏈接向左/向右對(duì)齊
標(biāo)簽
label-*:標(biāo)簽(*可以為default/primary/success/info/warning/danger)
徽章
badge
超大屏幕
jumbotron11
頁(yè)面標(biāo)題
page-header11
縮略圖
thumbnail11
添加自定義的內(nèi)容
現(xiàn)在我們有了一個(gè)基本的縮略圖，我們可以向縮略圖添加各種 HTML 內(nèi)容经宏，比如標(biāo)題犀暑、段落或按鈕。具體步驟如下：
1.把帶有 class .thumbnail 的 <a> 標(biāo)簽改為 <div>烁兰。
2.在該 <div> 內(nèi)耐亏，您可以添加任何您想要添加的東西。由于這是一個(gè) <div>沪斟，我們可以使用默認(rèn)的基于 span 的命名規(guī)則來(lái)調(diào)整大小广辰。
3.如果您想要給多個(gè)圖像進(jìn)行分組，請(qǐng)把它們放置在一個(gè)無(wú)序列表中主之，且每個(gè)列表項(xiàng)向左浮動(dòng)择吊。
警告
alert alert-*:警告框(*可以為success/info/warning/danger)
創(chuàng)建一個(gè)可取消的警告（Dismissal Alert）步驟如下：
1.通過(guò)創(chuàng)建一個(gè) <div>，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success杀餐、.alert-info干发、.alert-warning、.alert-danger）之一史翘，來(lái)添加一個(gè)基本的警告框枉长。
2.同時(shí)向上面的 <div> class 添加可選的 .alert-dismissable。
3.添加一個(gè)關(guān)閉按鈕琼讽。
進(jìn)度條
創(chuàng)建一個(gè)基本的進(jìn)度條的步驟如下：
1.添加一個(gè)帶有 class .progress 的 <div>必峰。
//同時(shí)添加.progress-striped來(lái)實(shí)現(xiàn)條紋樣式的進(jìn)度條
//然后添加active會(huì)使條紋具有從右向左的運(yùn)動(dòng)感
2.接著，在上面的 <div> 內(nèi)钻蹬，添加一個(gè)帶有 class .progress-bar 的空的 <div>吼蚁。
//同時(shí)添加class progress-bar-*來(lái)實(shí)現(xiàn)交替樣式的進(jìn)度條,其中，* 可以是success问欠、info肝匆、warning、danger顺献。
3.添加一個(gè)帶有百分比表示的寬度的 style 屬性旗国，例如 style="60%"; 表示進(jìn)度條在 60% 的位置。
多媒體對(duì)象
media:允許將媒體對(duì)象里的多媒體（圖像注整、視頻能曾、音頻）浮動(dòng)到內(nèi)容區(qū)塊的左邊或者右邊度硝。
.media-list：如果你需要一個(gè)列表，各項(xiàng)內(nèi)容是無(wú)序列表的一部分寿冕，可以使用該 class蕊程。可用于評(píng)論列表與文章列表
列表組
創(chuàng)建一個(gè)基本的列表組的步驟如下：
向元素 <ul> 添加 class .list-group驼唱。
向 <li> 添加 class .list-group-item藻茂。
list-group-item-heading:每個(gè)item的頂部,類似于iOS里cell的text
list-group-item-text:每個(gè)item的文字,類似于ios里cell的subtitle text
面板
panel panel-default:面板
panel-heading:面板頭部
panel-title:面板標(biāo)題
panel-body:面板內(nèi)容
panel-footer:面板腳注
AJax
1 提交數(shù)據(jù)格式
var boy = function(){
JQuery.ajax({
url: ,
data:{param:1,param:2},
contentType:"",
success:function(a,b,c){
var temp = c.responseJSON.***
},
error:function(){
}
});
}
備注：
a:object
b:status
c:object
