1. 控制字體style
<style>
.fontcolor {
color:#FF0000;
font-size:15px;
font-weight:bold;
}
</style>
顏色查看：
http://www.wahart.com.hk/rgb.htm
2. td中換行，以及for展示
<td>
<ul>
#foreach($model in $!data.list1)
<li>$!model</li>
#end
</ul>
</td>
3. 一些簡單語法
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
jQuery(document).ready(function(){
$("#searchSubmit").click(function() {
$("#searchForm").submit();
return false;
});
});
基礎語法：$(selector).action()
- 美元符號定義 jQuery $
- 選擇符（selector）“查詢”和“查找” HTML 元素
- jQuery 的 action() 執行對元素的操作
- 示例：
- $(this).hide() - 隱藏當前元素
- $("p").hide() - 隱藏所有段落
- $("p.test").hide() - 隱藏所有 class="test" 的段落
- $("#test").hide() - 隱藏所有 id="test" 的元素
選擇器-by tag：
- jQuery 使用 CSS 選擇器來選取 HTML 元素。
- 示例：
- $("p") 選取 <p> 元素。
- $("p.intro") 選取所有 class="intro" 的 <p> 元素。
- $("p#demo") 選取 id="demo" 的第一個 <p> 元素。
選擇器-by prop：
- jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
- 示例：
- $("[href]") 選取所有帶有 href 屬性的元素。
- $("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
- $("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
- $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
選擇器-css：
- jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
- 示例：
- $("p").css("background-color","red");
來點事件：
- 基於事件，我們可以做許多事情。
- 示例：
- $(document).ready(function)
- $(selector).click(function)
- $(selector).focus(function)
jQuery與html：
- jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
- 三個簡單實用的用於 DOM 操作的 jQuery 方法，get -- set：
- $(selector).text() -- text("")
- $(selector).html() -- html("")
- $(selector).val() -- html("")
- $(selector).attr("") -- attr("", "")
- 等同於，獲name來找，$("input[name='whichName']").val()，對它重新賦值$("input[name='whichName']").val(oldTopic);
jQuery-GET：
- $.get("yourUrl", function(data, status){}); 其中，data是controller里這樣寫回的response.write("")/modelMap帶回
- 示例：
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
jQuery-POST：
-
$.post(URL,data,callback); 其中，data是controller里這樣寫回的response.write("")/modelMap帶回
- 示例：
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
jQuery-遍歷：
-
$(selector).each(function(index,element))
- 示例：
- $("table").find("tr").each(function(){
$(this).find("td").each(function(){
alert($(this).text());
});
});
4. 常用方法
放在一個vm里太長了，可以單獨建立自己的.js文件，.vm里引入即可。
<script>
/** elementName標識的頁面元素的值，是否為空. */
function isNULL(elementname){
if($("input[name=" + elementname + "]").val() == ""){
return true;
}
return false;
}
/** elementName標識的頁面元素的值，是否超時limitedLength. */
function exceedLimitedLength(elementname, limitedLength){
if($("input[name=" + elementname + "]").val().length > limitedLength){
return true;
}
return false;
}
/** elementName標識的頁面元素的值，是否為數字. */
function isNum(elementname){
return isNaN($("input[name=" + elementname + "]").val());
}
/** 光標顯示在elementname標識的元素內. */
function focus(elementname){
$("input[name=" + elementname + "]").focus();
}
/** elementname標識的頁面元素是否為數字，如果不是，那么光標標在那里，並且提示用戶. */
function isNumber(elementname){
if(isNum(elementname)){
focus(elementname);
alert(elementname + "必須為數字");
return false;
}
return true;
}
/** elementname標識的頁面元素的值，是否包含了中文. */
function containsChinese(elementname){
var str = $("input[name=" + elementname + "]").val();
if(escape(str).indexOf("%u")>=0){
return true;
}
return false;
}
/** elementname標識的頁面元素的值，是否只包括字母、數字、中划線和下划線. */
function containsOnlyLettersNumberAndTwoDash(elementname){
var str = $("input[name=" + elementname + "]").val();
var patten = new RegExp(/^[a-zA-Z0-9\_\-]+$/);
return patten.test(str);
}
/** elementname標識的頁面元素的值，是否滿足這些約束：不為空、 長度<limitedLength、不包含中文、只包含字母數字中划下划. */
function satisfyAllConstraints(elementname, limitedLength){
if(isNULL(elementname)){
focus(elementname);
alert(elementname + "不可為空");
return false;
}
if(exceedLimitedLength(elementname, limitedLength)){
focus(elementname);
alert(elementname + "超過長度限制" + limitedLength);
return false;
}
if(containsChinese(elementname)){
focus(elementname);
alert(elementname + "不支持中文");
return false;
}
// 注意！
if(!containsOnlyLettersNumberAndTwoDash(elementname)){
focus(elementname);
alert(elementname + "僅支持字母、數字、中划線-、下滑線_");
return false;
}
return true;
}
</script>
以上是我用到的一些語法，更多可以參考w3school的教程，簡單又貼心: http://www.w3school.com.cn/jquery/jquery_syntax.asp
判斷字符串開頭、結尾，正則表達式：
var str = "xxx.xml.bak";
if (str.match("^xxx")) {
alert("xxx starts");
}
if (str.match("xml$")) {
alert("xml ends");
}