form表單與模板引擎

表單在網頁中主要負責資料採集功能。html中的

$('#form').serialize()
// 呼叫的結果：
// username = 使用者名稱的值 & password = 密碼的值

注意：在使用serialize()函式快速獲取表單資料時，必須為每個表單元素新增 name 屬性

var rows=
$.each(res.data,function (i,item))

以上**是通過字串拼接的形式，來渲染ui結構。

如果ui結構比較複雜，則拼接字串的時候需要格外注意引號之前的巢狀。且一旦需求發生變化，修改起來也非常麻煩。

模板引擎能根據程式設計師指定的模板結構和資料，自動生成乙個完整的html頁面

減少了字串的拼接操作

使**結構更清晰

使**更易於閱讀和維護

art-template是乙個簡約、超快的模板引擎。中文官網首頁為art-template (aui.github.io)

在瀏覽器中訪問安裝 - art-template (aui.github.io)

姓名：年齡：會員：愛好：

匯入art-template

定義資料

定義模板

呼叫template函式

渲染html結構

什麼是標準語法

art-template 提供了}這種語法格式，在}內可以進行變數輸出，或迴圈陣列等操作，這種}語法在art-template中被稱為標準語法。

標準語法 — 輸出

}}}}}}

在}語法中，可以進行變數的輸出、物件屬性的輸出、三元表示式輸出、邏輯或輸出、加減乘除等表示式輸出。

標準語法 — 原文輸出

如果要輸出的value值中，包含了html標籤結構，則需要使用原文輸出語法，才能保證html標籤被正常渲染。

標準語法 — 條件輸出

如果要實現條件輸出，則可以在}中使用if…else if…/if的方式，按需輸出。

} 按需輸出的內容 }
} 按需輸出的內容 } 按需輸出的內容 }

標準語法 — 過濾器

過濾器的本質是乙個 function 處理函式

定義過濾器的基本語法如下：

template.defaults.imports.filtername = function(value)

定義乙個格式化的過濾器 dateformat 如下：

template.defaults.imports.dateformat = function(date)

exec()函式用於字串中的正規表示式的匹配。

如果字串中有匹配的值，返回該匹配值，否則返回null。

regexpobject.exec(string)

示例**如下：

var str = 'hello'
var pattern = /o/
// 輸出的結果["o",index:4,input:"hello",groups:undefined]
console.log(pattern.exec(str))

正規表示式中()包含起來的內容表示乙個分組，可以通過分組來提取自己想要的內容，示例：

var str = '我是} 
'var pattern = /}/
var patternresult = pattern.exec(str)
console.log(patternresult)
//得到 name 相關的分組資訊
//["}","name",index:7,input:"我是}
",groups:undefined]

replace()函式用於在字串中用一些字元替換另一些字元，語法格式如下：

var result = '123456'.replace('123','abc') // 得到的 result 的值為字串 『abc456』

示例：

var str = '我是}
'var pattern = /}/
var patternresult = pattern.exec(str)
str = str.replace(patternresult[0],patternresult[1])
//replace 函式返回值為替換後的新字串
//輸出的內容：我是name
console.log(str)

var str = '}今年}歲了
'var pattern = /}/
var patternresult = pattern.exec(str)
str = str.replace(patternresult[0],patternresult[1])
console.log(str)//輸出 name今年}歲了
patternresult = pattern.exec(str)
str = str.replace(patternresult[0],patternresult[1])
console.log(str)// 輸出 name今年age歲了
patternresult = pattern.exec(str)
console.log(patternresult)// 輸出 null

var str = '}今年}歲了
'var pattern = /}/
var patternresult = null
while(patternresult = pattern.exec(str))
console.log(str) //輸出 name今年age歲了

var data = 
var str = '}今年}歲了
'var pattern = /}/
var patternresult = null
while(patternresult = pattern.exec(str))
console.log(str)

Form表單控制項與浮動

第一點文字域textarea 語法屬性 name 控制項的名字 cols 指定文字域的列數，變相設定寬度 rows 指定文字域的行數，變相設定高度 readonly 唯讀 placeholder 提示語句第二點選項框兩個部分下拉選項框滾動列表語法建立下拉列表建立滾動列表屬性 sel...

寬度表單 Form表單

塊級元素和行內元素 1.塊級元素獨佔一行，行內元素在同一行顯示 2.塊級元素預設寬度為100 行內元素由內容撐開 3.塊級元素可以設定寬高，行內元素不可以設定寬高 4.塊級元素可以設定margin和padding和四個方向，行內元素只可以設定margin和padding和左右值，上下不起作用 5.塊...

關於表單（Form）

http協定基本的兩個請求方式為get與post，get請求方式為直接在請求的網址上傳送請求的相關資訊，例如 get login.jsp?user justin get請求方式由於是直接在網址上傳送請求的相關資訊，所以會在網址列上出現相關的請求資訊，例如一些表頭 post資料本體在設計表單的時候...

form表單與模板引擎

Form表單控制項與浮動

寬度 表單 Form表單

關於表單（Form）

相關推薦

寬度表單 Form表單