夜半难眠 » Web开发

Jquery html(val)使用注意

Haven — Thu, 27 May 2010 05:46:16 +0000

Jquery的html(val)可以方面的向页面元素内部插入html代码，但要注意插入的html代码中不能包含script代码块，如果包含这样的代码jquery会在插入的时候自动过滤掉，遇到这样的问题最好的方法还是用document.getElementById(”div”).innerHTML=html最保险。

2009年09月20日 -- JQuery基础入门-输入验证

找到一份比较全面的freemarker语法总结

Haven — Tue, 11 May 2010 04:41:05 +0000

网上找到的。这份总结很全面。里面还有很详细的列子，一看就明白

语法

FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成:
1. 文本:直接输出的部分
2. 注释:<#– … –>格式部分,不会输出
3. 插值:即${…}或#{…}格式的部分,将使用数据模型中的部分替代输出
4. FTL指令:FreeMarker指定,和HTML标记类似,名字前加#予以区分,不会输出

1. FTL指令规则

在FreeMarker中,使用FTL标签来使用指令,FreeMarker有3种FTL标签,这和HTML标签是完全类似的.
1.开始标签:<#directivename parameter>
2.结束标签:
3.空标签:<#directivename parameter/>

实际上,使用标签时前面的符号#也可能变成@,如果该指令是一个用户指令而不是系统内建指令时,应将#符号改成@符号.
使用FTL标签时, 应该有正确的嵌套,而不是交叉使用,这和XML标签的用法完全一样.如果全用不存在的指令,FreeMarker不会使用模板输出,而是产生一个错误消息.FreeMarker会忽略FTL标签中的空白字符.值得注意的是< , /> 和指令之间不允许有空白字符.

2. 插值规则

FreeMarker的插值有如下两种类型:1,通用插值${expr};2,数字格式化插值:#{expr}或#{expr;format}

2.1 通用插值

对于通用插值,又可以分为以下4种情况:
1. 插值结果为字符串值:直接输出表达式结果
2. 插值结果为数字值:根据默认格式(由#setting指令设置)将表达式结果转换成文本输出.可以使用内建的字符串函数格式化单个插值,如下面的例子:
<#settion number_format=”currency”/>
<#assign answer=42/>
${answer}
${answer?string} <#– the same as ${answer} –>
${answer?string.number}
${answer?string.currency}
${answer?string.percent}
${answer}
输出结果是:
$42.00
$42.00
42
$42.00
4,200%
3. 插值结果为日期值:根据默认格式(由#setting指令设置)将表达式结果转换成文本输出.可以使用内建的字符串函数格式化单个插值,如下面的例子:
${lastUpdated?string(”yyyy-MM-dd HH:mm:ss zzzz”)}
${lastUpdated?string(”EEE, MMM d, ”yy”)}
${lastUpdated?string(”EEEE, MMMM dd, yyyy, hh:mm:ss a ‘(’zzz’)'”)}
输出结果是:
2008-04-08 08:08:08 Pacific Daylight Time
Tue, Apr 8, ‘03
Tuesday, April 08, 2003, 08:08:08 PM (PDT)
4. 插值结果为布尔值:根据默认格式(由#setting指令设置)将表达式结果转换成文本输出.可以使用内建的字符串函数格式化单个插值,如下面的例子:
<#assign foo=true/>
${foo?string(”yes”, “no”)}
输出结果是:
yes

2.2 数字格式化插值

数字格式化插值可采用#{expr;format}形式来格式化数字,其中format可以是:
mX:小数部分最小X位
MX:小数部分最大X位
如下面的例子:
<#assign x=2.582/>
<#assign y=4/>
#{x; M2} <#– 输出2.58 –>
#{y; M2} <#– 输出4 –>
#{x; m2} <#– 输出2.6 –>
#{y; m2} <#– 输出4.0 –>
#{x; m1M2} <#– 输出2.58 –>
#{x; m1M2} <#– 输出4.0 –>

3. 表达式

表达式是FreeMarker模板的核心功能,表达式放置在插值语法${}之中时,表明需要输出表达式的值;表达式语法也可与FreeMarker 标签结合,用于控制输出.实际上FreeMarker的表达式功能非常强大,它不仅支持直接指定值,输出变量值,也支持字符串格式化输出和集合访问等功能.

3.1 直接指定值

使用直接指定值语法让FreeMarker直接输出插值中的值,而不是输出变量值.直接指定值可以是字符串,数值,布尔值,集合和MAP对象.

1. 字符串
直接指定字符串值使用单引号或双引号限定,如果字符串值中包含特殊字符需要转义,看下面的例子:
${”我的文件保存在C:\\盘”}
${’我名字是\”annlee\”‘}
输出结果是:
我的文件保存在C:\盘
我名字是”annlee”

FreeMarker支持如下转义字符:
\”;双引号(u0022)
\’;单引号(u0027)
\\;反斜杠(u005C)
\n;换行(u000A)
\r;回车(u000D)
\t;Tab(u0009)
\b;退格键(u0008)
\f;Form feed(u000C)
\l;<
\g;>
\a;&
\{;{
\xCode;直接通过4位的16进制数来指定Unicode码,输出该unicode码对应的字符.

如果某段文本中包含大量的特殊符号,FreeMarker提供了另一种特殊格式:可以在指定字符串内容的引号前增加r标记,在r标记后的文件将会直接输出.看如下代码:
${r”${foo}”}
${r”C:\foo\bar”}
输出结果是:
${foo}
C:\foo\bar

2. 数值
表达式中的数值直接输出,不需要引号.小数点使用”.”分隔,不能使用分组”,”符号.FreeMarker目前还不支持科学计数法,所以”1E3″是错误的.在FreeMarker表达式中使用数值需要注意以下几点:
a)数值不能省略小数点前面的0,所以”.5″是错误的写法
b)数值8 , +8 , 8.00都是相同的

3. 布尔值
直接使用true和false,不使用引号.

4. 集合
集合以方括号包括,各集合元素之间以英文逗号”,”分隔,看如下的例子:
<#list ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"] as x>
${x}

输出结果是:
星期一
星期二
星期三
星期四
星期五
星期六
星期天

除此之外,集合元素也可以是表达式,例子如下:
[2 + 2, [1, 2, 3, 4], “whatnot”]

还可以使用数字范围定义数字集合,如2..5等同于[2, 3, 4, 5],但是更有效率.注意,使用数字范围来定义集合时无需使用方括号,数字范围也支持反递增的数字范围,如5..2

5,Map对象
Map对象使用花括号包括,Map中的key-value对之间以英文冒号”:”分隔,多组key-value对之间以英文逗号”,”分隔.下面是一个例子:
{”语文”:78, “数学”:80}
Map对象的key和value都是表达式,但是key必须是字符串

3.2 输出变量值

FreeMarker的表达式输出变量时,这些变量可以是顶层变量,也可以是Map对象中的变量,还可以是集合中的变量,并可以使用点(.)语法来访问Java对象的属性.下面分别讨论这些情况

1. 顶层变量
所谓顶层变量就是直接放在数据模型中的值,例如有如下数据模型:
Map root = new HashMap(); //创建数据模型
root.put(”name”,”annlee”); //name是一个顶层变量

对于顶层变量,直接使用${variableName}来输出变量值,变量名只能是字母,数字,下划线,$,@和#的组合,且不能以数字开头号.为了输出上面的name的值,可以使用如下语法:
${name}

2. 输出集合元素
如果需要输出集合元素,则可以根据集合元素的索引来输出集合元素,集合元素的索引以方括号指定.假设有索引:
["星期一","星期二","星期三","星期四","星期五","星期六","星期天"].该索引名为week,如果需要输出星期三,则可以使用如下语法:
${week[2]} //输出第三个集合元素

此外,FreeMarker还支持返回集合的子集合,如果需要返回集合的子集合,则可以使用如下语法:
week[3..5] //返回week集合的子集合,子集合中的元素是week集合中的第4-6个元素

3. 输出Map元素
这里的Map对象可以是直接HashMap的实例,甚至包括JavaBean实例,对于JavaBean实例而言,我们一样可以把其当成属性为key,属性值为value的Map实例.为了输出Map元素的值,可以使用点语法或方括号语法.假如有下面的数据模型:
Map root = new HashMap();
Book book = new Book();
Author author = new Author();
author.setName(”annlee”);
author.setAddress(”gz”);
book.setName(”struts2″);
book.setAuthor(author);
root.put(”info”,”struts”);
root.put(”book”, book);

为了访问数据模型中名为struts2的书的作者的名字,可以使用如下语法:
book.author.name    //全部使用点语法
book["author"].name
book.author["name"]    //混合使用点语法和方括号语法
book["author"]["name"]   //全部使用方括号语法

使用点语法时,变量名字有顶层变量一样的限制,但方括号语法没有该限制,因为名字可以是任意表达式的结果.

3.3字符串操作

FreeMarker的表达式对字符串操作非常灵活,可以将字符串常量和变量连接起来,也可以返回字符串的子串等.

字符串连接有两种语法:
1. 使用${..}或#{..}在字符串常量部分插入表达式的值,从而完成字符串连接.
2. 直接使用连接运算符+来连接字符串

例如有如下数据模型:
Map root = new HashMap(); root.put(”user”,”annlee”);
下面将user变量和常量连接起来:
${”hello, ${user}!”} //使用第一种语法来连接
${”hello, ” + user + “!”} //使用+号来连接
上面的输出字符串都是hello,annlee!,可以看出这两种语法的效果完全一样.

值得注意的是,${..}只能用于文本部分,不能用于表达式,下面的代码是错误的:
<#if ${isBig}>Wow!
<#if “${isBig}”>Wow!
应该写成:<#if isBig>Wow!

截取子串可以根据字符串的索引来进行,截取子串时如果只指定了一个索引值,则用于取得字符串中指定索引所对应的字符;如果指定两个索引值,则返回两个索引中间的字符串子串.假如有如下数据模型:
Map root = new HashMap(); root.put(”book”,”struts2,freemarker”);
可以通过如下语法来截取子串:
${book[0]}${book[4]} //结果是su
${book[1..4]} //结果是tru

3.4 集合连接运算符

这里所说的集合运算符是将两个集合连接成一个新的集合,连接集合的运算符是+,看如下的例子:
<#list ["星期一","星期二","星期三"] + ["星期四","星期五","星期六","星期天"] as x>
${x}

输出结果是:星期一星期二星期三星期四星期五星期六星期天

3.5 Map连接运算符

Map对象的连接运算符也是将两个Map对象连接成一个新的Map对象,Map对象的连接运算符是+,如果两个Map对象具有相同的key,则右边的值替代左边的值.看如下的例子:
<#assign scores = {”语文”:86,”数学”:78} + {”数学”:87,”Java”:93}>
语文成绩是${scores.语文}
数学成绩是${scores.数学}
Java成绩是${scores.Java}
输出结果是:
语文成绩是86
数学成绩是87
Java成绩是93

3.6 算术运算符

FreeMarker表达式中完全支持算术运算,FreeMarker支持的算术运算符包括:+, – , * , / , % 看如下的代码:
<#assign x=5>
${ x * x – 100 }
${ x /2 }
${ 12 %10 }
输出结果是:
-75 2.5 2

在表达式中使用算术运算符时要注意以下几点:
1,运算符两边的运算数字必须是数字
2,使用+运算符时,如果一边是数字,一边是字符串,就会自动将数字转换为字符串再连接,如:${3 + “5″},结果是:35

使用内建的int函数可对数值取整,如:
<#assign x=5>
${ (x/2)?int }
${ 1.1?int }
${ 1.999?int }
${ -1.1?int }
${ -1.999?int }
结果是:2 1 1 -1 -1

3.7 比较运算符

表达式中支持的比较运算符有如下几个:
1. =或者==:判断两个值是否相等.
2. !=:判断两个值是否不等.
3. >或者gt:判断左边值是否大于右边值
4. >=或者gte:判断左边值是否大于等于右边值
5. <或者lt:判断左边值是否小于右边值
6. <=或者lte:判断左边值是否小于等于右边值

注意:=和!=可以用于字符串,数值和日期来比较是否相等,但=和!=两边必须是相同类型的值,否则会产生错误,而且FreeMarker是精确比较,”x”,”x “,”X”是不等的.其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替>会有更好的效果,因为 FreeMarker会把>解释成FTL标签的结束字符,当然,也可以使用括号来避免这种情况,如:<#if (x>y)>

3.8 逻辑运算符

逻辑运算符有如下几个:
逻辑与:&&
逻辑或:||
逻辑非:!
逻辑运算符只能作用于布尔值,否则将产生错误

3.9 内建函数

FreeMarker还提供了一些内建函数来转换输出,可以在任何变量后紧跟?,?后紧跟内建函数,就可以通过内建函数来轮换输出变量.下面是常用的内建的字符串函数:
html:对字符串进行HTML编码
cap_first:使字符串第一个字母大写
lower_case:将字符串转换成小写
upper_case:将字符串转换成大写
trim:去掉字符串前后的空白字符

下面是集合的常用内建函数
size:获取序列中元素的个数

下面是数字值的常用内建函数
int:取得数字的整数部分,结果带符号

例如:
<#assign test=”Tom & Jerry”>
${test?html}
${test?upper_case?html}
结果是:Tom & Jerry TOM & JERRY

3.10 空值处理运算符

FreeMarker对空值的处理非常严格,FreeMarker的变量必须有值,没有被赋值的变量就会抛出异常,因为FreeMarker未赋值的变量强制出错可以杜绝很多潜在的错误,如缺失潜在的变量命名,或者其他变量错误.这里所说的空值,实际上也包括那些并不存在的变量,对于一个Java的 null值而言,我们认为这个变量是存在的,只是它的值为null,但对于FreeMarker模板而言,它无法理解null值,null值和不存在的变量完全相同.

为了处理缺失变量,FreeMarker提供了两个运算符:
!: 指定缺失变量的默认值
??: 判断某个变量是否存在

其中,!运算符的用法有如下两种:
variable!或variable!defaultValue,第一种用法不给缺失的变量指定默认值,表明默认值是空字符串,长度为0的集合,或者长度为0的Map对象.

使用!指定默认值时,并不要求默认值的类型和变量类型相同.使用??运算符非常简单,它总是返回一个布尔值,用法为:variable??,如果该变量存在,返回true,否则返回false

3.11 运算符的优先级

FreeMarker中的运算符优先级如下(由高到低排列):
1. 一元运算符:!
2. 内建函数:?
3. 乘除法:*, / , %
4. 加减法:- , +
5. 比较:> , < , >= , <= (lt , lte , gt , gte)
6. 相等:== , = , !=
7. 逻辑与:&&
8. 逻辑或:||
9. 数字范围:..

实际上,我们在开发过程中应该使用括号来严格区分,这样的可读性好,出错少

4. FreeMarker的常用指令

FreeMarker的FTL指令也是模板的重要组成部分,这些指令可实现对数据模型所包含数据的抚今迭代,分支控制.除此之外,还有一些重要的功能,也是通过FTL指令来实现的.

4.1 if指令

这是一个典型的分支控制指令,该指令的作用完全类似于Java语言中的if,if指令的语法格式如下:
<#if condition>…
<#elseif condition>…
<#elseif condition>…
<#else> …

例子如下:
<#assign age=23>
<#if (age>60)>老年人
<#elseif (age>40)>中年人
<#elseif (age>20)>青年人
<#else> 少年人

输出结果是:青年人
上面的代码中的逻辑表达式用括号括起来主要是因为里面有>符号,由于FreeMarker会将>符号当成标签的结束字符,可能导致程序出错,为了避免这种情况,我们应该在凡是出现这些符号的地方都使用括号.

<#if animals.python.price < animals.elephant.price>

  Pythons are cheaper than elephants today.

<#else>

  Pythons are not cheaper than elephants today.

4.2 switch , case , default , break指令

这些指令显然是分支指令,作用类似于Java的switch语句,switch指令的语法结构如下:
<#switch value>
<#case refValue>…<#break>
<#case refValue>…<#break>
<#default>…

4.3 list, break指令

list指令是一个迭代输出指令,用于迭代输出数据模型中的集合,list指令的语法格式如下:
<#list sequence as item>
…

上面的语法格式中,sequence就是一个集合对象,也可以是一个表达式,但该表达式将返回一个集合对象,而item是一个任意的名字,就是被迭代输出的集合元素.此外,迭代集合对象时,还包含两个特殊的循环变量:
item_index:当前变量的索引值
item_has_next:是否存在下一个对象
也可以使用<#break>指令跳出迭代

例子如下:
<#list ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"] as x>
${x_index + 1}.${x}<#if x_has_next>,
<#if x=”星期四”><#break>

We have these animals:

  

Name Price
  <#list animals as being>
  
${being.name} ${being.price} Euros

Name	Price <#list animals as being>
${being.name}	${being.price} Euros

输出为：

We have these animals:

  

Name Price
  
mouse 50 Euros
  
elephant 5000 Euros
  
python 4999 Euros

Name	Price
mouse	50 Euros
elephant	5000 Euros
python	4999 Euros

4.4 include指令

include指令的作用类似于JSP的包含指令,用于包含指定页.include指令的语法格式如下:
<#include filename [options]>
在上面的语法格式中,两个参数的解释如下:
filename:该参数指定被包含的模板文件
options:该参数可以省略,指定包含时的选项,包含encoding和parse两个选项,其中encoding指定包含页面时所用的解码集,而parse指定被包含文件是否作为FTL文件来解析,如果省略了parse选项值,则该选项默认是true.

  Test page

  Test page

Blah blah...

<#include "/copyright_footer.html">

4.5 import指令

该指令用于导入FreeMarker模板中的所有变量,并将该变量放置在指定的Map对象中,import指令的语法格式如下:
<#import “/lib/common.ftl” as com>
上面的代码将导入/lib/common.ftl模板文件中的所有变量,将这些变量放置在一个名为com的Map对象中.

创建库

Ø 下面是一个创建库的例子（假设保存在lib/my_test.ftl中）：

<#macro copyright date>

  Copyright (C) ${date} Julia Smith. All rights reserved.

  
Email: ${mail}

<#assign mail = "jsmith@acme.com">

Ø 使用import指令导入库到模板中，Freemarker会为导入的库创建新的名字空间，并可以通过import指令中指定的散列变量访问库中的变量：

<#import "/lib/my_test.ftl" as my>

<#assign mail="fred@acme.com">

<@my.copyright date="1999-2002"/>

${my.mail}

${mail}

输出结果：

  Copyright (C) 1999-2002 Julia Smith. All rights reserved.

Email: jsmith@acme.com

jsmith@acme.com

fred@acme.com

可以看到例子中使用的两个同名变量并没有冲突，因为它们位于不同的名字空间

l 可以使用assign指令在导入的名字空间中创建或替代变量，下面是一个例子：

<#import "/lib/my_test.ftl" as my>

${my.mail}

<#assign mail="jsmith@other.com" in my>

${my.mail}

l 输出结果：

jsmith@acme.com

jsmith@other.com

l 数据模型中的变量任何地方都可见，也包括不同的名字空间，下面是修改的库：

<#macro copyright date>

  Copyright (C) ${date} ${user}. All rights reserved.

<#assign mail = "${user}@acme.com">

l 假设数据模型中的user变量的值是Fred，则下面的代码：

<#import "/lib/my_test.ftl" as my>

<@my.copyright date="1999-2002"/>

${my.mail}

l 输出结果：

  Copyright (C) 1999-2002 Fred. All rights reserved.

Fred@acme.com

4.6 noparse指令

noparse指令指定FreeMarker不处理该指定里包含的内容,该指令的语法格式如下:
<#noparse>…

看如下的例子:
<#noparse>
<#list books as book>
${book.name}作者:${book.author}

输出如下:
<#list books as book>
${book.name}作者:${book.author}

4.7 escape , noescape指令

escape指令导致body区的插值都会被自动加上escape表达式,但不会影响字符串内的插值,只会影响到body内出现的插值,使用escape指令的语法格式如下:
<#escape identifier as expression>…
<#noescape>…

看如下的代码:
<#escape x as x?html>
First name:${firstName}
Last name:${lastName}
Maiden name:${maidenName}

上面的代码等同于:
First name:${firstName?html}
Last name:${lastName?html}
Maiden name:${maidenName?html}

escape指令在解析模板时起作用而不是在运行时起作用,除此之外,escape指令也嵌套使用,子escape继承父escape的规则,如下例子:
<#escape x as x?html>
Customer Name:${customerName}
Items to ship;
<#escape x as itemCodeToNameMap[x]>
${itemCode1}
${itemCode2}
${itemCode3}
${itemCode4}

上面的代码类似于:
Customer Name:${customerName?html}
Items to ship;
${itemCodeToNameMap[itemCode1]?html}
${itemCodeToNameMap[itemCode2]?html}
${itemCodeToNameMap[itemCode3]?html}
${itemCodeToNameMap[itemCode4]?html}

对于放在escape指令中所有的插值而言,这此插值将被自动加上escape表达式,如果需要指定escape指令中某些插值无需添加escape表达式,则应该使用noescape指令,放在noescape指令中的插值将不会添加escape表达式.

4.8 assign指令

assign指令在前面已经使用了多次,它用于为该模板页面创建或替换一个顶层变量,assign指令的用法有多种,包含创建或替换一个顶层变量, 或者创建或替换多个变量等,它的最简单的语法如下:<#assign [in namespacehash]>,这个用法用于指定一个名为name的变量,该变量的值为value,此外,FreeMarker允许在使用 assign指令里增加in子句,in子句用于将创建的name变量放入namespacehash命名空间中.

assign指令还有如下用法:<#assign name1=value1 name2=value2 … nameN=valueN [in namespacehash]>,这个语法可以同时创建或替换多个顶层变量,此外,还有一种复杂的用法,如果需要创建或替换的变量值是一个复杂的表达式,则可以使用如下语法格式:<#assign name [in namespacehash]>capture this,在这个语法中,是指将assign指令的内容赋值给name变量.如下例子:
<#assign x>
<#list ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"] as n>
${n}

${x}
上面的代码将产生如下输出:星期一星期二星期三星期四星期五星期六星期天

虽然assign指定了这种复杂变量值的用法,但是我们也不要滥用这种用法,如下例子:<#assign x>Hello ${user}!,以上代码改为如下写法更合适:<#assign x=”Hello ${user}!”>

4.9 setting指令

该指令用于设置FreeMarker的运行环境,该指令的语法格式如下:<#setting name=value>,在这个格式中,name的取值范围包含如下几个:
locale:该选项指定该模板所用的国家/语言选项
number_format:指定格式化输出数字的格式
boolean_format:指定两个布尔值的语法格式,默认值是true,false
date_format,time_format,datetime_format:指定格式化输出日期的格式
time_zone:设置格式化输出日期时所使用的时区

4.10 macro , nested , return指令

macro可以用于实现自定义指令,通过使用自定义指令,可以将一段模板片段定义成一个用户指令,使用macro指令的语法格式如下:
<#macro name param1 param2 … paramN>
…
<#nested loopvar1, loopvar2, …, loopvarN>
…
<#return>
…

在上面的格式片段中,包含了如下几个部分:
name:name属性指定的是该自定义指令的名字,使用自定义指令时可以传入多个参数
paramX:该属性就是指定使用自定义指令时报参数,使用该自定义指令时,必须为这些参数传入值
nested指令:nested标签输出使用自定义指令时的中间部分
nested指令中的循环变量:这此循环变量将由macro定义部分指定,传给使用标签的模板
return指令:该指令可用于随时结束该自定义指令.

看如下的例子:
<#macro book> //定义一个自定义指令
j2ee

<@book /> //使用刚才定义的指令
上面的代码输出结果为:j2ee

在上面的代码中,可能很难看出自定义标签的用处,因为我们定义的book指令所包含的内容非常简单,实际上,自定义标签可包含非常多的内容,从而可以实现更好的代码复用.此外,还可以在定义自定义指令时,为自定义指令指定参数,看如下代码:
<#macro book booklist> //定义一个自定义指令booklist是参数
<#list booklist as book>
${book}

<@book booklist=["spring","j2ee"] /> //使用刚刚定义的指令
上面的代码为book指令传入了一个参数值,上面的代码的输出结果为:spring j2ee

不仅如此,还可以在自定义指令时使用nested指令来输出自定义指令的中间部分,看如下例子:
<#macro page title>

FreeMarker示例页面 – ${title?html}

${title?html}

<#nested> //用于引入用户自定义指令的标签体

上面的代码将一个HTML页面模板定义成一个page指令,则可以在其他页面中如此page指令:
<#import “/common.ftl” as com> //假设上面的模板页面名为common.ftl,导入页面
<@com.page title=”book list”>

spring

j2ee

从上面的例子可以看出,使用macro和nested指令可以非常容易地实现页面装饰效果,此外,还可以在使用nested指令时,指定一个或多个循环变量,看如下代码:
<#macro book>
<#nested 1> //使用book指令时指定了一个循环变量值
<#nested 2>

<@book ;x> ${x} .图书
当使用nested指令传入变量值时,在使用该自定义指令时,就需要使用一个占位符(如book指令后的;x).上面的代码输出文本如下:
1 .图书 2 .图书

在nested指令中使用循环变量时,可以使用多个循环变量,看如下代码:
<#macro repeat count>
<#list 1..count as x> //使用nested指令时指定了三个循环变量
<#nested x, x/2, x==count>

<@repeat count=4 ; c halfc last>
${c}. ${halfc}<#if last> Last!

上面的输出结果为:
1. 0.5 2. 1 3. 1.5 4. 2 Last;

return指令用于结束macro指令,一旦在macro指令中执行了return指令,则FreeMarker不会继续处理macro指令里的内容,看如下代码:
<#macro book>
spring
<#return>
j2ee

<@book />
上面的代码输出:spring,而j2ee位于return指令之后,不会输出.

用户定义指令

l 宏和变换器变量是两种不同类型的用户定义指令，它们之间的区别是宏是在模板中使用macro指令定义，而变换器是在模板外由程序定义，这里只介绍宏

l 基本用法

Ø 宏是和某个变量关联的模板片断，以便在模板中通过用户定义指令使用该变量，下面是一个例子：

<#macro greet>

  Hello Joe!

Ø 作为用户定义指令使用宏变量时，使用@替代FTL标记中的#

<@greet>

Ø 如果没有体内容，也可以使用：

<@greet/>

l 参数

Ø 在macro指令中可以在宏变量之后定义参数，如：

<#macro greet person>

  Hello ${person}!

Ø 可以这样使用这个宏变量：

<@greet person="Fred"/> and <@greet person="Batman"/>

输出结果是：

  Hello Fred!

 and   Hello Batman!

Ø 宏的参数是FTL表达式，所以下面的代码具有不同的意思：

<@greet person=Fred/>

Ø 这意味着将Fred变量的值传给person参数，该值不仅是字符串，还可以是其它类型，甚至是复杂的表达式

Ø 宏可以有多参数，下面是一个例子：

<#macro greet person color>

  Hello ${person}!

Ø 可以这样使用该宏变量：

<@greet person="Fred" color="black"/>

Ø 其中参数的次序是无关的，因此下面是等价的：

<@greet color="black" person="Fred"/>

Ø 只能使用在macro指令中定义的参数，并且对所有参数赋值，所以下面的代码是错误的：

<@greet person="Fred" color="black" background="green"/>

<@greet person="Fred"/>

Ø 可以在定义参数时指定缺省值，如：

<#macro greet person color="black">

  Hello ${person}!

Ø 这样<@greet person=”Fred”/>就正确了

Ø 宏的参数是局部变量，只能在宏定义中有效

l 嵌套内容

Ø 用户定义指令可以有嵌套内容，使用<#nested>指令执行指令开始和结束标记之间的模板片断

Ø 例子：

<#macro border>

  
    <#nested>

这样使用该宏变量：

<@border>The bordered text

输出结果：

  
    The bordered text

Ø <#nested>指令可以被多次调用，例如：

<#macro do_thrice>

  <#nested>

  <#nested>

  <#nested>

<@do_thrice>

  Anything.

输出结果：

  Anything.

  Anything.

  Anything.

Ø 嵌套内容可以是有效的FTL，下面是一个有些复杂的例子：

<@border>

  <@do_thrice>

    <@greet person="Joe"/>

输出结果：

  
      
    Hello Joe!

    Hello Joe!

    Hello Joe!

Ø 宏定义中的局部变量对嵌套内容是不可见的，例如：

<#macro repeat count>

  <#local y = "test">

  <#list 1..count as x>

    ${y} ${count}/${x}: <#nested>

<@repeat count=3>${y?default("?")} ${x?default("?")} ${count?default("?")}

输出结果：

    test 3/1: ? ? ?

    test 3/2: ? ? ?

    test 3/3: ? ? ?

l 在宏定义中使用循环变量

Ø 用户定义指令可以有循环变量，通常用于重复嵌套内容，基本用法是：作为nested指令的参数传递循环变量的实际值，而在调用用户定义指令时，在<@…>开始标记的参数后面指定循环变量的名字

Ø 例子：

<#macro repeat count>

  <#list 1..count as x>

    <#nested x, x/2, x==count>

<@repeat count=4 ; c, halfc, last>

  ${c}. ${halfc}<#if last> Last!

输出结果：

  1. 0.5

  2. 1

  3. 1.5

  4. 2 Last!

Ø 指定的循环变量的数目和用户定义指令开始标记指定的不同不会有问题

n 调用时少指定循环变量，则多指定的值不可见

n 调用时多指定循环变量，多余的循环变量不会被创建

随机文章

2009年12月10日 -- MyEclipse 7.5,MyEclipse 8.0中安装Flex插件
2009年07月28日 -- 2009年第96届环法自行车赛第十九、二十、二十一站视频
2009年06月30日 -- 惠普前总裁孙振耀指点职业规划（二）
2009年10月29日 -- 上海钓鱼执法事件
2009年07月7日 -- 回家听来的真实故事

自己写的一个Flex3多文件上传组件

Haven — Wed, 31 Mar 2010 07:43:20 +0000

最近在看《Flex3权威指南》，除了书中个别地方翻译的笔误外，确实是本好书，看的兴起，就写了这个多文件上传组件。

网上现成上传组件很多，有些写的很好，我的当然不能和别人那些牛人的相比，仅做学习交流之用，在代码组织和结构设计方面还有很多需要改进的地方，希望大家多提意见。

废话不多说，先看工作界面吧：

我的开发环境是Eclipse+Flex插件+Myeclipse（Myeclipse可有可无，这是我用来开发J2EE的），用MyEclipse7.5集成包的同志们安装Flex插件有困难的可以参考我前面的一篇文章：MyEclipse 7.5,MyEclipse 8.0中安装Flex插件。整个源文件的结构如下：

其实只要看flex_src和src两个目录就可以了。下面主要介绍下程序代码（至于怎样新建Flex Project，怎样下一步之类的就不再罗嗦了，实在不知道的自己Google去）：flex_src 目录下是所有的Flex源代码，src下面的是后台的接收代码（java 的servlet）。com.havenliu.event.DeleteEvent.as是一个自定义的Flex事件类，用来删除单个附件。cpt目录下的deletebtn.mxml是一个自定义删除组件，很简单，里面就一个删除按钮，但附件完成上传后，改按钮变成灰色；最主要的东西都在MyUpload.mxml文件中。

^?Download MyUpload.mxml

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="13" creationComplete="init()" xmlns:e="cpt.*" >
<mx:Script>
	[CDATA[
		import com.havenliu.event.DeleteEvent;
		import cpt.deletebtn;
		import mx.events.CloseEvent;
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import flash.profiler.showRedrawRegions;
        import mx.controls.ProgressBar;
 
        //最大上传文件数
		private var maxFiles:int=5;
		//最大上传文件大小(M)
		private var maxSize:Number=50;
		public var fileList:FileReferenceList = new FileReferenceList();
 
		private var fileSize:Number=0;
		//后台接受附件的地址，这里是一个servlet，你可以自己定义为jsp、php、asp、action等
		private var uploadurl:URLRequest = new URLRequest("http://localhost:8080/MyUpload/UploadFile");
		[Bindable]
		private var files:ArrayCollection=new ArrayCollection();
 
		private function init():void{
			//附件选择监听器
			fileList.addEventListener(Event.SELECT,selectHandler);
			//给“添加”按钮注册监听器
			browse.addEventListener(MouseEvent.CLICK,browseHandler);
			//删除附件按钮注册监听器
			deleteAll.addEventListener(MouseEvent.CLICK,resetHandler);
			buttonState();
		}
 
		private function selectHandler(event:Event):void
		{
			var countfiles:int=files.length+fileList.fileList.length;
			var countsize:Number=0;
			//计算总附件大小
			for each(var _file:FileReference in fileList.fileList)
			{
				countsize+=_file.size;
			}
			countsize+=fileSize;
			if(countfiles>maxFiles)
			{
				Alert.show("一次最大只能上传"+maxFiles+"个附件");
			}else if(countsize>maxSize*(1024*1024))
			{
				Alert.show("附件大小不能超过"+maxSize+"M");
			}else
			{
				for each(var file:FileReference in fileList.fileList)
				{
					if(!checkDitto(file))
					{
						files.addItem(file);
						refreshText();
						buttonState();
					}
				}
			}
		}
 
		private function browseHandler(event:Event):void
		{
			//这里没有过滤文件类型，即所有文件都可以上传，实际开发中，为了安全考虑可能需要过滤
			var fileType:FileFilter=new FileFilter("文件类型(*.*)","*.*");
			var allTypes:Array = new Array(fileType);				
			fileList.browse(allTypes);
		}
		private function resetHandler(event:Event):void
		{
			Alert.show("您确定要删除全部附件？","提示信息",Alert.YES|Alert.NO,fileGrid,alertHandler,null,Alert.NO);
			function alertHandler(event:CloseEvent):void
			{
				if(event.detail==Alert.YES)
				{
					files.removeAll();
					refreshText();
					buttonState();
				}
			}
		}
		//更新Text文本信息
		private function refreshText():void
		{
			//重新统计附件大小，将原来的信息清0
			fileSize=0;
			for(var i:int=0;i<files.length;i++)
			{
				fileSize+=FileReference(files[i]).size;
			}
			msg.text="共计"+files.length+"个附件，文件总大小："+(fileSize/(1024*1024)).toString().slice(0,4)+"M (最大上传5个附件，总大小不超过50M)";
		}
		//控制按钮状态
		private function buttonState():void
		{
			if(files.length<1)
			{
				upload.enabled=false;
				deleteAll.enabled=false;
			}else
			{
				upload.enabled=true;
				deleteAll.enabled=true;
			}
			if(files.length>=maxFiles)
			{
				browse.enabled=false;
			}else
			{
				browse.enabled=true;
			}
		}
		private function uploadfile():void
		{
			if(files.length>0)
			{
				for(var i:int=0;i<files.length;i++)
				{
					var file:FileReference=files[i] as FileReference;
					try{
						file.addEventListener(Event.COMPLETE,uploadok);
//						 file.addEventListener(ProgressEvent.PROGRESS,uploadstart);
						file.upload(uploadurl);
					}catch(error:Error)
					{
						Alert.show("上传失败",error.message);
					}
				}
				//文件全部上传完成后，上传和全部删除按钮变为灰色
				upload.enabled=false;
				deleteAll.enabled=false;
				browse.enabled=false;
			}
		}
 
		//判断文件是否重复
		private function checkDitto(file:FileReference):Boolean
		{
			var result:Boolean=false;
			for (var i:int=0;i<files.length;i++)
			{
				var _file:FileReference=files[i];
				//如果选择文件的名字、大小和最后修改时间完全一样，则这两个文件重复
				if(file.name==_file.name||file.modificationDate==_file.modificationDate||file.size==_file.size)
				{
					result= true;
					break;
				}
				else
				{
					result= false;
				}
			}
			return result;
		}
		public  function deleteFile(data:Object):void
		{
			var indexNo:int=files.getItemIndex(data as FileReference);
			files.removeItemAt(indexNo);
			refreshText();
			buttonState();
		}
 
		public  function probar(event:Event,data:Object):void
		{
			var probar:ProgressBar=event.target as ProgressBar;
			probar.label = "%3%%";
            probar.setProgress(0, 100);
            var file:FileReference=data as FileReference;
            file.addEventListener(ProgressEvent.PROGRESS,
            	function(event: ProgressEvent): void
	                 {
	                     probar.setProgress(event.bytesLoaded, event.bytesTotal);
	                });
 
		}
		private function uploadok(event:Event):void
		{
			var file: FileReference = event.target as FileReference;
			file.removeEventListener(Event.COMPLETE,uploadok);
			trace("上载完成");
 
		}
//		private function uploadstart(event:Event):void
//		{
//			trace("上载开始");
//		}
		public function deletefile(event:DeleteEvent):void
		{
			var delfile:FileReference=event.file;
			deleteFile(delfile);
		}
 
	]]>
mx:Script>
	<mx:Panel width="500" height="300" layout="absolute" title="多文件上传组件">
			<mx:VBox width="100%" height="100%" x="0" y="0">
					<mx:DataGrid id="fileGrid" width="100%" dataProvider="{files}">
						<mx:columns>
							<mx:DataGridColumn headerText="文件名" dataField="name" />
							<mx:DataGridColumn width="80" headerText="大小(字节)" dataField="size"/>
							<mx:DataGridColumn width="120" headerText="上传进度" dataField="loadRate" sortable="false" ><mx:itemRenderer>
								<mx:Component>
								<mx:HBox fontSize="10" fontWeight="normal" fontThickness="1">
								<mx:ProgressBar verticalCenter="true" width="100%" paddingLeft="5" paddingRight="5"
                                    maximum="100" minimum="0" labelPlacement="center" mode="manual"
                                   label="%3%%" textAlign="left" creationComplete="outerDocument.probar(event,data)"/>
                                   mx:HBox>
								mx:Component>
								mx:itemRenderer>
							mx:DataGridColumn>
							<mx:DataGridColumn    headerText="删除" sortable="false" >
							<mx:itemRenderer> 
								<mx:Component> 
								<e:deletebtn  tarfile="{data as FileReference}" delFile="outerDocument.deletefile(event)">
								e:deletebtn>
								mx:Component> 
								mx:itemRenderer>
							mx:DataGridColumn>
						mx:columns>
					mx:DataGrid>
					<mx:HBox width="100%" height="39">
							<mx:Spacer/>
							<mx:Button  id="browse" label="添加..." textAlign="right"/>
							<mx:Button id="upload" label="上传" click="uploadfile()" textAlign="right"/>
							<mx:Button id="deleteAll" label="全部删除" textAlign="right"/>
					mx:HBox>
					<mx:Text id="msg" text="共计0个附件，文件总大小：0M (最大上传5个附件，总大小不超过50M)" fontSize="12" fontFamily="Arial"/>
			mx:VBox>
	mx:Panel>
 
mx:Application>

DeleteEvent.as的源代码：

^?Download DeleteEvent.as

package com.havenliu.event
{
	import flash.events.Event;
	import flash.net.FileReference;
 
	public class DeleteEvent extends Event
	{
		//当前要删除的附件
		public var file:FileReference;
 
		public function DeleteEvent(type:String,file:FileReference)
		{
			super(type);
			this.file=file;
		}
	}
}

deletebtn.mxml组件的源代码：

^?Download deletebtn.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="btnlis()">
 <mx:Metadata>
        [Event(name="delFile", type="com.havenliu.event.DeleteEvent")]
 mx:Metadata>
 
<mx:Script>
	[CDATA[
	import com.havenliu.event.DeleteEvent;
		public var tarfile:FileReference;
 
		internal function deleteFile():void
		{
			var delevent:DeleteEvent=new DeleteEvent("delFile",tarfile);
			this.dispatchEvent(delevent);
		} 
		private function comlis(event:Event):void
		{
			deletebutton.enabled=false;
		}
		private function btnlis():void
		{
			//给当前附件注册监听器，如果附件已经上传完成，则将删除按钮的enabled设置为false(不可操作)
			tarfile.addEventListener(Event.COMPLETE,comlis);
		}
 
	]]>
mx:Script>
	<mx:Button id="deletebutton" label="删除" click="deleteFile()" >
	mx:Button>
mx:Canvas>

后台接收文件的源代码。这里用的是java做的后台。用Servlet接收的。你可以用php或者asp做后台都无所谓，选择自己熟悉的就行：

^?Download UploadFile.java

 
package com.havenliu.servlet;
 
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
 
public class UploadFile extends HttpServlet {
 
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
		doPost(request,response);
	}
 
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
		String tempDir="C:\\temp\\";//文件存储路径
		String saveDir="C:\\temp\\save\\";//临时文件存储路径
		if (!new File(saveDir).isDirectory())
		{
			new File(saveDir).mkdirs();
		}
 
		if (!new File(tempDir).isDirectory())
		{
			new File(tempDir).mkdirs();
		}
		DiskFileItemFactory dfif = new DiskFileItemFactory();
		dfif.setSizeThreshold(4096);
		dfif.setRepository(new File(tempDir));
 
		ServletFileUpload sfu = new ServletFileUpload(dfif);
		sfu.setHeaderEncoding("utf-8");
 
		// 设置最大上传尺寸
		sfu.setSizeMax(50 * 1024 * 1024);
		// 从request得到 所有 上传域的列表
		List<Object> fileList = null;
		try {
			fileList = sfu.parseRequest(request);
		} catch (FileUploadException e) {// 处理文件尺寸过大异常
			e.printStackTrace();
		}
		if (fileList == null || fileList.size() == 0) {
 
		}
		// 得到所有上传的文件
		Iterator<Object> fileItr = fileList.iterator();
		while(fileItr.hasNext())
		{
			 FileItem item = (FileItem) fileItr.next();
             if (!item.isFormField()) {
                 String name = item.getName();
                 try {
                     item.write(new File(saveDir + name));
                 }catch (Exception e) {
                     e.printStackTrace();
                 }
             }
		}
	}
 
}

最后别忘了在web.xml中注册你的servlet。
到这里基本就差不多了，代码中的注释基本能看懂了。人品不是很差的话应该能直接跑起来了。源代码包就不放上来了，主要是没地方上传，那些网盘什么的我不太喜欢用。需要的朋友们留下邮箱我发给你们。

PS：最后叽歪两句：现在找个满意的图床真难啊，国内的基本不敢用，很多不稳定，开始还好，最后那天就悄然无声的关服务器了，让你哭都哭不出来。稳定的很多又不支持外链，类似163之类的；那些支持的外链、也勉强能算的上稳定的又有很多莫名奇妙的规矩，限制大小和流量啊（这还好，还勉强能接受），自做主张的给你的图片加水印（最不能接收这点）什么。国外的好的图床到是蛮多，比如google的picasa 、雅虎的flickr什么的，这些都用过，但最后都在伟大的GFW下壮烈牺牲了，就算有些坚持到现在还能用，但谁也不敢保证明天早上我打开的我的blog不看见红叉叉。犹豫再三。国外的也不敢用了。。。。。。在折腾了两天后，终于决定把文章里的图片就放在我自己的空间里，从长远来考虑这不太好，但这也是目前最好的选择了。。。。。。。

2009年12月10日 -- MyEclipse 7.5,MyEclipse 8.0中安装Flex插件
2009年08月14日 -- 发贴器有了比较大的进展

Error listenerStart错误，Tomcat终极排错杀手

Haven — Thu, 31 Dec 2009 03:04:03 +0000

在整合Spring+hibernate+Flex的时候，出项Error listenerStart错误，折腾的人都快疯了，由于Tomcat默认情况下不记录应用程序错误，就启动时候报个Error listenerStart就完事，根本不知道哪里出问题了，没办法，只能用log4j来排查。

首先新建一个log4j.properties文件。对log4j不熟的就直接把下面的内容复制进去就可以了：

log4j.rootLogger=info,Console,R
log4j.appender.Console=org.apache.log4j.ConsoleAppender
log4j.appender.Console.layout=org.apache.log4j.PatternLayout
#log4j.appender.Console.layout.ConversionPattern=%d [%t] %-5p %c – %m%n
log4j.appender.Console.layout.ConversionPattern=%d{yy-MM-dd HH:mm:ss} %5p %c{1}:%L – %m%n
log4j.appender.R=org.apache.log4j.DailyRollingFileAppender
log4j.appender.R.File=${catalina.home}/logs/tomcat.log
log4j.appender.R.layout=org.apache.log4j.PatternLayout
log4j.appender.R.layout.ConversionPattern=%d{yyyy.MM.dd HH:mm:ss} %5p %c{1}(%L):? %m%n
log4j.logger.org.apache=info, R
log4j.logger.org.apache.catalina.core.ContainerBase.[Catalina].[localhost]=DEBUG, R
log4j.logger.org.apache.catalina.core=info, R
log4j.logger.org.apache.catalina.session=info, R

然后把log4j.properties放在tomcat安装目录下的/common/classes目录里面，还要找log4j.jar和commons-logging.jar两个jar包，放到tomcat安装目录下的/common/lib里，这三步缺一不可，然后再启动tomcat，错误就现原型了，原来了包冲突：spring和hibernate自带的包中都包含有asm.jar，所以要把asm.jar，asm-attrs.jar和cglib-2.1.3.jar删掉，注意。一定要要把asm-attrs.jar和cglib-2.1.3.jar也删掉，只保留asm-2.2.2.jar ，asm-commons-2.2.2.jar，asm-util-2.2.2.jar，我开始就是忽略了cglib-2.1.3.jar，一直找不到问题的原因。

最后别忘了删掉log4j.properties，log4j产生的日志文件很庞大，一个不小心会塞爆你的硬盘。毕竟，杀手锏不是用来随便用的！

随机文章

2009年10月29日 -- 上海钓鱼执法事件
2009年07月5日 -- 2009年第96届环法自行车赛第一赛段个人计时赛视频
2009年07月9日 -- 2009年第96届环法自行车赛第六站视频
2010年04月16日 -- 网通DNS又出问题了
2010年05月15日 -- 江南古镇之【骑行南浔】

JQuery基础入门-输入验证

Haven — Mon, 21 Sep 2009 03:27:29 +0000

以前对JQuery一直保持观望态度，没太深入研究。最近一个项目，到现在第一阶段算是快完成了，发现和同事的javascript代码功能重复的很多，重用性也不好，冗余代码也很多，才想到了转用JQuery开发框架。找了点资料来看了下，发现JQuery相当强大，真是相见恨晚啦！

这篇教程是最基础的JQuery入门教程。为了刚接触JQuery的人能看懂，代码写的比较繁琐，主要是为了写注释方便，如果看了还有不懂的可以联系我，大家共同探讨.

代码点击可以直接下载看效果，注意js文件结构，js文件（包括jquery.js）要放在js文件夹下面，jquery.js大家可以到Jquery的官网去下载：jquery.com

html文件：

^?Download verify.html

js文件：

^?Download verify.js

//初始化，$(document).ready()表示页面加载完成后执行
$(document).ready(function(){
 
 
	//找到页面上id为verify的按钮。并为它添加点击事件,click为jquery的点击事件
	$("#verify").click(function(){
		//当按钮点击的时候执行下面的代码
		//找到页面上id为userName的文本框，并获取文本框内的值，用jquery提供的val方法
		var userName=$("#userName").val();
		//判断userName的值是不是为空
		if(userName=="")
		{
			//如果为空，提示用户
			$("#show").html("用户名不能为空");
		}else{
			//如果不为空，则将userName的值发送给服务器端，校验是否重复等，这里简化操作，直接判断如果userName的值为admin，则提示用户名重复
		/**	
			//如果使用服务器端来校验userName，使用juery提供的get方法，get方法的有三个参数，第一个是服务器端的url，
			// 第二个是发送给服务器端的数据，这里我的数据直接在前面的url中已经传递过去，所以为null，
			// 第三个参数是一个function，它表示服务器端校验完成，返回后需要调用的函数
			$.get("verify.action?userName="+userName,null,function(response){
				//将服务器端返回的值显示在div中
				$("#show").html(response);
			});
			*/
			if(userName=="admin")
			{
					$("#show").html("用户名已经存在");
			}else
			{
					$("#show").html("恭喜您，该用户名可以注册");
			}
		}
 
	});
 
	//找到页面上id为userName的输入框，并为它添加键盘出发事件，keyup为jquery的键盘触发事件，表示键盘上某个键被按下后弹起来后触发
	$("#userName").keyup(function(){
		//找到页面上id为userName的文本框，并获取文本框内的值，用jquery提供的val方法
		var userName=$("#userName").val();
		//如果userName的值内空，则文本框显示红色
		if(userName=="")
		{
			//addClass是JQuery提供的方法，表示给某个页面控件添加一个class
			$(this).addClass("warning");
		}else
		{
			//removeClass是JQuery提供的方法，表示给某个页面控件删除class
			$(this).removeClass("warning");
		}
 
	});
});

2010年05月27日 -- Jquery html(val)使用注意

Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

Haven — Sun, 09 Aug 2009 00:53:06 +0000

1判断select选项中是否存在Value=”paraValue”的Item
2向select选项中加入一个Item
3从select选项中删除一个Item
4删除select中选中的项
5修改select选项中 value=”paraValue”的text为”paraText”
6设置select中text=”paraText”的第一个Item为选中
7设置select中value=”paraValue”的Item为选中
8得到select的当前选中项的value
9得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项

^?View Code JAVASCRIPT

js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item        
function jsSelectIsExitItem(objSelect, objItemValue) {        
    var isExit = false;        
    for (var i = 0; i < objSelect.options.length; i++) {        
        if (objSelect.options[i].value == objItemValue) {        
            isExit = true;        
            break;        
        }        
    }        
    return isExit;        
}         
 
// 2.向select选项中 加入一个Item        
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {        
    //判断是否存在        
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
        alert("该Item的Value值已经存在");        
    } else {        
        var varItem = new Option(objItemText, objItemValue);      
        objSelect.options.add(varItem);     
        alert("成功加入");     
    }        
}        
 
// 3.从select选项中 删除一个Item        
function jsRemoveItemFromSelect(objSelect, objItemValue) {        
    //判断是否存在        
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
        for (var i = 0; i < objSelect.options.length; i++) {        
            if (objSelect.options[i].value == objItemValue) {        
                objSelect.options.remove(i);        
                break;        
            }        
        }        
        alert("成功删除");        
    } else {        
        alert("该select中 不存在该项");        
    }        
}    
 
 
// 4.删除select中选中的项    
function jsRemoveSelectedItemFromSelect(objSelect) {        
    var length = objSelect.options.length - 1;    
    for(var i = length; i >= 0; i--){    
        if(objSelect[i].selected == true){    
            objSelect.options[i] = null;    
        }    
    }    
}      
 
// 5.修改select选项中 value="paraValue"的text为"paraText"        
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {        
    //判断是否存在        
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
        for (var i = 0; i < objSelect.options.length; i++) {        
            if (objSelect.options[i].value == objItemValue) {        
                objSelect.options[i].text = objItemText;        
                break;        
            }        
        }        
        alert("成功修改");        
    } else {        
        alert("该select中 不存在该项");        
    }        
}        
 
// 6.设置select中text="paraText"的第一个Item为选中        
function jsSelectItemByValue(objSelect, objItemText) {            
    //判断是否存在        
    var isExit = false;        
    for (var i = 0; i < objSelect.options.length; i++) {        
        if (objSelect.options[i].text == objItemText) {        
            objSelect.options[i].selected = true;        
            isExit = true;        
            break;        
        }        
    }              
    //Show出结果        
    if (isExit) {        
        alert("成功选中");        
    } else {        
        alert("该select中 不存在该项");        
    }        
}        
 
// 7.设置select中value="paraValue"的Item为选中    
document.all.objSelect.value = objItemValue;    
 
// 8.得到select的当前选中项的value    
var currSelectValue = document.all.objSelect.value;    
 
// 9.得到select的当前选中项的text    
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;    
 
// 10.得到select的当前选中项的Index    
var currSelectIndex = document.all.objSelect.selectedIndex;    
 
// 11.清空select的项    
document.all.objSelect.options.length = 0;

随机文章

2009年06月25日 -- 也谈谈Google中的色情和低俗信息问题
2009年11月23日 -- “赢在中国”点评人给80后年轻人的30个忠告
2009年11月2日 -- MySql access denied for user错误
2009年11月29日 -- MyEclipse 8没有启动画面的问题
2009年10月10日 -- 国庆骑行绍兴

让浏览器显示自己网站的图标

Haven — Wed, 03 Jun 2009 04:25:17 +0000

现在主流的大站都有自己的网站“头像”，在用户浏览时，浏览器的地址栏最前面就会显示，收藏夹里也会显示，现在大部分浏览器都支持这一功能了，看起来是个小功能，但在很多时候还是很有用处的，如果你的图标如果做的比较出色，用户从收藏夹或地址栏里就能很快的定位出的网站，第一次浏览你网站的用户说不定还会因为你的图标而记住你的网站，效果绝对比文字更出色。

要实现这一功能其实很简单，只需要在之间加入就可以了，favicon.ico应该放在网站的根目录下面，或者其他能顺利读取的地方（网络路径也可以），favicon.ico文件需要专门的favicon编辑器生成，一般是16*16或8*8的，对于一般的开发人员的来说要生产这个文件还是有点困难的，这里推荐一个在线favicon生成器，网站是：http://www.chami.com/html-kit/services/favicon/，你只需要上传一张图片就能自动生成好favicon.ico文件，很方面

随机文章

2010年05月6日 -- 西塘游记
2009年07月7日 -- 回家听来的真实故事
2009年06月30日 -- 惠普前总裁孙振耀指点职业规划（二）
2009年07月19日 -- 2009年第96届环法自行车赛第十一、十二、十三，十四站视频
2010年08月26日 -- 爆笑三国之张飞流水账

夜半难眠 » Web开发

Jquery html(val)使用注意

相关文章

找到一份比较全面的freemarker语法总结

语法

1. FTL指令规则

2. 插值规则

2.1 通用插值

2.2 数字格式化插值

3. 表达式

3.1 直接指定值

3.2 输出变量值

3.3字符串操作

3.4 集合连接运算符

3.5 Map连接运算符

3.6 算术运算符

3.7 比较运算符

3.8 逻辑运算符

3.9 内建函数

3.10 空值处理运算符

3.11 运算符的优先级

4. FreeMarker的常用指令

4.1 if指令

4.2 switch , case , default , break指令

4.3 list, break指令

4.4 include指令

Test page

4.5 import指令

4.6 noparse指令

4.7 escape , noescape指令

4.8 assign指令

4.9 setting指令

4.10 macro , nested , return指令

${title?html}

随机文章

自己写的一个Flex3多文件上传组件

相关文章

Error listenerStart错误，Tomcat终极排错杀手

随机文章

JQuery基础入门-输入验证

相关文章

Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

随机文章

让浏览器显示自己网站的图标

随机文章