input只允许输入数字

input只允许输入数字,清除非 数字和小数点的字符


   change: name => {
                // eslint-disable-next-line no-useless-escape
                state.fillFormData[name] = state.fillFormData[name].replace(
                    /[^\d.]/g,
                    ''
                ); //清除非 数字和小数点的字符
                state.fillFormData[name] = state.fillFormData[name].replace(
                    /\.{2,}/g,
                    '.'
                ); //清除第二个小数点
                state.fillFormData[name] = state.fillFormData[name].replace(/^\./g, ''); //验证第一个字符是数字而不是字符
                state.fillFormData[name] = state.fillFormData[name]
                    .replace('.', '$#$')
                    .replace(/\./g, '')
                    .replace('$#$', '.');
                // eslint-disable-next-line no-useless-escape
                state.fillFormData[name] = state.fillFormData[name].replace(
                    /^(\-)*(\d+)\.(\d\d).*$/,
                    '$1$2.$3'
                ); //保留两位小数
                state.fillFormData[name] =
                    state.fillFormData[name].indexOf('.') > 0
                        ? state.fillFormData[name].split('.')[0].substring(0, 7) +
                          '.' +
                          state.fillFormData[name].split('.')[1]
                        : state.fillFormData[name].substring(0, 7); //限制只能输入7位正整数
            },
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JAVA模版引擎Freemarker常用标签(一) 1. if指令 这是一个典型的分支控制指令,该指令的作用完全类似于Java语言中的if,if指令的语法格式如下: <#if condition>... <#elseif condition>... <#elseif condition>... <#else> ... </#if> 例子如下: <#assign age=23> <#if (age>60)>老年人 <#elseif (age>40)>中年人 <#elseif (age>20)>青年人 <#else> 少年人 </#if> 输出结果是:青年人 上面的代码中的逻辑表达式用括号括起来主要是因为里面有>符号,由于FreeMarker会将>符号当成标签的结束字符,可能导致程序出错,为了避免这种情况,我们应该在凡是出现这些符号的地方都使用括号. <#if animals.python.price < animals.elephant.price> Pythons are cheaper than elephants today. <#else> Pythons are not cheaper than elephants today. </#if> 2、 switch , case , default , break指令 这些指令显然是分支指令,作用类似于Java的switch语句,switch指令的语法结构如下: <#switch value> <#case refValue>...<#break> <#case refValue>...<#break> <#default>... </#switch> 3、 list, break指令 list指令是一个迭代输出指令,用于迭代输出数据模型中的集合,list指令的语法格式如下: <#list sequence as item> ... </#list> 上面的语法格式中,sequence就是一个集合对象,也可以是一个表达式,但该表达式将返回一个集合对象,而item是一个任意的名字,就是被迭代输出的集合元素.此外,迭代集合对象时,还包含两个特殊的循环变量: item_index:当前变量的索引值 item_has_next:是否存在下一个对象 也可以使用<#break>指令跳出迭代 例子如下: <#list ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"] as x> ${x_index + 1}.${x}<#if x_has_next>,</if> <#if x="星期四"><#break></#if> </#list> <p>We have these animals: <table border=1> <tr><th>Name<th>Price <#list animals as being> <tr><td>${being.name}<td>${being.price} Euros </#list> </table> 输出为: <p>We have these animals: <table border=1> <tr><th>Name<th>Price <tr><td>mouse<td>50 Euros <tr><td>elephant<td>5000 Euros <tr><td>python<td>4999 Euros </table> 4、include指令 include指令的作用类似于JSP的包含指令,用于包含指定页.include指令的语法格式如下: <#include filename [options]> 在上面的语法格式中,两个参数的解释如下: filename:该参数指定被包含的模板文件 options:该参数可以省略,指定包含时的选项,包含encoding和parse两个选项,其中encoding指定包含页面时所用的解码集,而parse指定被包含文件是否作为FTL文件来解析,如果省略了parse选项值,则该选项默认是true. <html> <head> <title>Test page</title> </head> <body> <h1>Test page</h1> <p>Blah blah... <#include "/copyright_footer.html"> </body> </html> 5、 import指令 该指令用于导入FreeMarker模板中的所有变量,并将该变量放置在指定的Map对象中,import指令的语法格式如下: <#import "/lib/common.ftl" as com> 上面的代码将导入/lib/common.ftl模板文件中的所有变量,将这些变量放置在一个名为com的Map对象中. 创建库 ? 下面是一个创建库的例子(假设保存在lib/my_test.ftl中): <#macro copyright date> <p>Copyright (C) ${date} Julia Smith. All rights reserved. <br>Email: ${mail}</p> </#macro> <#assign mail = "[email protected]"> ? 使用import指令导入库到模板中,Freemarker会为导入的库创建新的名字空间,并可以通过import指令中指定的散列变量访问库中的变量: <#import "/lib/my_test.ftl" as my> <#assign mail="[email protected]"> <@my.copyrightdate="1999-2002"/> ${my.mail} ${mail} 输出结果: <p>Copyright (C) 1999-2002 Julia Smith. All rights reserved. <br>Email: [email protected]</p> [email protected] [email protected] 可以看到例子中使用的两个同名变量并没有冲突,因为它们位于不同的名字空间 l 可以使用assign指令在导入的名字空间中创建或替代变量,下面是一个例子: <#import "/lib/my_test.ftl" as my> ${my.mail} <#assign mail="[email protected]" in my> ${my.mail} l 输出结果: [email protected] [email protected] l 数据模型中的变量任何地方都可见,也包括不同的名字空间,下面是修改的库: <#macro copyright date> <p>Copyright (C) ${date} ${user}. All rights reserved.</p> </#macro> <#assign mail = "${user}@acme.com"> l 假设数据模型中的user变量的值是Fred,则下面的代码: <#import "/lib/my_test.ftl" as my> <@my.copyright date="1999-2002"/> ${my.mail} l 输出结果: <p>Copyright (C) 1999-2002 Fred. All rights reserved.</p> 1.6 算术运算符 FreeMarker表达式中完全支持算术运算,FreeMarker支持的算术运算符包括:+, - , * , / , % 看如下的代码: <#assign x=5> ${ x * x - 100 } ${ x /2 } ${ 12 } 输出结果是: -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 1.7 比较运算符 表达式中支持的比较运算符有如下几个: 1. =或者==:判断两个值是否相等. 2. !=:判断两个值是否不等. 3. >或者gt:判断左边值是否大于右边值 4. >=或者gte:判断左边值是否大于等于右边值 5. <或者lt:判断左边值是否小于右边值 6. <=或者lte:判断左边值是否小于等于右边值 注意:=和!=可以用于字符串,数值和日期来比较是否相等,但=和!=两边必须是相同类型的值,否则会产生错误,而且FreeMarker是精确比 较,"x","x ","X"是不等的.其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替>会有更好的效果,因为 FreeMarker会把>解释成FTL标签的结束字符,当然,也可以使用括号来避免这种情况,如:<#if (x>y)> 1.8 逻辑运算符 逻辑运算符有如下几个: 逻辑与:&& 逻辑或:|| 逻辑非:! 逻辑运算符只能作用于布尔值,否则将产生错误 1.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 1.10 空值处理运算符 FreeMarker对空值的处理非常严格,FreeMarker的变量必须有值,没有被赋值的变量就会抛出异常,因为FreeMarker未赋值 的变量强制出错可以杜绝很多潜在的错误,如缺失潜在的变量命名,或者其他变量错误.这里所说的空值,实际上也包括那些并不存在的变量,对于一个Java的 null值而言,我们认为这个变量是存在的,只是它的值为null,但对于FreeMarker模板而言,它无法理解null值,null值和不存在的变 量完全相同. 为了处理缺失变量,FreeMarker提供了两个运算符: !: 指定缺失变量的默认值 ??: 判断某个变量是否存在 其中,!运算符的用法有如下两种: variable!或variable!defaultValue,第一种用法不给缺失的变量指定默认值,表明默认值是空字符串,长度为0的集合,或者长度为0的Map对象. 使用!指定默认值时,并不要求默认值的类型和变量类型相同.使用??运算符非常简单,它总是返回一个布尔值,用法为:variable??,如果该变量存在,返回true,否则返回false ########################### 最常用的概念 1、 scalars:存储单值 字符串:简单文本由单或双引号括起来。 数字:直接使用数值。 日期:通常从数据模型获得 布尔值:true或false,通常在<#if …>标记中使用 2、 hashes:充当其它对象的容器,每个都关联一个唯一的查询名字 具有一个唯一的查询名字和他包含的每个变量相关联。 3、 sequences:充当其它对象的容器,按次序访问 使用数字和他包含的每个变量相关联。索引值从0开始。 4、 集合变量: 除了无法访问它的大小和不能使用索引来获得它的子变量:集合可以看作只能由<#list...>指令使用的受限sequences。 5、 方法:通过传递的参数进行计算,以新对象返回结果 方法变量通常是基于给出的参数计算值在数据模型中定义。 6、 用户自定义FTL指令:宏和变换器 7、 节点 节点变量表示为树型结构中的一个节点,通常在XML处理中使用。 在模板里对sequences和hashes初始化 sequences 1. [“you”,”me”,”he”] 2. 1..100 3. [ {“Akey”:”Avalue”},{“Akey1”:”Avalue1”}, {“Bkey”:”Bvalue”},{“Bkey1”:”Bvalue1”}, ] hashes {“you”:”a”,”me”:”b”,”he”:”c”} 注释标志 <#-- 这里是注释 --> 旧版本的freemarker采用的是<#comment> 注释 </#comment>方法 sequences内置方法 sequence?first 返回sequence的第一个值;前提条件sequence不能是null sequence?last 返回sequence最后一个值 sequence?reverse 反转sequence的值 sequence?size 返回sequence的大小 sequence?sort 对sequence按里面的对象toString()的结果进行排序 sequence?sort_by(value) 对sequence 按里面的对象的属性value进行排序 如: sequence里面放入的是10 个user对象,user对象里面包含name,age等属性 sequence?sort_by(name) 表示所有的user按user.name进行排序 hashes内置方法 hash?keys 返回hash里的所有keys, 返回结果类型sequence hash?values 返回hash里的所有value, 返回结果类型sequence 模板 使用FTL(freeMarker模板语言)编写 组成部分 一、整体结构 1、注释:<#--注释内容-->,不会输出。 2、文本:直接输出。 3、interpolation:由 ${var} 或 #{var} 限定,由计算值代替输出。 4、FTL标记 二.表达式 1、直接指定值: 1-1、字符串: 由双引号或单引号括起来的字符串,其中的特殊字符(如' " \等)需要转义。 1-2、raw字符串: 有一种特殊的字符串称为raw字符串,被认为是纯文本,其中的\和{等不具有特殊含义,该类字符串在引号前面加r,下面是一个例子: ${r"/${data}"year""}屏幕输出结果为:/${data}"year" 转义 含义 序列 \" 双引号(u0022) \' 单引号(u0027) \\ 反斜杠(u005C) \n 换行(u000A) \r Return (u000D) \t Tab (u0009) \b Backspace (u0008) \f Form feed (u000C) \l < \g > \a & \{ { \xCode 4位16进制Unicode代码 1-3、数字:直接输入,不需要引号 1)、精度数字使用“.”分隔,不能使用分组符号 2)、目前版本不支持科学计数法,所以“1E3”是错误的 3)、不能省略小数点前面的0,所以“.5”是错误的 4)、数字8、+8、08和8.00都是相同的 1-4、布尔值:true和false,不使用引号 1-5、序列:由逗号分隔的子变量列表,由[]方括号限定。 1)、子变量列表可以是表达式 2)、可以使用数字范围定义数字序列,不需要方括号限定,例如2..5等同于[2, 3, 4, 5],但是更有效率,可以定义反递增范围如:5..2。 1-6、散列(hash) 1)、由逗号分隔的键/值列表,由{}大括号限定,键和值之间用冒号分隔,如:{"key1":valu1,"key2":"character string"....} 2)、键和值都是表达式,但是键必须是字符串。 2、获取变量: 2-1、顶层变量:${变量名} 变量名只能是字母、数字、下划线、$、#、@ 的组合,且不能以数字开头。 2-2、散列:有两种方法 1)、点语法:变量名字和顶层变量的名字受同样的限制 2)、方括号语法:变量名字无限制,可以是任意的表达式的结果 book.author.name book.author.["name"] book["author"].name book["author"]["name"] 以上是等价的。 2-3、序列:使用散列的方括号语法获取变量,方括号中的表达式结果必须为数字。注意:第一个项目的索引为0。可以使用 [startindex..endindex]语法获取序列片段。 2-4、特殊变量:FreeMarker内定义变量,使用.variablename语法访问。 3、字符串操作 3-1、interpolation:使用${}或#{}在文本部分插入表达式的值,例如: ${"hello${username}!"} ${"${username}${username}${username}"} 也可以使用+来获得同样的结果: ${"hello"+username+"!"} ${username+username+username} 注意:${}只能用于文本部分而不能出现于标记内。 <#if ${user.login}>或<#if "${user.login}">都是错误的; <#if user.login>是正确的。 本例中user.login的值必须是布尔类型。 3-2、子串: 举例说明:假如user的值为"Big Joe" ${user[0]}${user[4]}结果是:BJ ${user[1..4]}结果是:ig J 4、序列操作 4-1、连接操作:可以使用+来操作,例如: ["title","author"]+["month","day"] 5、散列操作 5-1、连接操作:可以使用+来操作,如果有相同的KEY,则右边的值会替代左边的值,例如: {"title":散列,"author":"emma"}+{"month":5,"day":5}+{"month":6}结果month的值就是6。 6、算术运算 6-1、操作符:+、-、*、/、% 除+号以外的其他操作符两边的数据,必须都是数字类型。 如果+号操作符一边有一个字符型数据,会自动将另一边的数据转换为字符型数据,运算结果为字符型数据。 6-2、比较操作符: 1}、= 2}、== 3}、!= 4}、< 5}、<= 6}、> 7}、>= 1-3的操作符,两边的数据类型必须相同,否则会产生错误 4-7的操作符,对于日期和数字可以使用,字符串不可以使用。 注意: 1}、FreeMarker是精确比较,所以"x" "x " "X"是不等的。 2}、因为<和>对FTL来说是开始和结束标记,所以,可以用两种方法来避免这种情况: 一种是使用括号<#if (a<b)> 另一是使用替代输出,对应如下: < lt <= lte > gt >= gte 6-3、逻辑操作符:只能用于布尔值,否则会出现错误。 &&(and)与运算 ||(or)或运算 !(not)非运算 6-4、内建函数:使用方法类似于访问散列的子变量,只是使用?代替.例如:${test?upper_case?html} 常用的内建函数列举如下: 1}、字符串使用: html:对字符串进行HTML编码 cap_first:字符串第一个字母大写 lower_first:字符串第一个字母小写 upper_case:将字符串转换成大写 trim:去掉字符前后的空白字符 2)、序列使用: size:获得序列中元素的数目 3)、数字使用: int:取得数字整数部分 7、操作符的优先顺序: 后缀:[subbarName][subStringRange].(mathodParams) 一元:+expr、-expr、! (not) 内建:? 乘法:*、/、% 加法:+、- 关系:<、<=、>、>= (lt、lte、gt、gte) 相等:=、==、!= 逻辑与:&& (and) 逻辑或:|| (or) 数字范围:.. 四、interpolation inperpolation只能用于文本,有两种类型:通用interpolation及数字interpolation 1、通用interpolation 如${expr} 1-1、插入字符串值:直接输出表达式结果。 1-2、插入数字值:根据缺省格式(由setting指令设置)将表达式结果转换成文本输出;可以使用内建函数string来格式化单个interpolation 如: <#setting number_format="currency" /> <#assign answer=42 /> ${answer} <#-- ¥42.00 --> ${answer?string} <#-- ¥42.00 --> ${answer?string.number} <#-- 42 --> ${answer?string.currency} <#-- ¥42.00 --> ${answer?string.percent} <#-- 42,00% --> 1-3、插入日期值:根据缺省格式(由setting指令设置)将表达式结果转换成文本输出;可以使用内建函数string来格式化单个interpolation 如: ${lastupdata?string("yyyy-MM-dd HH:mm:ss zzzz")} <#-- 2003-04-08 21:24:44 Pacific Daylight Time --> ${lastupdata?string("EEE,MMM d, ''yy")} <#-- tue,Apr 8, '03 --> ${lastupdata?string("EEEE,MMMM dd, yyyy,hh:mm:ss a '('zzz')'")} <#-- Tuesday,April 08, 2003, 09:24:44 PM (PDT)--> 1-4、插入布尔值:根据缺省格式(由setting指令设置)将表达式结果转换成文本输出;可以使用内建函数string来格式化单个interpolation 如: <#assign foo=ture /> ${foo?string("yes","no")} <#-- yes --> 2、数字interpolation: 有两种形式: 1)、#{expr} 2)、#{expr;format}:format可以用来格式化数字,format可以是如下: mX:小数部分最小X位 MX:小数部分最大X位 例如: <#assign x=2.582 /> <#assign y=4 /> #{x;M2} <#-- 2.58 --> #{y;M2} <#-- 4 --> #{x;m1} <#-- 2.582 --> #{y;m1} <#-- 4.0 --> #{x;m1M2} <#-- 2.58 --> #{y;m1M2} <#-- 4.0 --> 宏 宏和变换器变量是两种不同类型的用户自定义指令,他们的区别是: 宏可以在模板中用macro指令来定义 变换器是在模板外由程序定义 1、宏:和某个变量关联的模板片段,以便在模板中通过用户自定义指令使用该变量 1-1、基本用法: 例如: <#macro greet> <font size="+2"> Hello JOE! </#macro> 使用时: <@greet></@greet> 如果没有体内容也可以用 <@greet /> 1-2、变量: 1)、可以在宏定义之后定义参数,宏参数是局部变量,只在宏定义中有效。如: <#macro greet person> <font size="+2"> Hello ${person}! </#macro> 使用时: <@greet person="emma"> and <@greet person="LEO"> 输出为: <font size="+2"> Hello emma! <font size="+2"> Hello LEO! 注意:宏的参数是FTL表达式,所以,person=emma和上面的例子中具有不同的意义,这意味着将变量emma的值传给person,这个值可能是任意一种数据类型,甚至是一个复杂的表达式。 宏可以有多个参数,使用时参数的次序是无关的,但是只能使用宏中定义的参数,并且对所有参数赋值。如: <#macro greet person color> <font size="+2" color="${color}"> Hello ${person}! </#macro> 使用时: <@greet color="black" person="emma" />正确 <@greet person="emma" />错误,color没有赋值,此时,如果在定义宏时为color定义缺省值<#macro greet person color="black">这样的话,这个使用方法就是正确的。 <@greet color="black" person="emma" bgcolor="yellow" />错误,宏greet定义中未指定bgcolor这个参数 2、嵌套内容: 2-1、自定义指令可以有嵌套内容,使用<#nested>指令,执行自定义指令开始和结束标记之间的模板片段。例如: <#macro greet> <#nested> </#macro> <@greet>hello Emma!</@greet> 输出为 hello Emma! 2-2、<#nested>指令可以被多次调用,例如 <#macro greet> <#nested> <#nested> <#nested> <#nested> </#macro> <@greet>hello Emma!</@greet> 输出为 hello Emma! hello Emma! hello Emma! hello Emma! 2-3、嵌套的内容可以是有效的FTL,例如: <#macro welcome> <#nested> </#macro> <#macro greet person color="black"> <font size="+2" color="${color}"> Hello ${person}! </#macro> <@welcome> <@greet person="Emma" color="red" /> <@greet person="Andrew" /> <@greet person="Peter" /> </@welcome> 输出为: <font size="+2" color="red"> Hello Emma! <font size="+2" color="black"> Hello Andrew! <font size="+2" color="black"> Hello Peter! 2-4、宏定义中的局部变量对嵌套内容是不可见的,例如: <#macro repeat count> <#local y="test" /> <#list 1..count as x> ${y}${count}/${x}:<#nested /> </#list> </#macro> <@repeat count=3> ${y?default("?")} ${x?default("?")} ${count?default("?")} </@repeat> 输出结果为 test 3/1:??? test 3/2:??? test 3/3:??? 2-5、在宏定义中使用循环变量,通常用来重复嵌套内容,基本用法为:作为nested指令的参数,传递循环变量的实际值,而在调用自定义指令时,在标记的参数后面指定循环变量的名字。 例如: <#macro repeat count> <#list 1..count as x> <#nested x,x/2,x==count /> </#list> </#macro> <@repeat count=4;c,halfc,last> ${c}. ${halfc} <#if last> last! </#if> </@repeat> 输出结果是 1. 0.5 2. 1 3. 1.5 4. 2last! 注意:指定循环变量的数目和用户定义指令开始标记指定的不同不会有问题 调用时,少指定循环变量,多指定的值会不见 调用时,多指定循环变量,多余的循环变量不会被创建 二、在模板中定义变量 1、在模板中定义的变量有三种类型 1-1、plain变量:可以在模板的任何地方访问,包括使用include指令插入的模板,使用assign指令创建和替换。 1-2、局部变量:在宏定义体中有效,使用local指令创建和替换。 1-3、循环变量:只能存在于指令的嵌套内容,由指令(如list)自动创建。 注意: 1)、宏的参数是局部变量,不是循环变量。 2)、局部变量隐藏同名的plain变量 3)、循环变量隐藏同名的plain变量和局部变量。 例如: <#assign x="plain"> 1. ${x} <#-- plain --> <@test /> 6. ${x} <#list ["loop"] as x> 7. ${x} <#-- loop --> <#assign x="plain2"> 8. ${x} <#-- loop --> </#list> 9. ${x} <#-- plain2 --> <#macro test> 2. ${x} <#-- plain --> <#local x="local"> 3. ${x} <#-- local --> <#list ["loop"] as x> 4. ${x} <#-- loop --> </#list> 5. ${x} <#-- local --> </#macro> 4)、内部循环变量隐藏同名的外部循环变量 <#list ["loop1"] as x> ${x} <#-- loop1 --> <#list ["loop2"] as x> ${x} <#-- loop2 --> <#list ["loop3"] as x> ${x} <#-- loop3 --> </#list> ${x} <#-- loop2 --> </#list> ${x} <#-- loop1 --> </#list> 5)、模板中的变量会隐藏数据模型中的同名变量,如果需访问数据模型中的变量,使用特殊变量global。 例如: 假设数据模型中的user值为Emma <#assign user="Man"> ${user} <#-- Man --> ${.global.user} <#-- Emma --> macro, nested, return 语法 <#macro name param1 param2 ... paramN> ... <#nested loopvar1, loopvar2, ..., loopvarN> ... <#return> ... </#macro> 用例 <#macro test foo bar="Bar"[A1] baaz=-1> Test text, and the params: ${foo}, ${bar}, ${baaz} </#macro> <@test foo="a" bar="b" baaz=5*5-2/> <@test foo="a" bar="b"/> <@test foo="a" baaz=5*5-2/> <@test foo="a"/> 输出 Test text, and the params: a, b, 23 Test text, and the params: a, b, -1 Test text, and the params: a, Bar, 23 Test text, and the params: a, Bar, -1 定义循环输出的宏 <#macro list title items> ${title?cap_first}: <ul> <#list items as x> <li>${x?cap_first} </#list> </#macro> <@list items=["mouse", "elephant", "python"] title="Animals"/> 输出结果 Animals: 包含body的宏 <#macro repeat count> <#list 1..count as x> <#nested x, x/2, x==count> </#list> </#macro> <@repeat count=4 ; c halfc last> ${c}. ${halfc} <#if last> Last!</#if> </@repeat> 输出 1. 0.5 2. 1 3. 1.5 4. 2 Last! t, lt, rt 语法 <#t> 去掉左右空白和回车换行 <#lt>去掉左边空白和回车换行 <#rt>去掉右边空白和回车换行 <#nt>取消上面的效果 B指令 freemarker指令有两种: 1、预定义指令:引用方式为<#指令名称> 2、用户定义指令:引用方式为<@指令名称>,引用用户定义指令时须将#换为@。 注意:如果使用不存在的指令,FreeMarker不会使用模板输出,而是产生一个错误消息。 freemarker指令由FTL标记来引用,FTL标记和HTML标记类似,名字前加#来加以区分。如HTML标记的形式为<h1></h1>则FTL标记的形式是<#list></#list>(此处h1标记和list指令没有任何功能上的对应关系,只是做为说明使用一下)。 有三种FTL标记: 1)、开始标记:<#指令名称> 2)、结束标记:</#指令名称> 3)、空标记:<#指令名称/> 注意: 1) FTL会忽略标记之中的空格,但是,<#和指令 与 </#和指令 之间不能有空格。 2) FTL标记不能够交叉,必须合理嵌套。每个开始标记对应一个结束标记,层层嵌套。 如: <#list> <li> ${数据} <#if 变量> game over! </#if> </#list> 注意事项: 1)、FTL对大小写敏感。所以使用的标记及interpolation要注意大小写。name与NAME就是不同的对象。<#list>是正确的标记,而<#List>则不是。 2)、interpolation只能在文本部分使用,不能位于FTL标记内。如<#if ${var}>是错误的,正确的方法是:<#if var>,而且此处var必须为布尔值。 3)、FTL标记不能位于另一个FTL标记内部,注释例外。注释可以位于标记及interpolation内部。 if, else, elseif 语法 <#if condition> ... <#elseif condition2> ... <#elseif condition3> ... ... <#else> ... </#if> 用例 <#if x = 1> x is 1 </#if> <#if x = 1> x is 1 <#else> x is not 1 </#if> We have these animals: <table border=1> <tr><th>Name<th>Price <#list animals as being> <tr> <td> <#if being.size = "large"></#if></#if> ${being.name} <#if being.size = "large"> <td>${being.price} Euros </#list> </table> <#if user = "Big Joe"> It is Big Joe </#if> <#if user != "Big Joe"> It is not Big Joe </#if> switch, case, default, break 语法 <#switch value> <#case refValue1> ... <#break> <#case refValue2> ... <#break> <#case refValueN> ... <#break> <#default> ... </#switch> 用例 字符串 <#switch being.size> <#case "small"> This will be processed if it is small <#break> <#case "medium"> This will be processed if it is medium <#break> <#case "large"> This will be processed if it is large <#break> <#default> This will be processed if it is neither </#switch> 数字 <#switch x> <#case x = 1> 1 <#case x = 2> 2 <#default> d </#switch> 如果x=1 输出 1 2, x=2输出 2, x=3 输出d list, break 语法 <#list sequence as item> ... <#if item = "spring"><#break></#if> ... </#list> 关键字 item_index:是list当前值的下标 item_has_next:判断list是否还有值 用例 <#assign seq = ["winter", "spring", "summer", "autumn"]> <#list seq as x> ${x_index + 1}. ${x}<#if x_has_next>,</#if> </#list> 输出 1. winter, 2. spring, 3. summer, 4. autumn include 语法 <#include filename> or <#include filename options> options包含两个属性 encoding=”GBK” 编码格式 parse=true 是否作为ftl语法解析,默认是true,false就是以文本方式引入.注意在ftl文件里布尔值都是直接赋值的如parse=true,而不是parse=”true” 用例 /common/copyright.ftl包含内容 Copyright 2001-2002 ${me}<br> All rights reserved. 模板文件 <#assign me = "Juila Smith"> <h1>Some test</h1> Yeah. <#include "/common/copyright.ftl" encoding=”GBK”> 输出结果 <h1>Some test</h1> Yeah. <html> <head> <title>Test page</title> </head> <body> <h1>Test page</h1> Blah blah... <#include "/copyright_footer.html"> </body> </html> Import 语法 <#import path as hash> 类似于java里的import,它导入文件,然后就可以在当前文件里使用被导入文件里的宏组件 用例 假设mylib.ftl里定义了宏copyright那么我们在其他模板页面里可以这样使用 <#import "/libs/mylib.ftl" as my> <@my.copyright date="1999-2002"/> "my"在freemarker里被称作namespace compress 语法 <#compress> ... </#compress> 用来压缩空白空间和空白的行 用例 <#assign x = " moo \n\n "> (<#compress> 1 2 3 4 5 ${moo} test only I said, test only </#compress>) 输出 (1 2 3 4 5 moo test only I said, test only) escape, noescape 语法 <#escape identifier as expression> ... <#noescape>...</#noescape> ... </#escape> 用例 主要使用在相似的字符串变量输出,比如某一个模块的所有字符串输出都必须是html安全的,这个时候就可以使用该表达式 <#escape x as x?html> First name: ${firstName} <#noescape>Last name: ${lastName}</#noescape> Maiden name: ${maidenName} </#escape> 相同表达式 First name: ${firstName?html} Last name: ${lastName } Maiden name: ${maidenName?html} assign 语法 <#assign name=value> or <#assign name1=value1 name2=value2 ... nameN=valueN> or <#assign same as above... in namespacehash> or <#assign name> capture this </#assign> or <#assign name in namespacehash> capture this </#assign> 用例 生成变量,并且给变量赋值 给seasons赋予序列值 <#assign seasons = ["winter", "spring", "summer", "autumn"]> 给变量test加1 <#assign test = test + 1> 给my namespage 赋予一个变量bgColor,下面可以通过my.bgColor来访问这个变量 <#import "/mylib.ftl" as my> <#assign bgColor="red" in my> 将一段输出的文本作为变量保存在x里 下面的阴影部分输出的文本将被赋值给x <#assign x> <#list 1..3 as n> ${n} <@myMacro /> </#list> </#assign> Number of words: ${x?word_list?size} ${x} <#assign x>Hello ${user}!</#assign> error <#assign x=” Hello ${user}!”> true 同时也支持中文赋值,如: <#assign 语法> java </#assign> ${语法} 打印输出: java global 语法 <#global name=value> or <#global name1=value1 name2=value2 ... nameN=valueN> or <#global name> capture this </#global> 全局赋值语法,利用这个语法给变量赋值,那么这个变量在所有的namespace中是可见的,如果这个变量被当前的assign语法覆盖如<#global x=2> <#assign x=1> 在当前页面里x=2将被隐藏,或者通过${.global.x}来访问[A2] setting 语法 <#setting name=value> 用来设置整个系统的一个环境 locale number_format boolean_format date_format, time_format, datetime_format time_zone classic_compatible 用例 假如当前是匈牙利的设置,然后修改成美国 ${1.2} <#setting locale="en_US"> ${1.2} 输出 1,2 1.2 因为匈牙利是采用“,”作为十进制的分隔符,美国是用“.” C一些常用方法或注意事项 表达式转换类 ${expression}计算expression并输出 #{ expression }数字计算#{ expression ;format}安格式输出数字format为M和m M表示小数点后最多的位数,m表示小数点后最少的位数如#{121.2322;m2M2}输出121.23 数字循环 1..5 表示从1到5,原型number..number 对浮点取整数 ${123.23?int} 输出123 给变量默认值 ${var?default(“hello world<br>”)?html}如果var is null那么将会被hello world<br>替代 判断对象是不是null <#if mouse?exists> Mouse found <#else> 也可以直接${mouse?if_exists})输出布尔形 常用格式化日期 openingTime必须是Date型,详细查看freemarker文档 Reference->build-in referece->build-in for date ${openingTime?date} ${openingTime?date_time} ${openingTime?time} 添加全局共享变量数据模型 在代码里的实现 cfg = Configuration.getDefaultConfiguration(); cfg.setSharedVariable("global", "you good"); 页面实现可以通过global指令,具体查看指令里的global部分 直接调用java对象的方法 ${object.methed(args)} 字符串处理(内置方法) html安全输出 “abc<table>sdfsf”?html 返回安全的html输出,替换掉html代码 xml安全输出 var?xml substring的用法 <#assign user=”hello jeen”> ${user[0]}${user[4]} ${user[1..4]} 输出 : ho ello 类似String.split的用法 “abc;def;ghi”?split(“;”)返回sequence 将字符串按空格转化成sequence,然后取sequence的长度 var?word_list 效果同 var?split(“ ”) var?word_list?size 取得字符串长度 var?length 大写输出字符 var?upper_case 小写输出字符 var?lower_case 首字符大写 var?cap_first 首字符小写 var?uncap_first 去掉字符串前后空格 var?trim 每个单词的首字符大写 var?capitalize 类似String.indexof: “babcdabcd”?index_of(“abc”) 返回1 “babcdabcd”?index_of(“abc”,2) 返回5 类似String.lastIndexOf last_index_of和String.lastIndexOf类似,同上 下面两个可能在代码生成的时候使用(在引号前加”\”) j_string: 在字符串引号前加”\” <#assign beanName = 'The "foo" bean.'> String BEAN_NAME = "${beanName?j_string}"; 打印输出: String BEAN_NAME = "The \"foo\" bean."; js_string: <#assign user = "Big Joe's \"right hand\"."> <script> alert("Welcome ${user}!"); </script> 打印输出: alert("Welcome Big Joe\'s \"right hand\"!"); 替换字符串 replace${s?replace(‘ba’, ‘XY’ )} ${s?replace(‘ba’, ‘XY’ , ‘规则参数’)}将s里的所有的ba替换成xy 规则参数包含:i r m s c f具体含义如下: ·i: 大小写不区分. ·f: 只替换第一个出现被替换字符串的字符串 ·r: XY是正则表达式 ·m: Multi-line mode for regular expressions. In multi-line mode the expressions ^ and $ match just after or just before, respectively, a line terminator or the end of the string. By default these expressions only match at the beginning and the end of the entire string. ·s: Enables dotall mode for regular expressions (same as Perl singe-line mode). In dotall mode, the expression . matches any character, including a line terminator. By default this expression does not match line terminators. ·c: Permits whitespace and comments in regular expressions. D freemarker在web开发中注意事项 freemarker与webwork整合 web中常用的几个对象 Freemarker的ftl文件中直接使用内部对象: ${Request ["a"]} ${RequestParameters["a"]} ${Session ["a"]} ${Application ["a"]} ${JspTaglibs ["a"]} 与webwork整合之后 通过配置的servlet 已经把request,session等对象置入了数据模型中 在view中存在下面的对象 我们可以在ftl中${req}来打印req对象 req - the current HttpServletRequest res - the current HttpServletResponse stack - the current OgnlValueStack ognl - the OgnlTool instance webwork - an instance of FreemarkerWebWorkUtil action - the current WebWork action exception - optional the Exception instance, if the view is a JSP exception or Servlet exception view view中值的搜索顺序 ${name}将会以下面的顺序查找name值 freemarker variables value stack request attributes session attributes servlet context attributes 在模板里ftl里使用标签 注意,如果标签的属性值是数字,那么必须采用nubmer=123方式给属性赋值 JSP页面 < contentType="text/html;charset=ISO-8859-2" language="java"%> < uri="/WEB-INF/struts-html.tld" prefix="html"%> < uri="/WEB-INF/struts-bean.tld" prefix="bean"%> <html> <body> <h1><bean:message key="welcome.title"/></h1> <html:errors/> <html:form action="/query"> Keyword: <html:text property="keyword"/><br> Exclude: <html:text property="exclude"/><br> <html:submit value="Send"/> </html:form> </body> </html> 模板ftl页面 <#assign html=JspTaglibs["/WEB-INF/struts-html.tld"]> <#assign bean=JspTaglibs["/WEB-INF/struts-bean.tld"]> <html> <body> <h1><@bean.message key="welcome.title"/></h1> <@html.errors/> <@html.form action="/query"> Keyword: <@html.text property="keyword"/><br> Exclude: <@html.text property="exclude"/><br> <@html.submit value="Send"/> </@html.form> </body> </html> 如何初始化共享变量 1. 初始化全局共享数据模型 freemark在web上使用的时候对共享数据的初始化支持的不够,不能在配置初始化的时候实现,而必须通过ftl文件来初始化全局变量。这是不能满主需求的,我们需要在servlet init的时候留出一个接口来初始化系统的共享数据 具体到和webwork整合,因为本身webwork提供了整合servlet,如果要增加全局共享变量,可以通过修改com.opensymphony.webwork.views.freemarker.FreemarkerServlet来实现,我们可以在这个servlet初始化的时候来初始化全局共享变量 与webwork整合配置 配置web.xml <servlet> <servlet-name>freemarker</servlet-name> <servlet-class>com.opensymphony.webwork.views.freemarker.FreemarkerServlet</servlet-class> <init-param> <param-name>TemplatePath</param-name> <param-value>/</param-value> <!—模板载入文件夹,这里相对context root,递归获取该文件夹下的所有模板--> </init-param> <init-param> <param-name>NoCache</param-name> <!—是否对模板缓存--> <param-value>true</param-value> </init-param> <init-param> <param-name>ContentType</param-name> <param-value>text/html</param-value> </init-param> <init-param> <param-name>template_update_delay</param-name> <!—模板更新时间,0表示每次都更新,这个适合开发时候--> <param-value>0</param-value> </init-param> <init-param> <param-name>default_encoding</param-name> <param-value>GBK</param-value> </init-param> <init-param> <param-name>number_format</param-name> <param-value>0.##########</param-value><!—数字显示格式--> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>freemarker</servlet-name> <url-pattern>*.ftl</url-pattern> </servlet-mapping> E高级方法 自定义方法 ${timer("yyyy-MM-dd H:mm:ss", x)} ${timer("yyyy-MM-dd ", x)} 在模板中除了可以通过对象来调用方法外(${object.methed(args)})也可以直接调用java实现的方法,java类必须实现接口TemplateMethodModel的方法exec(List args). 下面以把毫秒的时间转换成按格式输出的时间为例子 public class LongToDate implements TemplateMethodModel { public TemplateModel exec(List args) throws TemplateModelException { SimpleDateFormat mydate = new SimpleDateFormat((String) args.get(0))); return mydate.format(new Date(Long.parseLong((String)args.get(1))); } } 将LongToDate对象放入到数据模型中 root.put("timer", new IndexOfMethod()); ftl模板里使用 <#assign x = "123112455445"> ${timer("yyyy-MM-dd H:mm:ss", x)} ${timer("yyyy-MM-dd ", x)} 输出 2001-10-12 5:21:12 2001-10-12 自定义 Transforms 实现自定义的<@transform>文本或表达式</@transform>的功能,允许对中间的最终文本进行解析转换 例子:实现<@upcase>str</@upcase> 将str转换成STR 的功能 代码如下: import java.io.*; import java.util.*; import freemarker.template.TemplateTransformModel; class UpperCaseTransform implements TemplateTransformModel { public Writer getWriter(Writer out, Map args) { return new UpperCaseWriter(out); } private class UpperCaseWriter extends Writer { private Writer out; UpperCaseWriter (Writer out) { this.out = out; } public void write(char[] cbuf, int off, int len) throws IOException { out.write(new String(cbuf, off, len).toUpperCase()); } public void flush() throws IOException { out.flush(); } public void close() { } } } 然后将此对象put到数据模型中 root.put("upcase", new UpperCaseTransform()); 在view(ftl)页面中可以如下方式使用 <@upcase> hello world </@upcase> 打印输出: HELLO WORLD F.Built-ins ${x?upper_case} – 小写变大写 ${test?html} - 转换为HTML编码格式 ${repeat("A", B)} – 复制B次A Example: ${test?html} ${test?upper_case?html} Assuming that test stores the string ``Tom & Jerry'', the output will be: Tom & Jerry TOM & JERRY --------- ${repeat("What", 3)} will print: :WhatWhatWhat 1. String内置的JavaScript转换: js_string 用途:用于JavaScript转义,转换',",换行等特殊字符 模板: <script> alert("${errorMessage?js_string}"); </script> 输出: <script> alert("Readonly\'s pet name is \"Cross Bone\""); </script> 2.内置的默认值处理:default 用途: 用于处理默认值 模本: User: ${userLogin.name?default("Anonymous")} <td>${(employee.department.manager.name)?default(" ")}</td> 输出: User: Anonymous <td> </td> 注,可以对整个对象树加上(),再用内置处理器这种方便的做法,偶也是最近刚学会的,以前一直用很傻的方法做..... 3. Sequence内置的计数器: xxx_index 用途:显示序号 模板: <#list employees as e> ${e_index}. ${e.name} </#list> 输出: 1. Readonly 2. Robbin 4. Sequence内置的分段器: chunk 用途:某些比较BT的排版需求 模板: <#assign seq = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']> <#list seq?chunk(4) as row> <ul> <li><#list row as cell>${cell} </#list> </#list> <#list seq?chunk(4, '-') as row> <tr> <td><#list row as cell>${cell} </#list></td> </tr> </#list> 输出: <ul> <li>a <li>b <li>c <li>d <ul> <li>e <li>f <li>g <li>h <ul> <li>i <li>j <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td>e</td> <td>f</td> <td>g</td> <td>h</td> </tr> <tr> <td>i</td> <td>j</td> <td>-</td> <td>-</td> </tr> String ${"It's \"quoted\" and this is a backslash: \\"} ${'It\'s "quoted" and this is a backslash: } ${r"${foo}"} raw字符串,原封不动地现实引号中的内容 ps:前一种是用双引号来引用字符串,后一种是用单引号来引用字符串。 分别需要对双引号和单引号进行转义 ${"${user}${user}${user}${user}"} ${user + user + user + user} 效果相同 ★substring ${user[0]}${user[4]} ${user[1..4]} ${user[4..]} ★number 不支持科学计数法 小数点前面的零不能省略 ★sequences <#list ["winter", "spring", "summer", "autumn"] as x> ${x} </#list> <#list 2..5 as x> ${x} </#list> <#list [2,3,4,5] as x> ${x} </#list> 数组的拼接 <#list ["Joe", "Fred"] + ["Julia", "Kate"] as user> - ${user} </#list> ★hash <#assign ages = {"Joe":23, "Fred":25} + {"Joe":30, "Julia":18}> - Joe is ${ages.Joe} - Fred is ${ages.Fred} - Julia is ${ages.Julia} 注意重复的键对应的值取最后的一个 ★运算 ${5/2?int} 显示2 cap_first : 首字母大写 capitalize: 所有单词首刺目大写 html : 转换为HTML格式 < replaced with < > replaced with > & replaced with & " replaced with " index_of : 显示元素所在的位置 "abcabc"?index_of("bc") 返回值为1(下标从0开始) Contains:判断是否存在字符 <#if "piceous"?contains("ice")>It contains "ice"</#if> 输出: It contains "ice" Replace :替换 split(“XX”):截取XX之后的字符 <#list "someMOOtestMOOtext"?split("MOO") as x> - ${x} </#list> 输出: - some - test - text starts_with :字符串由什么开始返回布尔型 trim :去掉空格 seq_index_of 数组中元素的位置 <#assign colors = ["red", "green", "blue"]> ${colors?seq_index_of("blue")} 输出: 2 Default : 设置变量的默认值 Exists:放在if句 如果没有….. <#if mouse?exists> Mouse found <#else> No mouse found </#if> Creating mouse... <#assign mouse = "Jerry"> <#if mouse?exists> Mouse found <#else> No mouse found </#if> 输出 : No mouse found Creating mouse... Mouse found if_exists 放在一般语句 (${mouse?if_exists}) Creating mouse... <#assign mouse = "Jerry"> (${mouse?if_exists}) 输出: () Creating mouse... (Jerry) 删除空白行和空格 <#compress> ... </#compress> 让此标记内的代码都执行<#escape 后的?参数 <#escape> </#escape> <#escape x as x?html> From: ${mailMessage.From} Subject: ${mailMessage.Subject} <#noescape>Message: ${mailMessage.htmlFormattedBody}</#noescape> ... </#escape> 输出: From: ${mailMessage.From?html} Subject: ${mailMessage.Subject?html} Message: ${mailMessage.htmlFormattedBody} ... [A1]默认值 [A2]<#import “lib/abc.ftl” as abc>这里的abc叫做namespace chunk, is_date, last, root, j_string, contains, is_hash, long, float, ends_with, namespace, matches, time, values, seq_last_index_of, uncap_first, byte, substring, is_transform, web_safe, groups, seq_contains, is_macro, index_of, word_list, int, is_method, eval, parent, xml, number, capitalize, if_exists, rtf, node_type, double, is_directive, url, size, default, is_boolean, split, node_name, is_enumerable, seq_index_of, is_sequence, sort, is_node, sort_by, left_pad, cap_first, interpret, children, node_namespace, chop_linebreak, date, short, last_index_of, is_collection, ancestors, length, trim, datetime, is_string, reverse, c, keys, upper_case, js_string, has_content, right_pad, replace, is_hash_ex, new, is_number, is_indexable, lower_case, string, exists, html, first, starts_with ##############2222222222222222############### struts2.0 标签+ftl标签 FreeMarker中文API手册(完整) http://blog.csdn.net/junjun16818/article/details/6990068 三目: ${true?string('5','7')} ${line.class.simpleName} <#if line.class.simpleName=="ViewLine">你好</#if> list里面是object数组 <#if (areaList?exists)> <#list areaList as line> <span style="background-color:#${(sc[(line_index)%6])}">${line[1]}:${line[0]}</span> </#list> </#if> 取得list的长度: <#if (pageInfo.resultList?size>0)> 截取字符串:<#if news.title?length gt 14>${news.title.substring(0,14)}...<#else>${news.title?if_exists}</#if> 拆分字符数组 <#if (lineInfo.lineDate?exists)&&(lineInfo.lineDate?length>10)> <#list lineInfo.lineDate?split(",") as d> <input type="text" name="lineInfo.lineDate" id="lineDate" value="${d}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd', skin:'whyGreen'})"/> </#list> </#if> 1.注释: 包含在<#--和--> 2.注意: 由于Freemarker会将>解释成FTL标记的结束字符,所以对于>和>=可以使用括号来避免这种情况,例如 <#if (x > y)> 3.<#local y = "test"> 定义局部变量 4.<#import "/lib/my_test.ftl" as my> 导入模板文件 指定名字空间 my 5. if指令 <#if animals.python.price < animals.elephant.price> Pythons are cheaper than elephants today. <#else> Pythons are not cheaper than elephants today. </#if> 6. list指令以及列表序号 <#list animals as being> 第${being_index+1}个<#--默认是0开始--> <tr><td>${being.name}<td>${being.price} Euros </#list> <#list ["winter", "spring", "summer", "autumn"] as x> ${x} </#list> <#list ["Joe", "Fred"] + ["Julia", "Kate"] as user> - ${user} </#list> 输出结果是: - Joe - Fred - Julia - Kate include指令 <#include "/copyright_footer.html"> 7.判断是否为空 ${userInfo.userName?if_exists} <#if ((user.sex)!'')=='1'>男<#elseif ((user.sex)!'')=='2'>女</#if> <#if searchType ? exists && searchType=='on'>checked</#if> <#if time ? exists && (time!'')=='y' || (time!'')=='m' || (time!'')=='d'>统计条件<#else>保证金返款数量</#if> <#if ((time)!'')=='y'>按年统计<#elseif ((time)!'')=='m'>按月统计<#elseif ((time)!'')=='d'>按日统计<#else>默认按日统计</#if> 8.截取字符串 ${carInfo.carNum.substring(0,1)} 9.freemarker的replace功能 替换字符串 replace 线路标签:${lineInfo.lineLableDescribe?replace('#','、')} ${s?replace(‘ba’, ‘XY’ )} ${s?replace(‘ba’, ‘XY’ , ‘规则参数’)}将s里的所有的ba替换成xy 规则参数包含: i r m s c f 具体含义如下: · i: 大小写不区分. · f: 只替换第一个出现被替换字符串的字符串 · r: XY是正则表达式 · m: Multi-line mode for regular expressions. In multi-line mode the expressions ^ and $ match just after or just before, respectively, a line terminator or the end of the string. By default these expressions only match at the beginning and the end of the entire string. · s: Enables dotall mode for regular expressions (same as Perl singe-line mode). In dotall mode, the expression . matches any character, including a line terminator. By default this expression does not match line terminators. · c: Permits whitespace and comments in regular expressions. 10.三目运算 ${true?string('5','7')} 11.string格式化单个Interpolation,下面是一个例子: <#setting number_format="currency"/> <#assign answer=42/> ${answer} ${answer?string} <#-- the same as ${answer} --> ${answer?string.number} ${answer?string.currency} ${answer?string.percent} 输出结果是: $42.00 $42.00 42 $42.00 4,200% 12.插入日期值:根据缺省格式(由#setting指令设置)将表达式结果转换成文本输出;可以使用内建函数string格式化单个Interpolation,下面是一个使用格式模式的例子: ${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')'")} 输出的结果类似下面的格式: 2003-04-08 21:24:44 Pacific Daylight Time Tue, Apr 8, '03 Tuesday, April 08, 2003, 09:24:44 PM (PDT) 13.插入布尔值:根据缺省格式(由#setting指令设置)将表达式结果转换成文本输出;可以使用内建函数string格式化单个Interpolation,下面是一个例子: <#assign foo=true/> ${foo?string("yes", "no")} 输出结果是: yes <#if cList?exists> <#assign index = 1 /> <#list cList as cList> <#if index==1 || index %3==0> <div class="base_row"> </#if> <div class="fldivlr5"><font class="font_gray">车型:</font></div> <div class="fldivlr5">三厢轿车</div> <#if index %3==0 || !cList_has_next> </div> </#if> <#assign index=index+1 /> </#list> </#if> Freemarker 内置函数 数字、字符串、日期格式化 一、 Sequence的内置函数 1. sequence?first 返回sequence的第一个值。 2. sequence?last 返回sequence的最后一个值。 3. sequence?reverse 将sequence的现有顺序反转,即倒序排序 4. sequence?size 返回sequence的大小 5. sequence?sort 将sequence中的对象转化为字符串后顺序排序 6. sequence?sort_by(value) 按sequence中对象的属性value进行排序 二、 Hash的内置函数 1. hash?keys 返回hash里的所有key,返回结果为sequence 2. hash?values 返回hash里的所有value,返回结果为sequence 例如: <#assign user={“name”:“hailang”, “sex”:“man”}> <#assign keys=user?keys> <#list keys as key> ${key}=${user[key]} </#list> 三、 操作字符串函数 1. substring(start,end)从一个字符串中截取子串 start:截取子串开始的索引,start必须大于等于0,小于等于end end: 截取子串的长度,end必须大于等于0,小于等于字符串长度,如果省略该参数,默认为字符串长度。 例子: ${‘str’?substring(0)}à结果为str ${‘str’?substring(1)}à结果为tr ${‘str’?substring(2)}à结果为r ${‘str’?substring(3)}à结果为 ${‘str’?substring(0,0)}à结果为 ${‘str’?substring(0,1)}à结果为s ${‘str’?substring(0,2)}à结果为st ${‘str’?substring(0,3)}à结果为str 2. cap_first 将字符串中的第一个单词的首字母变为大写。 ${‘str’?cap_first}à结果为Str 3. uncap_first将字符串中的第一个单词的首字母变为小写。 ${‘Str’?cap_first}à结果为str 4. capitalize将字符串中的所有单词的首字母变为大写 ${‘str’? capitalize}à结果为STR 5. date,time,datetime将字符串转换为日期 例如: <#assign date1=”2009-10-12”?date(“yyyy-MM-dd”)> <#assign date2=”9:28:20”?time(“HH:mm:ss”)> <#assign date3=” 2009-10-12 9:28:20”?time(“HH:mm:ss”)> ${date1}à结果为2009-10-12 ${date2}à结果为9:28:20 ${date3}à结果为2009-10-12 9:28:20 注意:如果指定的字符串格式不正确将引发错误。 6. ends_with 判断某个字符串是否由某个子串结尾,返回布尔值。 ${“string”?ends_with(“ing”)?string} 返回结果为true 注意:布尔值必须转换为字符串才能输出 7. html 用于将字符串中的<、>、&和“替换为对应得<>":& 8. index_of(substring,start)在字符串中查找某个子串,返回找到子串的第一个字符的索引,如果没有找到子串,则返回-1。 Start参数用于指定从字符串的那个索引处开始搜索,start为数字值。 如果start大于字符串长度,则start取值等于字符串长度,如果start小于0, 则start取值为0。 ${“string”?index_of(“in”) à结果为3 ${“string”?index_of(“ab”) à结果为-1 9.length返回字符串的长度 ${“string”?length}à结果为6 10. lower_case将字符串转为小写 ${“STRING”?lower_case}à结果为string 11.upper_case将字符串转为大写 ${“string”?upper_case}à结果为STRING 12. contains 判断字符中是否包含某个子串。返回布尔值 ${“string”?contains(“ing”)?string} à结果为true 注意:布尔值必须转换为字符串才能输出 13. number将字符串转换为数字 ${“111.11”?number}à结果为111.11 14.replace用于将字符串中的一部分从左到右替换为另外的字符串。 ${“strabg”?replace(“ab”,”in”)} à结果为string 15.split使用指定的分隔符将一个字符串拆分为一组字符串 <#list “This|is|split”?split(“|”) as s> ${s} </#list> 结果为: This is split 16. trim 删除字符串首尾空格 ${“ String ”?trim} à结果为String 四、 操作数字 1. c 用于将数字转换为字符串 ${123?c} à结果为123 2. string用于将数字转换为字符串 Freemarker中预订义了三种数字格式:number,currency(货币)和percent(百分比)其中number为默认的数字格式转换 例如: <#assign tempNum=20> ${tempNum} ${tempNum?string.number}或${tempNum?string(“number”)} à结果为20 ${tempNum?string.currency}或${tempNum?string(“currency”)} à结果为¥20.00 ${tempNum?string. percent}或${tempNum?string(“percent”)} à结果为2,000% 五、 操作布尔值 string 用于将布尔值转换为字符串输出 true转为“true”,false转换为“false” foo?string(“yes”,”no”)如果布尔值是true,那么返回“yes”,否则返回no <#assign index = 1 /> <#list pageInfo.resultList as p> <tr class=<#if index%2==0>"sealistra"<#else>"sealistrb"</#if> align="center"> <td align="center">${index}</td> ${p.userName?if_exists} <td><#if ((p.roleType)!'')=='1'>司机<#elseif ((p.roleType)!'')=='2'>乘客</#if></td> <td><#if ((p.journeyType)!'')=='1'>单程<#elseif ((p.journeyType)!'')=='2'>往返</#if></td> <td>${(p.ver)!""}</td> <td> <#if ((p.statusFlag)!'')=='0'>默认 <#elseif ((p.statusFlag)!'')=='1'>匹配成功 </#if> </td> <td> <#if p.createTime?exists >${p.createTime?string("yyyy-MM-dd HH:mm:ss")}</#if> </td> </tr> <#assign index=index+1 /> </#list> if, else, elseif 语法: <#if condition> ... <#elseif condition2> ... <#elseif condition3> ... ... <#else> ... </#if> 备注:condition、condition2···必须为boolean 类型,<#elseif ··>、<#else>可有0或多个。 实例: <#if x == 1> x is 1 <#elseif x == 2> x is 2 <#elseif x == 3> x is 3 <#elseif x > 4> x is 4 <#else> x is not 1 nor 2 nor 3 nor 4 </#if> 备注:< 或 > 号 必须转义,否则出错。。转义请参考其他文档。 switch, case, default, break 语法 <#switch value> <#case refValue1> ... <#break> <#case refValue2> ... <#break> ... <#case refValueN> ... <#break> <#default> ... </#switch> 备注:该指令官方不推荐使用了,可以用if, else, elseif 指令代替。 list, break 语法 <#list sequence as item> ... </#list> 备注: sequence 为一个sequence 或者 collection 类型。item 为 循环的变量。该指令中包含有两个特殊的循环变量, item_index:该值为当前循环的值。 item_has_next:该值为一个boolean类型,表明该循环是否含有下一个(是否为循环到了最后一个) 实例: <#assign seq = ["winter", "spring", "summer", "autumn"]> <#list seq as x> ${x_index + 1}. ${x}<#if x_has_next>,</#if> </#list> 输出: 1. winter, 2. spring, 3. summer, 4. autumn 实例: <#assign x=3> <#list 1..x as i> ${i} </#list> 备注:当x 为一个数值序列时,可以使用该list 列出两个数值之间的值。(适合于表格的序号填写) 实例: <#list seq as x> ${x} <#if x = "spring"><#break></#if> </#list> 备注:可以用<#if···><#break> 来终止该循环。 freemarker常见语法大全 FreeMarker的插值有如下两种类型:1,通用插值${expr};2,数字格式化插值:#{expr}或#{expr;format} ${book.name?if_exists } //用于判断如果存在,就输出这个值 ${book.name?default(‘xxx’)}//默认值xxx ${book.name!"xxx"}//默认值xxx ${book.date?string('yyyy-MM-dd')} //日期格式 ${book?string.number} 20 //三种不同的数字格式 ${book?string.currency}--<#-- $20.00 --> ${book?string.percent}—<#-- 20% --> <#assign foo=ture /> //声明变量,插入布尔值进行显示 ${foo?string("yes","no")} <#-- yes --> <等大小比较符号使用需要注意:(xml的原因),可以用于比较数字和日期 使用lt、lte、gt和gte来替代<、<=、>和>= 也可以使用括号<#if (x>y)> 内置函数: 调用区别于属性的访问,使用?代替. 常见的一些内置函数 对于字符串 html-对字符串进行HTML编码 cap_first-使字符串第一个字母大写 lower_case-将字符串转换成小写 trim-去掉字符串前后的空白字符 对于Sequences(序列) size-获得序列中元素的数目 对于数字 int-取得数字整数部分(如-1.9?int的结果是-1) 对于集合,可以使用数组的方式,使用下标索引进行访问 逻辑判断: if................ <#if condition>... <#elseif condition2>... <#elseif condition3>...... <#else>... Boolean类型的空值判断 空值判断可以写成<#if book.name?? > //注意${}为变量的渲染显示,而<>为定义等操作符的定义 switch............ <#switch value> <#case refValue1> ... <#break> <#case refValue2> ... <#break> ... <#case refValueN> ... <#break> <#default> ... </#switch> 快速定义int区间的集合 <#assign l=0..100/> //注意不需要[] 3:循环读取集合: 注意/的使用 <#list student as stu> ${stu}<br/> </#list> 与jstl循环类似,也可以访问循环的状态 item_index:当前变量的索引值 item_has_next:是否存在下一个对象 其中item名称为as后的变量名,如stu 集合长度判断 <#if student?size != 0></#if> 判断=的时候,注意只要一个=符号,而不是== 宏/模板 初步了解: 使用更像一个闭包closure,可以定义后,在脚本中任意地方引用,并原地起作用 <#macro greet> <font size="+2">Hello Joe!</font> </#macro> 使用的方式为: <@greet></@greet> //同xml可以简写成<@greet/> 宏的参数定义,类似js,在宏名后 带参数进行传递定义 <#macro greet person color> ${person} </#macro> 调用带参数时,注意使用类似XML的属性格式进行传递,不需要关心顺序问题 <@greet person="Fred" color="black"/> 参数默认值定义,如果没有,就必须要求传递完整的参数列表 <#macro greet person color="black"> <font size="+2" color="${color}">Hello ${person}!</font> </#macro> 使用xml的嵌套内容进行传递宏调用,关键标签 <#nested> <#macro border> <table border=4 cellspacing=0 cellpadding=4><tr><td> <#nested> </tr></td></table> </#macro> 调用时: <@border>The bordered text</@border> <#nested> 标签可以在宏中多次调用,也可以将多个宏组合进行嵌套 for循环的精简版: <#list 1..count as x> </#list> 宏的循环变量,配合嵌套标签进行参数传递, <#macro repeat count> <#list 1..count as x> <#nested x, x/2, x==count> //这里的三个参数,将会传递到嵌套内容中 </#list> </#macro> <@repeat count=4 ; c, halfc, last> ${c}. ${halfc}<#if last> Last!</#if> //这里的内容由macro中的<#nested>进行参数的传递,传递的数量任意,当注意需要宏接受这些 </@repeat> 上述还需要注意;的使用 参数的数量是可变的,并不要求全部都有,但是效果不同 在模板中定义变量 在模板中定义的变量有三种类型: plain变量:可以在模板的任何地方访问,包括使用include指令插入的模板,使用assign指令创建和替换。 局部变量:在宏定义体中有效,使用local指令创建和替换。 循环变量:只能存在于指令的嵌套内容,由指令(如list)自动创建;宏的参数是局部变量,而不是循环变量 <#assign x = "plain"> //全局的plain变量 内部循环变量将会隐藏同名的外部循环变量 外部导入的使用,可以用于模块化,并且提供公用性 如:lib/my_lib.ftl文件 <#macro copyright date> <p>Copyright (C) ${date} Julia Smith. All rights reserved. <br>Email: ${mail}</p> </#macro> <#assign mail = "[email protected]"> lib/my_inc.ftl文件 <#import "/lib/my_test.ftl" as my> <#assign mail="[email protected]"> <@my.copyright date="1999-2002"/> ${my.mail} ${mail} 输出结果将不会出现冲突 对于库中的变量修改,使用in关键字 <#assign mail="[email protected]" in my> 函数定义:区别于宏对象,带返回值 <#function name param1 param2><#return val></#function>函数,有返回参数 stringA[M .. N] 取子字符串,类似substring(stringA, M, N) <#include "/copyright_footer.html"> 导入其他页面元素 <#include filename options> options包含两个属性 encoding=”GBK” 编码格式 parse=true 是否作为ftl语法解析,默认是true,false就是以文本方式引入.注意在ftl文件里布尔值都是直接赋值的如parse=true,而不是 parse=”true” hash与list的定义 <#assign c= {"a":"orz","b":"czs"}> ${c.a} List片段可以采用: products[10..19] or products[5..] 的格式进行定义,当只局限于数字 <#assign c= [1,2,3,4,5,6,6,7]> <#list c[1..3] as v> ${v} </#list> 对变量的缺省处理 product.color!"red" 用compress directive或者transform来处理输出。 <#compress>...</#compress>:消除空白行。 <@compress single_line=true>...</@compress>将输出压缩为一行。都需要包裹所需文档 freemarker可用"["代替"<".在模板的文件开头加上[#ftl]. 数字输出的另外一种方式 #{c.a;m0} 区别于${},这个例子是用于输出数字的格式化,保留小数的位数,详细如下 数字格式化插值可采用#{expr;format}形式来格式化数字,其中format可以是: mX:小数部分最小X位 MX:小数部分最大X位 在定义字符串的时候,可以使用''或者"",对特殊字符,需要使用\进行转义 如果存在大量特殊字符,可以使用${r"..."}进行过滤 ${r"${foo}"} ${r"C:\foo\bar"} Map对象的key和value都是表达式,但是key必须是字符串 可以混合使用.和[""]访问 book.author["name"] //混合使用点语法和方括号语法 为了处理缺失变量,FreeMarker提供了两个运算符: 用于防止对象不存在而导致的异常 !:指定缺失变量的默认值 ??:判断某个变量是否存在,返回boolean值 noparse指令指定FreeMarker不处理该指定里包含的内容,该指令的语法格式如下: <#noparse>...</#noparse> ${firstName?html} 使用html对字符进行格式化处理,对于<等的过滤 escape , noescape指令,对body内的内容实用统一的表达式 看如下的代码: <#escape x as x?html> First name:${firstName} Last name:${lastName} Maiden name:${maidenName} </#escape> 上面的代码等同于: First name:${firstName?html} Last name:${lastName?html} Maiden name:${maidenName?html} 定义全局变量的方式 <#assign name1=value1 name2=value2 / > // 可以同时定义多个变量,也可以使用循环来给变量赋值 <#assign x> <#list ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"] as n> ${n} </#list> </#assign> ${x} setting指令,用于动态设置freeMarker的运行环境: 该指令用于设置FreeMarker的运行环境,该指令的语法格式如下:<#setting name=value>,在这个格式中,name的取值范围包含如下几个: locale:该选项指定该模板所用的国家/语言选项 number_format:指定格式化输出数字的格式 boolean_format:指定两个布尔值的语法格式,默认值是true,false date_format,time_format,datetime_format:指定格式化输出日期的格式 time_zone:设置格式化输出日期时
任务九:使用集合的方法(ArryList集合对类对象Member和Goods类) 完成淘宝shopping”购物管理系统购物结算模块和客户管理模块 1.需要完成的任务 开发“淘宝Shopping购物管理系统”: (1)实现系统数据传递 (2)实现自动计算会员折扣 (3)完善购物结算程序 (4)实现从购物结算程序返回上一级主菜单 2.技能训练 (1)会使用String的相关方法 (2)会使用带参数的方法 3.实践 实践1:实现系统数据传递 需求说明: 实现数据传递,如图 (1)系统开始时加载系统数据:会员信息、商品信息和管理员信息 (2)在系统运行中,数据在不同界面间进行传递,但始终保持对同一个数组进行操作 实现思路及关键代码 (1)在前面已实现的StartSMS.java的main()中添加代码加载系统数据。 Data data = new Data(); data.initial(); (2)在前面已实现的Menu类中编写带参的setData()方法,用于获取系统数据。 a)编写类成员变量,定义数组变量goodsName、goodsPrice、custNo、custBirth和custScore b)编写setData方法,用于接收传递的数据。 public void setData(String[] goodsName1, double[] goodsPrice1, int[] custNo1, String[] custBirth1, int[] custScore1) { //给成员变量赋初值 } (3)在main()方法中调用setData方法实现Menu对象的数据加载。 实践2:扩展购物结算程序,实现自动计算会员折扣 需求说明 扩展购物结算功能,实现自动计算会员折扣:已知会员号,根据会员号查找目前的积分,然后计算该会员所享受的会员折扣。 实现思路及关键代码 (1)在前面已实现的Pay.java中添加方法。 (2)添加代码实现数据加载(可以直接复制Menu类中用于加载系统数据的代码) (3)编写带参数的方法实现会员折扣计算(参照任务3中实现的CalcDiscount.java) publicdoublegetDiscount(intcurCustNo,int[] custNo,int[] custScore){ //根据会员号curCustNo查询对应的下标index //根据多重if结构判断折扣数 //使用return返回折扣值 } 实践3:扩展实践2,打印购物小票 需求说明 在实践2基础上扩展购物结束程序,实现输出如下所示的购物小票。 输出购物小票 实现思路及关键代码 (1)扩展calcPay()方法 (2)创建StringBuffer对象存储购物信息 StringBuffergoodsList = new StringBuffer(); (3)调用StringBuffer对象的append方法追加购物信息 goodsList.append(name + "\t" + "¥" + price + "\t\t" + count + "\t\t" + "¥" + (price * count) + "\t\n"); (4)测试购物结算模块:Menu类中的showMainMenu()方法中添加测试代码: Pay pay = newPay(); //创建Pay实例 pay.setData(goodsName,goodsPrice,custNo,custBirth,custScore);//数据加载 pay.calcPay();//执行购物结算 实践4:执行购物结算后返回上一级菜单 需求说明 (1)添加Pay类的另一个方法returnLastMenu(),功能是在完成购物结算后,按数字0返回上一级菜单,部分代码如下,将其完善。 publicvoidreturnLastMenu() { System.out.print("\n\n请输入数字0返回上一级菜单:"); Scanner input = new Scanner(System.in); boolean con; do { con = true; if (input.next().equals("0")) { // 添加代码1:创建菜单类 // 添加代码2:调用方法加载系统数据 // 添加代码3:调用显示系统主菜单的方法 } else { System.out.print("输入错误, 请重新输入数字0返回上一级菜单:"); con = false; } } while (!con);
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果没有指定context参数,$()将在当前的 HTML 文档中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。 参考 Selectors 获取更多用于 expression 参数的 CSS 语法的信息。 -------------------------------------------------------------------------------- This function accepts a string containing a CSS selector which is then used to match a set of elements. The core functionality of jQuery centers around this function. Everything in jQuery is based upon this, or uses this in some way. The most basic use of this function is to pass in an expression (usually consisting of CSS), which then finds all matching elements. By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document. If you do specify a context, such as a DOM element or jQuery object, the expression will be matched against the contents of that context. See Selectors for the allowed CSS syntax for expressions. 返回值 jQuery 参数 expression (String) : 用来查找的字符串 context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。 示例 找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。 HTML 代码: <p>one</p> <div><p>two</p></div> <p>three</p> jQuery 代码: $("div > p"); 结果: [ <p>two</p> ] -------------------------------------------------------------------------------- 在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 jQuery 代码: $("input:radio", document.forms[0]); -------------------------------------------------------------------------------- 在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。 jQuery 代码: $("div", xml.responseXML); jQuery(html)jQuery(html) 根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。 你可以传递一个手写的 HTML 字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制,可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址),还有反斜杠。当你创建单个元素时,请使用闭合标签或 XHTML 格式。例如,创建一个 span ,可以用 $("<span/>") 或 $("<span></span>") ,但不推荐 $("<span>") -------------------------------------------------------------------------------- Create DOM elements on-the-fly from the provided String of raw HTML. You can pass in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $("<span/>") or $("<span></span>") instead of without the closing slash/tag. 返回值 jQuery 参数 html (String) : 用于动态创建DOM元素的HTML标记字符串 示例 动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性设置为给定的标记字符串,来实现标记到 DOM 元素转换的。所以,这个函数既有灵活性,也有局限性。 jQuery 代码: $("<div><p>Hello</p></div>").appendTo("body"); -------------------------------------------------------------------------------- 创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。 jQuery 代码: // 在 IE 中无效: $("<input>").attr("type", "checkbox"); // 在 IE 中有效: $("<input type='checkbox'>"); jQuery(elements)jQuery(elements) 将一个或多个DOM元素转化为jQuery对象。 这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。 -------------------------------------------------------------------------------- Wrap jQuery functionality around a single or multiple DOM Element(s). This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements). 返回值 jQuery 参数 elements (Element, Array<Element>) : 用于封装成jQuery对象的DOM元素 示例 设置页面背景色。 jQuery 代码: $(document.body).css( "background", "black" ); -------------------------------------------------------------------------------- 隐藏一个表单中所有元素。 jQuery 代码: $(myForm.elements).hide() jQuery(callback)jQuery(callback) $(document).ready()的简写。 允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多。 你可以在一个页面中使用任意多个$(document).ready事件。 参考 ready(Function) 获取更多 ready 事件的信息。 -------------------------------------------------------------------------------- A shorthand for $(document).ready(). Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it. You can have as many $(document).ready events on your page as you like. See ready(Function) for details about the ready event. 返回值 jQuery 参数 callback (Function) : 当DOM加载完成后要执行的函数 示例 当DOM加载完成后,执行其中的函数。 jQuery 代码: $(function(){ // Document is ready }); -------------------------------------------------------------------------------- Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias. jQuery 代码: jQuery(function($) { // Your code using failsafe $ alias here... }); jQuery 对象访问 each(callback)each(callback) 以每一个匹配的元素作为上下文来执行一个函数。 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。 而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。 -------------------------------------------------------------------------------- Execute a function within the context of every matched element. This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element. Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index). Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop). 返回值 jQuery 参数 callback (Function) : 对于每个匹配的元素所要执行的函数 示例 迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: <img/><img/> jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果: [ <img src="test0.jpg" />, <img src="test1.jpg" /> ] -------------------------------------------------------------------------------- 如果你想得到 jQuery对象,可以使用 $(this) 函数。 jQuery 代码: $("img").each(function(){ $(this).toggleClass("example"); }); -------------------------------------------------------------------------------- 你可以使用 'return' 来提前跳出 each() 循环。 HTML 代码: <button>Change colors</button> <span></span> <div></div> <div></div> <div></div> <div></div> <div id="stop">Stop here</div> <div></div> <div></div> <div></div> jQuery 代码: $("button").click(function () { $("div").each(function (index, domEle) { // domEle == this $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } }); });size()size() jQuery 对象中元素的个数。 这个函数的返回值与 jQuery 对象的'length' 属性一致。 -------------------------------------------------------------------------------- The number of elements in the jQuery object. This returns the same number as the 'length' property of the jQuery object. 返回值 Number 示例 计算文档中所有图片数量 HTML 代码: <img src="test1.jpg"/> <img src="test2.jpg"/> jQuery 代码: $("img").size(); 结果: 2 lengthlength jQuery 对象中元素的个数。 当前匹配的元素个数。 size 将返回相同的值。 -------------------------------------------------------------------------------- The number of elements in the jQuery object. The number of elements currently matched. The size function will return the same value. 返回值 Number 示例 计算文档中所有图片数量 HTML 代码: <img src="test1.jpg"/> <img src="test2.jpg"/> jQuery 代码: $("img").length; 结果: 2 get()get() 取得所有匹配的 DOM 元素集合。 这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。 如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。 -------------------------------------------------------------------------------- Access all matched DOM elements. This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions. 返回值 Array<Element> 示例 选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。 HTML 代码: <img src="test1.jpg"/> <img src="test2.jpg"/> jQuery 代码: $("img").get().reverse(); 结果: [ <img src="test2.jpg"/> <img src="test1.jpg"/> ] get(index)get(index) 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。 这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。 -------------------------------------------------------------------------------- Access a single matched DOM element at a specified index in the matched set. This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery object itself like $(this)[0]. 返回值 Element 参数 index (Number) :取得第 index 个位置上的元素 示例 HTML 代码: <img src="test1.jpg"/> <img src="test2.jpg"/> jQuery 代码: $("img").get(0); 结果: [ <img src="test1.jpg"/> ] index(subject)index(subject) 搜索与参数表示的对象匹配的元素,并返回相应元素的索引值值。 如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。 -------------------------------------------------------------------------------- Searches every matched element for the object and returns the index of the element, if found, starting with zero. Returns -1 if the object wasn't found. 返回值 Number 参数 subject (Element) : 要搜索的对象 示例 返回ID值为foobar的元素的索引值值。 HTML 代码: <div id="foobar"><b></b><span id="foo"></span></div> jQuery 代码: $("*").index($('#foobar')[0]) 结果: 5 插件机制 jQuery.fn.extend(object)jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。 查看这里Plugins/Authoring可以获取更多信息。 -------------------------------------------------------------------------------- Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin). Can be used to add functions into the to add plugin methods (plugins). 返回值 jQuery 参数 object (Object) :用来扩充 jQuery 对象。 示例 增加两个插件方法。 jQuery 代码: jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); 结果: $("input[@type=checkbox]").check(); $("input[@type=radio]").uncheck(); jQuery.extend(object)jQuery.extend(object) 扩展jQuery对象本身。 用来在jQuery命名空间上增加新函数。 查看 'jQuery.fn.extend' 获取更多添加插件的信息。 -------------------------------------------------------------------------------- Extends the jQuery object itself. Can be used to add functions into the jQuery namespace. See 'jQuery.fn.extend' for more information on using this method to add Plugins. 返回值 jQuery 参数 object (Object) : 用以扩展 jQuery 对象 示例 在jQuery命名空间上增加两个函数。 jQuery 代码: jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); 结果: jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5 多库共存 jQuery.noConflict()jQuery.noConflict() 运行这个函数将变量$的控制权让渡给第一个实现它的那个库。 这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。 -------------------------------------------------------------------------------- Run this function to give control of the $ variable back to whichever library first implemented it. This helps to make sure that jQuery doesn't conflict with the $ object of other libraries. By using this function, you will only be able to access jQuery using the 'jQuery' variable. For example, where you used to do $("div p"), you now must do jQuery("div p"). 返回值 jQuery 示例 将$引用的对象映射回原始的对象。 jQuery 代码: jQuery.noConflict(); // 使用 jQuery jQuery("div p").hide(); // 使用其他库的 $() $("content").style.display = 'none'; -------------------------------------------------------------------------------- 恢复使用别名$,然后创建并执行一个函数,在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中,原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。 jQuery 代码: jQuery.noConflict(); (function($) { $(function() { // 使用 $ 作为 jQuery 别名的代码 }); })(jQuery); // 其他用 $ 作为别名的库的代码 -------------------------------------------------------------------------------- 创建一个新的别名用以在接下来的库中使用jQuery对象。 jQuery 代码: var j = jQuery.noConflict(); // 基于 jQuery 的代码 j("div p").hide(); // 基于其他库的 $() 代码 $("content").style.display = 'none'; jQuery.noConflict(extreme)jQuery.noConflict(extreme) 将$和jQuery的控制权都交还给原来的库。用之前请考虑清楚! 这是相对于简单的 noConflict 方法更极端的版本,因为这将完全重新定义jQuery。这通常用于一种极端的情况,比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。 -------------------------------------------------------------------------------- Revert control of both the $ and jQuery variables to their original owners. Use with discretion. This is a more-extreme version of the simple noConflict method, as this one will completely undo what jQuery has introduced. This is to be used in an extreme case where you'd like to embed jQuery into a high-conflict environment. NOTE: It's very likely that plugins won't work after this particular method has been called. 返回值 jQuery 参数 extreme (Boolean) : 传入 true 来允许彻底将jQuery变量还原 示例 完全将 jQuery 移到一个新的命名空间。 jQuery 代码: var dom = {}; dom.query = jQuery.noConflict(true); 结果: // 新 jQuery 的代码 dom.query("div p").hide(); // 另一个库 $() 的代码 $("content").style.display = 'none'; // 另一个版本 jQuery 的代码 jQuery("div > p").hide(); 选择器基本 #id#id 根据给定的ID匹配一个元素。 -------------------------------------------------------------------------------- Matches a single element with the given id attribute. 返回值 Element 参数 id (String) : 用于搜索的,通过元素的 id 属性中给定的值 示例 查找 ID 为"myDiv"的元素。 HTML 代码: <div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div> jQuery 代码: $("#myDiv"); 结果: [ <div id="myDiv">id="myDiv"</div> ] elementelement 根据给定的元素名匹配所有元素 -------------------------------------------------------------------------------- Matches all elements with the given name. 返回值 Array<Element> 参数 element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。 示例 查找一个 DIV 元素。 HTML 代码: <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> jQuery 代码: $("div"); 结果: [ <div>DIV1</div>, <div>DIV2</div> ] .class.class 根据给定的类匹配元素。 -------------------------------------------------------------------------------- Matches all elements with the given class. 返回值 Array<Element> 参数 class (String) : 一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。 示例 查找所有类是 "myClass" 的元素. HTML 代码: <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> jQuery 代码: $(".myClass"); 结果: [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ] ** 匹配所有元素 多用于结合上下文来搜索。 -------------------------------------------------------------------------------- Matches all elements. Most useful when combined with a context to search in. 返回值 Array<Element> 示例 找到每一个元素 HTML 代码: <div>DIV</div> <span>SPAN</span> <p>P</p> jQuery 代码: $("*") 结果: [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ] selector1,selector2,selectorNselector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。 你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。 -------------------------------------------------------------------------------- Matches the combined results of all the specified selectors. You can specify any number of selectors to combine into a single result. 返回值 Array<Element> 参数 selector1 (Selector) : 一个有效的选择器 selector2 (Selector) : 另一个有效的选择器 selectorN (Selector) : (可选) 任意多个有效选择器 示例 找到匹配任意一个类的元素。 HTML 代码: <div>div</div> <p class="myClass">p class="myClass"</p> <span>span</span> <p class="notMyClass">p class="notMyClass"</p> jQuery 代码: $("div,span,p.myClass") 结果: [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ] 层级 ancestor descendantancestor descendant 在给定的祖先元素下匹配所有的后代元素 -------------------------------------------------------------------------------- Matches all descendant elements specified by descendant of elements specified by ancestor. 返回值 Array<Element> 参数 ancestor (Selector) : 任何有效选择器 descendant (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的后代元素 示例 找到表单中所有的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form input") 结果: [ <input name="name" />, <input name="newsletter" /> ] parent > childparent > child 在给定的父元素下匹配所有的子元素 -------------------------------------------------------------------------------- Matches all child elements specified by child of elements specified by parent. 返回值 Array<Element> 参数 parent (Selector) : 任何有效选择器 child (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的子元素 示例 匹配表单中所有的子级input元素。 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form > input") 结果: [ <input name="name" /> ] prev + nextprev + next 匹配所有紧接在 prev 元素后的 next 元素 -------------------------------------------------------------------------------- Matches all next elements specified by next that are next to elements specified by prev. 返回值 Array<Element> 参数 prev (Selector) : 任何有效选择器 next (Selector) :一个有效选择器并且紧接着第一个选择器 示例 匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("label + input") 结果: [ <input name="name" />, <input name="newsletter" /> ] prev ~ siblingsprev ~ siblings 匹配 prev 元素之后的所有 siblings 元素 -------------------------------------------------------------------------------- Matches all sibling elements after the "prev" element that match the filtering "siblings" selector. 返回值 Array<Element> 参数 prev (Selector) : 任何有效选择器 siblings (Selector) : 一个选择器,并且它作为第一个选择器的同辈 示例 找到所有与表单同辈的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form ~ input") 结果: [ <input name="none" /> ] 简单 :first:first 匹配找到的第一个元素 -------------------------------------------------------------------------------- Matches the first selected element. 返回值 Element 示例 查找表格的第一行 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:first") 结果: [ <tr><td>Header 1</td></tr> ] :last:last 匹配找到的最后一个元素 -------------------------------------------------------------------------------- Matches the last selected element. 返回值 Element 示例 查找表格的最后一行 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:last") 结果: [ <tr><td>Value 2</td></tr> ] :not(selector):not(selector) 去除所有与给定选择器匹配的元素 -------------------------------------------------------------------------------- Removes all elements matching the given selector. 返回值 Array<Element> 参数 selector (Selector) : 用于筛选的选择器 示例 查找所有未选中的 input 元素 HTML 代码: <input name="apple" /> <input name="flower" checked="checked" /> jQuery 代码: $("input:not(:checked)") 结果: [ <input name="apple" /> ] :even:even 匹配所有索引值为偶数的元素,从 0 开始计数 -------------------------------------------------------------------------------- Matches even elements, zero-indexed. 返回值 Array<Element> 示例 查找表格的1、3、5...行(即索引值0、2、4...) HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:even") 结果: [ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ] :odd:odd 匹配所有索引值为奇数的元素,从 0 开始计数 -------------------------------------------------------------------------------- Matches odd elements, zero-indexed. 返回值 Array<Element> 示例 查找表格的2、4、6行(即索引值1、3、5...) HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:odd") 结果: [ <tr><td>Value 1</td></tr> ] :eq(index):eq(index) 匹配一个给定索引值的元素 -------------------------------------------------------------------------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 示例 查找第二行 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:eq(1)") 结果: [ <tr><td>Value 1</td></tr> ] :gt(index):gt(index) 匹配所有大于给定索引值的元素 -------------------------------------------------------------------------------- Matches all elements with an index above the given one. 返回值 Array<Element> 参数 index (Number) : 从 0 开始计数 示例 查找第二第三行,即索引值是1和2,也就是比0大 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:gt(0)") 结果: [ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ] :lt(index):lt(index) 匹配所有小于给定索引值的元素 -------------------------------------------------------------------------------- Matches all elements with an index below the given one. 返回值 Array<Element> 参数 index (Number) : 从 0 开始计数 示例 查找第一第二行,即索引值是0和1,也就是比2小 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:lt(2)") 结果: [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ] :header:header 匹配如 h1, h2, h3之类的标题元素 -------------------------------------------------------------------------------- Matches all elements that are headers, like h1, h2, h3 and so on. 返回值 Array<Element> 示例 给页面内所有标题加上背景色 HTML 代码: <h1>Header 1</h1> <p>Contents 1</p> <h2>Header 2</h2> <p>Contents 2</p> jQuery 代码: $(":header").css("background", "#EEE"); 结果: [ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ] :animated:animated 匹配所有没有在执行动画效果中的元素 -------------------------------------------------------------------------------- Matches all elements that are currently being animated. 返回值 Array<Element> 示例 只有对不在执行动画效果的元素执行一个动画特效 HTML 代码: <button id="run">Run</button><div></div> jQuery 代码: $("#run").click(function(){ $("div:not(:animated)").animate({ left: "+20" }, 1000); }); 内容 :contains(text):contains(text) 匹配包含给定文本的元素 -------------------------------------------------------------------------------- Matches elements which contain the given text. 返回值 Array<Element> 参数 text (String) : 一个用以查找的字符串 示例 查找所有包含 "John" 的 div 元素 HTML 代码: <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn jQuery 代码: $("div:contains('John')") 结果: [ <div>John Resig</div>, <div>Malcom John Sinclair</div> ] :empty:empty 匹配所有不包含子元素或者文本的空元素 -------------------------------------------------------------------------------- Matches all elements that are empty, be it elements or text. 返回值 Array<Element> 示例 查找所有不包含子元素或者文本的空元素 HTML 代码: <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> jQuery 代码: $("td:empty") 结果: [ <td></td>, <td></td> ] :has(selector):has(selector) 匹配含有选择器所匹配的元素的元素 -------------------------------------------------------------------------------- Matches elements which contain at least one element that matches the specified selector. 返回值 Array<Element> 参数 selector (Selector) : 一个用于筛选的选择器 示例 给所有包含 p 元素的 div 元素添加一个 text 类 HTML 代码: <div><p>Hello</p></div> <div>Hello again!</div> jQuery 代码: $("div:has(p)").addClass("test"); 结果: [ <div class="test"><p>Hello</p></div> ] :parent:parent 匹配含有子元素或者文本的元素 -------------------------------------------------------------------------------- Matches all elements that are parents - they have child elements, including text. 返回值 Array<Element> 示例 查找所有含有子元素或者文本的 td 元素 HTML 代码: <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> jQuery 代码: $("td:parent") 结果: [ <td>Value 1</td>, <td>Value 1</td> ] 可见性 :hidden:hidden 匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到 -------------------------------------------------------------------------------- Matches all elements that are hidden, or input elements of type "hidden". 返回值 Array<Element> 示例 查找所有不可见的 tr 元素 HTML 代码: <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:hidden") 结果: [ <tr style="display:none"><td>Value 1</td></tr> ] :visible:visible 匹配所有的可见元素 -------------------------------------------------------------------------------- Matches all elements that are visible. 返回值 Array<Element> 示例 查找所有可见的 tr 元素 HTML 代码: <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:visible") 结果: [ <tr><td>Value 2</td></tr> ] 属性 [attribute][attribute] 匹配包含给定属性的元素 -------------------------------------------------------------------------------- Matches elements that have the specified attribute. 返回值 Array<Element> 参数 attribute (String) : 属性名 示例 查找所有含有 id 属性的 div 元素 HTML 代码: <div> <p>Hello!</p> </div> <div id="test2"></div> jQuery 代码: $("div[id]") 结果: [ <div id="test2"></div> ] [attribute=value][attribute=value] 匹配给定的属性是某个特定值的元素 -------------------------------------------------------------------------------- Matches elements that have the specified attribute with a certain value. 返回值 Array<Element> 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 属性是 newsletter 的 input 元素 HTML 代码: '<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> jQuery 代码: $("input[name='newsletter']").attr("checked", true); 结果: [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ] [attribute!=value][attribute!=value] 匹配给定的属性是不包含某个特定值的元素 -------------------------------------------------------------------------------- Matches elements that don't have the specified attribute with a certain value. 返回值 Array<Element> 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 属性不是 newsletter 的 input 元素 HTML 代码: '<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> jQuery 代码: $("input[name!='newsletter']").attr("checked", true); 结果: [ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ] [attribute^=value][attribute^=value] 匹配给定的属性是以某些值开始的元素 -------------------------------------------------------------------------------- Matches elements that have the specified attribute and it starts with a certain value. 返回值 Array<Element> 参数 attribute (String) : 属性名 value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 以 'news' 开始的 input 元素 HTML 代码: <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> jQuery 代码: $("input[name^='news']") 结果: [ <input name="newsletter" />, <input name="newsboy" /> ] [attribute$=value][attribute$=value] 匹配给定的属性是以某些值结尾的元素 -------------------------------------------------------------------------------- Matches elements that have the specified attribute and it ends with a certain value. 返回值 Array<Element> 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 以 'letter' 结尾的 input 元素 HTML 代码: <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> jQuery 代码: $("input[name$='letter']") 结果: [ <input name="newsletter" />, <input name="jobletter" /> ] [attribute*=value][attribute*=value] 匹配给定的属性是以包含某些值的元素 -------------------------------------------------------------------------------- Matches elements that have the specified attribute and it contains a certain value. 返回值 Array<Element> 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 包含 'man' 的 input 元素 HTML 代码: <input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> jQuery 代码: $("input[name*='man']") 结果: [ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ] [selector1][selector2][selectorN][selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用。 -------------------------------------------------------------------------------- Matches elements that have the specified attribute and it contains a certain value. 返回值 Array<Element> 参数 selector1 (Selector) : 属性选择器 selector2 (Selector) : 另一个属性选择器,用以进一步缩小范围 selectorN (Selector) : 任意多个属性选择器 示例 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的 HTML 代码: <input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /> jQuery 代码: $("input[id][name$='man']") 结果: [ <input id="letterman" name="new-letterman" /> ] 子元素 :nth-child(index/even/odd/equation):nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的! 可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2) -------------------------------------------------------------------------------- Matches the nth-child of its parent. While ':eq(index)' matches only a single element, this matches more then one: One for each parent. The specified index is one-indexed, in contrast to :eq() which starst at zero. 返回值 Array<Element> 参数 index (Number) : 要匹配元素的序号,从1开始 示例 在每个 ul 查找第 2 个li HTML 代码: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> jQuery 代码: $("ul li:nth-child(2)") 结果: [ <li>Karl</li>, <li>Tane</li> ] :first-child:first-child 匹配第一个子元素 ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 -------------------------------------------------------------------------------- Matches the first child of its parent. While ':first' matches only a single element, this matches more then one: One for each parent. 返回值 Array<Element> 示例 在每个 ul 中查找第一个 li HTML 代码: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> jQuery 代码: $("ul li:first-child") 结果: [ <li>John</li>, <li>Glen</li> ] :last-child:last-child 匹配最后一个子元素 ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 -------------------------------------------------------------------------------- Matches the last child of its parent. While ':last' matches only a single element, this matches more then one: One for each parent. 返回值 Array<Element> 示例 在每个 ul 中查找最后一个 li HTML 代码: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> jQuery 代码: $("ul li:last-child") 结果: [ <li>Brandon</li>, <li>Ralph</li> ] :only-child:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配 如果父元素中含有其他元素,那将不会被匹配。 -------------------------------------------------------------------------------- Matches the only child of its parent. If the parent has other child elements, nothing is matched. 返回值 Array<Element> 示例 在 ul 中查找是唯一子元素的 li HTML 代码: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> jQuery 代码: $("ul li:only-child") 结果: [ <li>Glen</li> ] 表单 :input:input 匹配所有 input, textarea, select 和 button 元素 -------------------------------------------------------------------------------- Matches all input, textarea, select and button elements. 返回值 Array<Element> 示例 查找所有的input元素 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":input") 结果: [ <input type="text" />, <input type="checkbox" />, <input type="radio" />, <input type="image" />, <input type="file" />, <input type="submit" />, <input type="reset" />, <input type="password" />, <input type="button" /> ] :text:text 匹配所有的单行文本框 -------------------------------------------------------------------------------- Matches all input elements of type text. 返回值 Array<Element> 示例 查找所有文本框 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":text") 结果: [ <input type="text" /> ] :password:password 匹配所有密码框 -------------------------------------------------------------------------------- Matches all input elements of type password. 返回值 Array<Element> 示例 查找所有密码框 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":password") 结果: [ <input type="password" /> ] :radio:radio 匹配所有单选按钮 -------------------------------------------------------------------------------- Matches all input elements of type radio. 返回值 Array<Element> 示例 查找所有单选按钮 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":radio") 结果: [ <input type="radio" /> ] :checkbox:checkbox 匹配所有复选框 -------------------------------------------------------------------------------- Matches all input elements of type checkbox. 返回值 Array<Element> 示例 查找所有复选框 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":checkbox") 结果: [ <input type="checkbox" /> ] :submit:submit 匹配所有提交按钮 -------------------------------------------------------------------------------- Matches all input elements of type submit. 返回值 Array<Element> 示例 查找所有提交按钮 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":submit") 结果: [ <input type="submit" /> ] :image:image 匹配所有图像域 -------------------------------------------------------------------------------- Matches all input elements of type image. 返回值 Array<Element> 示例 匹配所有图像域 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":image") 结果: [ <input type="image" /> ] :reset:reset 匹配所有重置按钮 -------------------------------------------------------------------------------- Matches all input elements of type reset. 返回值 Array<Element> 示例 查找所有重置按钮 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":reset") 结果: [ <input type="reset" /> ] :button:button 匹配所有按钮 -------------------------------------------------------------------------------- Matches all input elements of type button. 返回值 Array<Element> 示例 查找所有按钮. HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":button") 结果: [ <input type="button" />,<button></button> ] :file:file 匹配所有文件域 -------------------------------------------------------------------------------- Matches all input elements of type file. 返回值 Array<Element> 示例 查找所有文件域 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":file") 结果: [ <input type="file" /> ] :hidden:hidden 匹配所有不可见元素,或者type为hidden的元素 -------------------------------------------------------------------------------- Matches all elements that are hidden, or input elements of type "hidden". 返回值 Array<Element> 示例 查找隐藏的 tr HTML 代码: <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:hidden") 结果: [ <tr style="display:none"><td>Value 1</td></tr> ] -------------------------------------------------------------------------------- 匹配type为hidden的元素 HTML 代码: <form> <input type="text" name="email" /> <input type="hidden" name="id" /> </form> jQuery 代码: $("input:hidden") 结果: [ <input type="hidden" name="id" /> ] 表单对象属性 :enabled:enabled 匹配所有可用元素 -------------------------------------------------------------------------------- Matches all elements that are enabled. 返回值 Array<Element> 示例 查找所有可用的input元素 HTML 代码: <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> jQuery 代码: $("input:enabled") 结果: [ <input name="id" /> ] :disabled:disabled 匹配所有不可用元素 -------------------------------------------------------------------------------- Matches all elements that are disabled. 返回值 Array<Element> 示例 查找所有不可用的input元素 HTML 代码: <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> jQuery 代码: $("input:disabled") 结果: [ <input name="email" disabled="disabled" /> ] :checked:checked 匹配所有选中的复选框元素 -------------------------------------------------------------------------------- Matches all elements that are checked. 返回值 Array<Element> 示例 查找所有选中的复选框元素 HTML 代码: <form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> </form> jQuery 代码: $("input:checked") 结果: [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ] :selected:selected 匹配所有选中的选项元素 -------------------------------------------------------------------------------- Matches all elements that are selected. 返回值 Array<Element> 示例 查找所有选中的选项元素 HTML 代码: <select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option> </select> jQuery 代码: $("select option:selected") 结果: [ <option value="2" selected="selected">Gardens</option> ] -------------------------------------------------------------------------------- Finds all option elements that are selected. HTML 代码: <select multiple="multiple"> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3" selected="selected">Trees</option> </select> jQuery 代码: $("select option:selected") 结果: [ <option value="2" selected="selected">Gardens</option>, <option value="3" selected="selected">Trees</option> ] 属性属性 attr(name)attr(name) 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。 -------------------------------------------------------------------------------- Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned. 返回值 Object 参数 name (String) : 属性名称 示例 返回文档中第一个图像的src属性值。 HTML 代码: <img src="test.jpg"/> jQuery 代码: $("img").attr("src"); 结果: test.jpg attr(properties)attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性。 这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ). -------------------------------------------------------------------------------- Set a key/value object as properties to all matched elements. This serves as the best way to set a large number of properties on all matched elements. Note that you must use 'className' as key if you want to set the class-Attribute. Or use .addClass( class ) or .removeClass( class ). 返回值 jQuery 参数 properties (Map) : 作为属性的“名/值对”对象 示例 为所有图像设置src和alt属性。 HTML 代码: <img/> jQuery 代码: $("img").attr({ src: "test.jpg", alt: "Test Image" }); 结果: [ <img src= "test.jpg" alt:="Test Image" /> ] -------------------------------------------------------------------------------- attr(key,value)attr(key,value) 为所有匹配的元素设置一个属性值。 -------------------------------------------------------------------------------- Set a single property to a value, on all matched elements. 返回值 jQuery 参数 key (String) : 属性名称 value (Object) : 属性值 示例 为所有图像设置src属性。 HTML 代码: <img/> <img/> jQuery 代码: $("img").attr("src","test.jpg"); 结果: [ <img src= "test.jpg" /> , <img src= "test.jpg" /> ] attr(key,fn)attr(key,fn) 为所有匹配的元素设置一个计算的属性值。 不提供值,而是提供一个函数,由这个函数计算的值作为属性值。 -------------------------------------------------------------------------------- Set a single property to a computed value, on all matched elements. Instead of supplying a string value as described 'above', a function is provided that computes the value. 返回值 jQuery 参数 key (String) : 属性名称 fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值 示例 把src属性的值设置为title属性的值。 HTML 代码: <img src="test.jpg"/> jQuery 代码: $("img").attr("title", function() { return this.src }); 结果: <img src="test.jpg" title="test.jpg" /> removeAttr(name)removeAttr(name) 从每一个匹配的元素中删除一个属性 -------------------------------------------------------------------------------- Remove an attribute from each of the matched elements. 返回值 jQuery 参数 name (String) : 要删除的属性名 示例 将文档中图像的src属性删除 HTML 代码: <img src="test.jpg"/> jQuery 代码: $("img").removeAttr("src"); 结果: [ <img /> ] 类 addClass(class)addClass(class) 为每个匹配的元素添加指定的类名。 -------------------------------------------------------------------------------- Adds the specified class(es) to each of the set of matched elements. 返回值 jQuery 参数 class (String) : 一个或多个要添加到元素中的CSS类名,请用空格分开 示例 为匹配的元素加上 'selected' 类 HTML 代码: <p>Hello</p> jQuery 代码: $("p").addClass("selected"); 结果: [ <p class="selected">Hello</p> ] -------------------------------------------------------------------------------- 为匹配的元素加上 selected highlight 类 HTML 代码: <p>Hello</p> jQuery 代码: $("p").addClass("selected highlight"); 结果: [ <p class="selected highlight">Hello</p> ] removeClass(class)removeClass(class) 从所有匹配的元素中删除全部或者指定的类。 -------------------------------------------------------------------------------- Removes all or the specified class(es) from the set of matched elements. 返回值 jQuery 参数 class (String) : (可选) 一个或多个要删除的CSS类名,请用空格分开 示例 从匹配的元素中删除 'selected' 类 HTML 代码: <p class="selected first">Hello</p> jQuery 代码: $("p").removeClass("selected"); 结果: [ <p>Hello</p> ] -------------------------------------------------------------------------------- 删除匹配元素的所有类 HTML 代码: <p class="selected first">Hello</p> jQuery 代码: $("p").removeClass(); 结果: [ <p>Hello</p> ] toggleClass(class)toggleClass(class) 如果存在(不存在)就删除(添加)一个类。 -------------------------------------------------------------------------------- Adds the specified class if it is not present, removes the specified class if it is present. 返回值 jQuery 参数 class (String) :CSS类名 示例 为匹配的元素切换 'selected' 类 HTML 代码: <p>Hello</p><p class="selected">Hello Again</p> jQuery 代码: $("p").toggleClass("selected"); 结果: [ <p class="selected">Hello</p>, <p>Hello Again</p> ] Html代码 html()html() 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 -------------------------------------------------------------------------------- Get the html contents of the first matched element. This property is not available on XML documents (although it will work for XHTML documents). 返回值 String 示例 HTML 代码: <div><p>Hello</p></div> jQuery 代码: $("div").html(); 结果: Hello html(val)html(val) 设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 -------------------------------------------------------------------------------- Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents). 返回值 jQuery 参数 val (String) : 用于设定HTML内容的值 示例 HTML 代码: <div></div> jQuery 代码: $("div").html("<p>Hello Again</p>"); 结果: [ <div><p>Hello Again</p></div> ] 文本 text()text() 取得所有匹配元素的内容。 结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。 -------------------------------------------------------------------------------- Get the text contents of all matched elements. The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents. 返回值 String 示例 HTML 代码: <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p> jQuery 代码: $("p").text(); 结果: Test Paragraph.Paraparagraph text(val)text(val) 设置所有匹配元素的文本内容 与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体). -------------------------------------------------------------------------------- Set the text contents of all matched elements. Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities). 返回值 jQuery 参数 val (String) : 用于设置元素内容的文本 示例 HTML 代码: <p>Test Paragraph.</p> jQuery 代码: $("p").text("<b>Some</b> new text."); 结果: [ <p><b>Some</b> new text.</p> ] 值 val()val() 获得第一个匹配元素的当前值。 在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。 -------------------------------------------------------------------------------- Get the content of the value attribute of the first matched element. In jQuery 1.2, a value is now returned for all elements, including selects. For multiple selects an array of values is returned. 返回值 String,Array 示例 获得单个select的值和多选select的值。 HTML 代码: <p></p><br/> <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> jQuery 代码: $("p").append( "<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", ") ); 结果: [ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>] -------------------------------------------------------------------------------- 获取文本框中的值 HTML 代码: <input type="text" value="some text"/> jQuery 代码: $("input").val(); 结果: some text val(val)val(val) 设置每一个匹配元素的值。 在 jQuery 1.2, 这也可以为select元件赋值 -------------------------------------------------------------------------------- Set the value attribute of every matched element. In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options. 返回值 jQuery 参数 val (String) : 要设置的值。 示例 设定文本框的值 HTML 代码: <input type="text"/> jQuery 代码: $("input").val("hello world!"); val(val)val(val) check,select,radio等都能使用为之赋值 返回值 jQuery 参数 val (Array<String>) : 用于 check/select 的值 示例 设定一个select和一个多选的select的值 HTML 代码: <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" value="check1"/> check1 <input type="checkbox" value="check2"/> check2 <input type="radio" value="radio1"/> radio1 <input type="radio" value="radio2"/> radio2 jQuery 代码: $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]); 筛选过滤 eq(index)eq(index) 获取第N个元素 这个元素的位置是从0算起。 -------------------------------------------------------------------------------- Reduce the set of matched elements to a single element. The position of the element in the set of matched elements starts at 0 and goes to length - 1. 返回值 jQuery 参数 index (Integer) :元素在jQuery对象中的索引 示例 获取匹配的第二个元素 HTML 代码: <p> This is just a test.</p> <p> So is this</p> jQuery 代码: $("p").eq(1) 结果: [ <p> So is this</p> ] hasClass(class)hasClass(class) 检查当前的元素是否含有某个特定的类,如果有,则返回true。 这其实就是 is("." + class)。 -------------------------------------------------------------------------------- Checks the current selection against a class and returns true, if at least one element of the selection has the given class. This is an alternative to is("." + class). 返回值 Boolean 参数 class (String) : 用于匹配的类名 示例 给包含有某个类的元素进行一个动画。 HTML 代码: <div class="protected"></div><div></div> jQuery 代码: $("div").click(function(){ if ( $(this).hasClass("protected") ) $(this) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: 0 }); }); filter(expr)filter(expr) 筛选出与指定表达式匹配的元素集合。 这个方法用于缩小匹配的范围。用逗号分隔多个表达式 -------------------------------------------------------------------------------- Removes all elements from the set of matched elements that do not match the specified expression(s). This method is used to narrow down the results of a search. Provide a comma-separated list of expressions to apply multiple filters at once. 返回值 jQuery 参数 expr (Expression) : 表达式 示例 保留带有select类的元素 HTML 代码: <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p> jQuery 代码: $("p").filter(".selected") 结果: [ <p class="selected">And Again</p> ] -------------------------------------------------------------------------------- 保留第一个以及带有select类的元素 HTML 代码: <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p> jQuery 代码: $("p").filter(".selected, :first") 结果: [ <p>Hello</p>, <p class="selected">And Again</p> ] filter(fn)filter(fn) 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除,否则就会保留。 -------------------------------------------------------------------------------- Removes all elements from the set of matched elements that does not match the specified function. The function is called with a context equal to the current element (just like '$.each'). If the function returns false, then the element is removed - anything else and the element is kept. 返回值 jQuery 参数 fn (Function) : 传递进filter的函数 示例 保留子元素中不含有ol的元素。 HTML 代码: <p><ol><li>Hello</li></ol></p><p>How are you?</p> jQuery 代码: $("p").filter(function(index) { return $("ol", this).length == 0; }); 结果: [ <p>How are you?</p> ] is(expr)is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。 如果没有元素符合,或者表达式无效,都返回'false'. 'filter' 内部实际也是在调用这个函数,所以,filter()函数原有的规则在这里也适用。 -------------------------------------------------------------------------------- Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression. If no element fits, or the expression is not valid, then the response will be 'false'. 'filter' is used internally, therefore all rules that apply there apply here, as well. 返回值 Boolean 参数 expr (String) :用于筛选的表达式 示例 由于input元素的父元素是一个表单元素,所以返回true。 HTML 代码: <form><input type="checkbox" /></form> jQuery 代码: $("input[type='checkbox']").parent().is("form") 结果: true map(callback)map(callback) 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。 -------------------------------------------------------------------------------- Translate a set of elements into another set of values (which may, or may not, be elements). You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations. This is provided as a convenience method for using '$.map()'. 返回值 jQuery 参数 callback (Function) : 给每个元素执行的函数 示例 把form中的每
正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界。 -或- 对正则表达式功能字符的还原,如"*"匹配它前面元字符0次或多次,/a*/将匹配a,aa,aaa,加了"\"后,/a\*/将只匹配"a*"。 ^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a" $ 匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A" * 匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa + 匹配前面元字符1次或多次,/ba*/将匹配ba,baa,baaa ? 匹配前面元字符0次或1次,/ba*/将匹配b,ba (x) 匹配x保存x在名为$1...$9的变量中 x|y 匹配x或y {n} 精确匹配n次 {n,} 匹配n次以上 {n,m} 匹配n-m次 [xyz] 字符集(character set),匹配这个集合中的任一一个字符(或元字符) [^xyz] 不匹配这个集合中的任何一个字符 [\b] 匹配一个退格符 \b 匹配一个单词的边界 \B 匹配一个单词的非边界 \cX 这儿,X是一个控制符,/\cM/匹配Ctrl-M \d 匹配一个字数字符,/\d/ = /[0-9]/ \D 匹配一个非字数字符,/\D/ = /[^0-9]/ \n 匹配一个换行符 \r 匹配一个回车符 \s 匹配一个空白字符,包括\n,\r,\f,\t,\v等 \S 匹配一个非空白字符,等于/[^\n\f\r\t\v]/ \t 匹配一个制表符 \v 匹配一个重直制表符 \w 匹配一个可以组成单词的字符(alphanumeric,这是我的意译,含数字),包括下划线,如[\w]匹配"$5.98"中的5,等于[a-zA-Z0-9] \W 匹配一个不可以组成单词的字符,如[\W]匹配"$5.98"中的$,等于[^a-zA-Z0-9]。 用re = new RegExp("pattern",["flags"]) 的方式比较好 pattern : 正则表达式 flags: g (全文查找出现的所有 pattern) i (忽略大小写) m (多行查找) vaScript动态正则表达式问题 请问正则表达式可以动态生成吗? 例如JavaScript中: var str = "strTemp"; 要生成: var re = /strTemp/; 如果是字符连接: var re = "/" + str + "/"即可 但是要生成表达式,可以实现吗?怎样实现? [JAVA] javascript 正则表达式 秋雨叶 发表于 2004-12-9 14:54:13 正则表达式是一个描述字符模式的对象。 JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法. 在JavaScript中,正则表达式是由一个RegExp对象表示的.当然,可以使用一个RegExp()构造函数来创建RegExp对象, 也可以用JavaScript 1.2中的新添加的一个特殊语法来创建RegExp对象.就像字符串直接量被定义为包含在引号内的字符一样, 正则表达式直接量也被定义为包含在一对斜杠(/)之间的字符.所以,JavaScript可能会包含如下的代码: var pattern = /s$/; 这行代码创建一个新的RegExp对象,并将它赋给变量parttern.这个特殊的RegExp对象和所有以字母"s"结尾的字符串都匹配.用RegExp()也可以定义 一个等价的正则表达式,代码如下: var pattern = new RegExp("s$"); 无论是用正则表达式直接量还是用构造函数RegExp(),创建一个RegExp对象都是比较容易的.较为困难的任务是用正则表达式语法来描述字符的模式. JavaScript采用的是Perl语言正则表达式语法的一个相当完整的子集. 正则表达式的模式规范是由一系列字符构成的.大多数字符(包括所有字母数字字符)描述的都是按照字面意思进行匹配的字符.这样说来,正则表达式/java/就和 所有包含子串 "java" 的字符串相匹配.虽然正则表达式中的其它字符不是按照字面意思进行匹配的,但它们都具有特殊的意义.正则表达式 /s$/ 包含两个字符. 第一个特殊字符 "s" 是按照字面意思与自身相匹配.第二个字符 "$" 是一个特殊字符,它所匹配的是字符串的结尾.所以正则表达式 /s$/ 匹配的就是以字母 "s" 结尾 的字符串. 1.直接量字符 我们已经发现了,在正则表达式中所有的字母字符和数字都是按照字面意思与自身相匹配的.JavaScript的正则表达式还通过以反斜杠(\)开头的转义序列支持某些非 字母字符.例如,序列 "\n" 在字符串中匹配的是一个直接量换行符.在正则表达式中,许多标点符号都有特殊的含义.下面是这些字符和它们的含义: 正则表达式的直接量字符 字符 匹配 ________________________________ 字母数字字符 自身 \ f 换页符 \ n 换行符 \ r 回车 \ t 制表符 \ v 垂直制表符 \ / 一个 / 直接量 \ \ 一个 \ 直接量 \ . 一个 . 直接量 \ * 一个 * 直接量 \ + 一个 + 直接量 \ ? 一个 ? 直接量 \ | 一个 | 直接量 \ ( 一个 ( 直接量 \ ) 一个 ) 直接量 \ [ 一个 [ 直接量 \ ] 一个 ] 直接量 \ { 一个 { 直接量 \ } 一个 } 直接量 \ XXX 由十进制数 XXX 指 定的ASCII码字符 \ Xnn 由十六进制数 nn 指定的ASCII码字符 \ cX 控制字符^X. 例如, \cI等价于 \t, \cJ等价于 \n ___________________________________________________ 如果想在正则表达式中使用特殊的标点符号,必须在它们之前加上一个 "\" . 2.字符类 将单独的直接符放进中括号内就可以组合成字符类.一个字符类和它所包含的任何一个字符都匹配,所以正则表达式 / [abc] / 和字母 "a" , "b" , "c" 中的任何一个 都匹配.另外还可以定义否定字符类,这些类匹配的是除那些包含在中括号之内的字符外的所有字符.定义否定字符尖时,要将一个 ^ 符号作为从左中括号算起的第 一个字符.正则表达式的集合是 / [a-zA-z0-9] / . 由于某些字符类非常常用,所以JavaScript的正则表达式语法包含一些特殊字符和转义序列来表示这些常用的类.例如, \s 匹配的是空格符,制表符和其它空白符, \s 匹配的则是空白符之外的任何字符. 正则表灰式的字符类 字符 匹配 ____________________________________________________ [...] 位于括号之内的任意字符 [^...] 不在括号之中的任意字符 . 除了换行符之外的任意字符,等价于[^\n] \w 任何单字字符, 等价于[a-zA-Z0-9] \W 任何非单字字符,等价于[^a-zA-Z0-9] \s 任何空白符,等价于[\ t \ n \ r \ f \ v] \S 任何非空白符,等价于[^\ t \ n \ r \ f \ v] \d 任何数字,等价于[0-9] \D 除了数字之外的任何字符,等价于[^0-9] [\b] 一个退格直接量(特例) ________________________________________________________________ 3.复制 用以上的正则表式的语法,可以把两位数描述成 / \ d \ d /,把四位数描述成 / \d \ d \ d \ d /.但我们还没有一种方法可以用来描述具有任意多数位的数字或者是一个 字符串.这个串由三个字符以及跟随在字母之后的一位数字构成.这些复杂的模式使用的正则表达式语法指定了该表达式中每个元素要重复出现的次数. 指定复制的字符总是出现在它们所作用的模式后面.由于某种复制类型相当常用.所以有一些特殊的字符专门用于表示它们.例如: +号匹配的就是复制前一模式一次 或多次的模式.下面的表列出了复制语法.先看一个例子: /\d{2, 4}/ //匹配2到4间的数字. /\w{3} \d?/ //匹配三个单字字符和一个任意的数字. /\s+java\s+/ //匹配字符串"java" ,并且该串前后可以有一个或多个空格. /[^"] * / //匹配零个或多个非引号字符. 正则表达式的复制字符 字符 含义 __________________________________________________________________ {n, m} 匹配前一项至少n次,但是不能超过m次 {n, } 匹配前一项n次,或者多次 {n} 匹配前一项恰好n次 ? 匹配前一项0次或1次,也就是说前一项是可选的. 等价于 {0, 1} + 匹配前一项1次或多次,等价于{1,} * 匹配前一项0次或多次.等价于{0,} ___________________________________________________________________ 4.选择,分组和引用 正则表达式的语法还包括指定选择项,对子表达式分组和引用前一子表达式的特殊字符.字符| 用于分隔供选择的字符.例如: /ab|cd|ef/ 匹配的是字符串 "ab",或者是 字符串 "cd",又或者 "ef". /\d{3}|[a-z]{4}/ 匹配的是要么是一个三位数,要么是四个小写字母.在正则表达式中括号具有几种作用.它的主要作用是把单独的项目分组 成子表达式,以便可以像处理一个独立的单元那种用 *、+或? 来处理那些项目.例如: /java(script) ?/ 匹配的是字符串 "java",其后既可以有 "script",也可以没有. / (ab|cd) + |ef) / 匹配的既可以是字符串 "ef",也可以是字符串"ab" 或者 "cd" 的一次或多次重复. 在正则表达式中,括号的第二个用途是在完整的模式中定义子模式。当一个正则表达式成功地和目标字符串相匹配时,可以从目标串中抽出和括号中的子模式相匹配 的部分.例如,假定我们正在检索的模式是一个或多个字母后面跟随一位或多位数字,那么我们可以使用模式 / [a-z] + \ d+/.但是由于假定我们真正关心的是每个匹配 尾部的数字,那么如果我们将模式的数字部分放在括号中 (/ [a-z] + (\d+)/) ,我们就可以从所检索到的任何匹配中抽取数字了,之后我们会对此进行解析的. 代括号的子表达式的另一个用途是,允许我们在同一正则表达式的后面引用前面的子表达式.这是通过在字符串 \ 后加一位或多位数字来实现的.数字指的是代括号的 子表达式在正则表达式中的位置.例如: \1 引用的是第一个代括号的子表达式. \3 引用的是第三个代括号的子表达式.注意,由于子表达式可以嵌套在其它子表达式中, 所以它的位置是被计数的左括号的位置. 例如:在下面的正则表达式被指定为 \2: /([Jj]ava([Ss]cript)) \sis \s (fun\w*) / 对正则表达式中前一子表达式的引用所指定的并不是那个子表达式的模式,而是与那个模式相匹配的文本.这样,引用就不只是帮助你输入正则表达式的重复部分的快 捷方式了,它还实施了一条规约,那就是一个字符串各个分离的部分包含的是完全相同的字符.例如:下面的正则表达式匹配的就是位于单引号或双引号之内的所有字 符.但是,它要求开始和结束的引号匹配(例如两个都是双引号或者都是单引号): /[' "] [^ ' "]*[' "]/ 如果要求开始和结束的引号匹配,我们可以使用如下的引用: /( [' "] ) [^ ' "] * \1/ \1匹配的是第一个代括号的子表达式所匹配的模式.在这个例子中,它实施了一种规约,那就是开始的引号必须和结束的引号相匹配.注意,如果反斜杠后跟随的数字比 代括号的子表达式数多,那么它就会被解析为一个十进制的转义序列,而不是一个引用.你可以坚持使用完整的三个字符来表示转义序列,这们就可以避免混淆了.例如, 使用 \044,而不是\44.下面是正则表达式的选择、分组和引用字符: 字符 含义 ____________________________________________________________________ | 选择.匹配的要么是该符号左边的子表达式,要么它右边的子表达式 (...) 分组.将几个项目分为一个单元.这个单元可由 *、+、?和|等符号使用,而且还可以记住和这个组匹配的字符以供此后引 用使用 \n 和第n个分组所匹配的字符相匹配.分组是括号中的子表达式(可能是嵌套的).分组号是从左到右计数的左括号数 ____________________________________________________________________ 5.指定匹配的位置 我们已经看到了,一个正则表达式中的许多元素才能够匹配字符串的一个字符.例如: \s 匹配的只是一个空白符.还有一些正则表达式的元素匹配的是字符之间宽度为 0的空间,而不是实际的字符例如: \b 匹配的是一个词语的边界,也就是处于一个/w字字符和一个\w非字字符之间的边界.像\b 这样的字符并不指定任何一个匹配了的 字符串中的字符,它们指定的是匹配所发生的合法位置.有时我们称这些元素为正则表达式的锚.因为它们将模式定位在检索字符串中的一个特定位置.最常用的锚元 素是 ^, 它使模式依赖于字符串的开头,而锚元素$则使模式定位在字符串的末尾. 例如:要匹配词 "javascript" ,我们可以使用正则表达式 /^ javascript $/. 如果我们想检索 "java" 这个词自身 (不像在 "javascript" 中那样作为前缀),那么我们可以使 用模式 /\s java \s /, 它要求在词语java之前和之后都有空格.但是这样作有两个问题.第一: 如果 "java" 出现在一个字符的开头或者是结尾.该模式就不会与之匹配,除 非在开头和结尾处有一个空格. 第二: 当这个模式找到一个与之匹配的字符时,它返回的匹配的字符串前端和后端都有空格,这并不是我们想要的.因此,我们使用词语 的边界 \b 来代替真正的空格符 \s 进行匹配. 结果表达式是 /\b java \b/. 下面是正则表达式的锚字符: 字符 含义 ____________________________________________________________________ ^ 匹配的是字符的开头,在多行检索中,匹配的是一行的开头 $ 匹配的是字符的结尾,在多行检索中,匹配的是一行的结尾 \b 匹配的是一个词语的边界.简而言之就是位于字符\w 和 \w之间的位置(注意:[\b]匹配的是退格符) \B 匹配的是非词语的边界的字符 _____________________________________________________________________ 6.属性 有关正则表达式的语法还有最后一个元素,那就是正则表达式的属性,它说明的是高级模式匹配的规则.和其它正则表达式语法不同,属性是在 / 符号之外说明的.即它 们不出现在两个斜杠之间,而是位于第二个斜杠之后.javascript 1.2支持两个属性.属性 i 说明模式匹配应该是大小写不敏感的.属性 g 说明模式匹配应该是全局的.也 就是说,应该找出被检索的字符串中所有的匹配.这两种属性联合起来就可以执行一个全局的,大小写不敏感的匹配. 例如: 要执行一个大小不敏感的检索以找到词语 "java" (或者是 "java" 、"JAVA"等) 的第一个具体值,我们可以使用大小不敏感的正则表达式 /\b java\b/i .如果要在 一个字符串中找到 "java" 所有的具体值,我们还可以添加属性 g, 即 /\b java \b/gi . 以下是正则表达式的属性: 字符 含义 _________________________________________ i 执行大小写不敏感的匹配 g 执行一个全局的匹配,简而言之,就是找到所有的匹配,而不是在找到第一个之后就停止了 _________________________________________ 除属性 g 和 i 之外,正则表达式就没有其它像属性一样的特性了.如果将构造函数 RegExp 的静态属性 multiline 设置为 true ,那么模式匹配将以多行的模式进行.在这 种模式下,锚字符 ^ 和 $ 匹配的不只是检索字符串的开头和结尾,还匹配检索字符串内部的一行的开头和结尾.例如: 模式 /Java$/ 匹配的是 "Java",但是并不匹配 "Java\nis fun" .如果我们设置了 multiline 属性,那么后者也将被匹配: RegExp.multiline = true; 在JAVASCRIPT里面判断一个字符串是否是电子邮件的格式: if(formname.email.value!=formname.email.value.match(/^\w +[@]\w +[.][\w.] +$/)) { alert("您的电子邮件格式错误!"); formname.email.focus(); return false; } 阅读全文(42) | 回复(0) | 引用(0) | [用365key收藏此日志] [RED]function dateVerify(date){ var reg = /^(\d{4})(-)(\d{2})\2(\d{2})$/; var r = date.match(reg); if(r==null) return false; var d= new Date(r[1], r[3]-1,r[4]); var newStr=d.getFullYear()+r[2]+(d.getMonth()+1)+r[2]+d.getDate(); date=r[1]+r[2]+((r[3]-1)+1)+r[2]+((r[4]-1)+1); return newStr==date; }[/RED] javascript的17种正则表达式 作者: 不祥  时间: 2004-6-9 "^\\d+$"  //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$"  //正整数 "^((-\\d+)|(0+))$"  //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]*$"  //负整数 "^-?\\d+$"    //整数 "^\\d+(\\.\\d+)?$"  //非负浮点数(正浮点数 + 0) "^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"  //正浮点数 "^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"  //非正浮点数(负浮点数 + 0) "^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"  //负浮点数 "^(-?\\d+)(\\.\\d+)?$"  //浮点数 "^[A-Za-z]+$"  //由26个英文字母组成的字符串 "^[A-Z]+$"  //由26个英文字母的大写组成的字符串 "^[a-z]+$"  //由26个英文字母的小写组成的字符串 "^[A-Za-z0-9]+$"  //由数字和26个英文字母组成的字符串 "^\\w+$"  //由数字、26个英文字母或者下划线组成的字符串 "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"    //email地址 "^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"  //url JavaScript中的正则表达式(2) 作者 :中国论坛网收集 来源 :http://www.51one.net 加入时间 :2004-8-25   正则表达式对象的属性及方法    预定义的正则表达式拥有有以下静态属性:input, multiline, lastMatch, lastParen, leftContext, rightContext和$1到$9。其中input和multiline可以预设置。其他属性的值在执行过exec或test方法后被根据不同条件赋以不同的值。许多属性同时拥有长和短(perl风格)的两个名字,并且,这两个名字指向同一个值。(JavaScript模拟perl的正则表达式) 正则表达式对象的属性 属性 含义 $1...$9 如果它(们)存在,是匹配到的子串 $_ 参见input $* 参见multiline $& 参见lastMatch $+ 参见lastParen $` 参见leftContext $''          参见rightContext constructor    创建一个对象的一个特殊的函数原型 global       是否在整个串中匹配(bool型) ignoreCase     匹配时是否忽略大小写(bool型) input        被匹配的串 lastIndex     最后一次匹配的索引 lastParen     最后一个括号括起来的子串 leftContext    最近一次匹配以左的子串 multiline     是否进行多行匹配(bool型) prototype     允许附加属性给对象 rightContext    最近一次匹配以右的子串 source       正则表达式模式 lastIndex     最后一次匹配的索引 正则表达式对象的方法 方法 含义 compile      正则表达式比较 exec        执行查找 test        进行匹配 toSource      返回特定对象的定义(literal representing),其值可用来创建一个新的对象。重载Object.toSource方法得到的。 toString      返回特定对象的串。重载Object.toString方法得到的。 valueOf      返回特定对象的原始值。重载Object.valueOf方法得到 例子 var myReg = /(w+)s(w+)/; var str = "John Smith"; var newstr = str.replace(myReg, "$2, $1"); document.write(newstr); 将输出"Smith, John" javascript正则表达式检验 /********************************************************************************* * EO_JSLib.js * javascript正则表达式检验 **********************************************************************************/ //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false return true } //校验登录名:只能输入5-20个以字母开头、可带数字、“_”、“.”的字串 function isRegisterUserName(s) { var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/; if (!patrn.exec(s)) return false return true } //校验用户姓名:只能输入1-30个以字母开头的字串 function isTrueName(s) { var patrn=/^[a-zA-Z]{1,30}$/; if (!patrn.exec(s)) return false return true } //校验密码:只能输入6-20个字母、数字、下划线 function isPasswd(s) { var patrn=/^(\w){6,20}$/; if (!patrn.exec(s)) return false return true } //校验普通电话、传真号码:可以“+”开头,除数字外,可含有“-” function isTel(s) { //var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/; var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/; if (!patrn.exec(s)) return false return true } //校验手机号码:必须以数字开头,除数字外,可含有“-” function isMobil(s) { var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/; if (!patrn.exec(s)) return false return true } //校验邮政编码 function isPostalCode(s) { //var patrn=/^[a-zA-Z0-9]{3,12}$/; var patrn=/^[a-zA-Z0-9 ]{3,12}$/; if (!patrn.exec(s)) return false return true } //校验搜索关键字 function isSearch(s) { var patrn=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;'\,./?]{1}[^`~!@$%^&()+=|\\\][\]\{\}:;'\,.?]{0,19}$/; if (!patrn.exec(s)) return false return true } function isIP(s) //by zergling { var patrn=/^[0-9.]{1,20}$/; if (!patrn.exec(s)) return false return true } 正则表达式regular expression详述(一) http://www.kymita.com/888.asp 2002-12-15 蓝箭工作室 正则表达式是regular expression,看来英文比中文要好理解多了,就是检查表达式符 不符合规定!!正则表达式有一个功能十分强大而又十分复杂的对象RegExp,在JavaScript1.2 版本以 上提供。 下面我们看看有关正则表达式的介绍: 正则表达式对象用来规范一个规范的表达式(也就是表达式符不符合特定的要求,比如是不是Email 地址格式等),它具有用来检查给出的字符串是否符合规则的属性和方法。 除此之外,你用RegExp构造器建立的个别正则表达式对象的属性,就已经预先定义好了正则表达式 对象的静态属性,你可以随时使用它们。 核心对象: 在JavaScript 1.2, NES 3.0以上版本提供。 在JavaScript 1.3以后版本增加了toSource方法。 建立方法: 文字格式或RegExp构造器函数。 文字建立格式使用以下格式: /pattern/flags即/模式/标记 构造器函数方法使用方法如下: new RegExp("pattern"[, "flags"])即new RegExp("模式"[,"标记"]) 参数: pattern(模式) 表示正则表达式的文本 flags(标记) 如果指定此项,flags可以是下面值之一: g: global match(全定匹配) i: ignore case(忽略大小写) gi: both global match and ignore case(匹配所有可能的值,也忽略大小写) 注意:文本格式中的参数不要使用引号标记,而构造器函数的参数则要使用引号标记。所以下面的 表达式建立同样的正则表达式: /ab+c/i    new RegExp("ab+c", "i") 描述: 当使用构造函数的时候,必须使用正常的字符串避开规则(在字符串中加入前导字符\ )是必须的。 例如,下面的两条语句是等价的: re = new RegExp("\\w+") re = /\w+/ 下面的提供了在正则表达式中能够使用的完整对特殊字符的一个完整的列表和描述。 表1.3:正则表达式中的特殊字符: 字符\ 意义:对于字符,通常表示按字面意义,指出接着的字符为特殊字符,\不作解释。 例如:/b/匹配字符'b',通过在b 前面加一个反斜杠\,也就是/\b/,则该字符变成特殊字符,表示 匹配一个单词的分界线。 或者: 对于几个字符,通常说明是特殊的,指出紧接着的字符不是特殊的,而应该按字面解释。 例如:*是一个特殊字符,匹配任意个字符(包括0个字符);例如:/a*/意味匹配0个或多个a。 为了匹配字面上的*,在a前面加一个反斜杠;例如:/a\*/匹配'a*'。 字符^ 意义:表示匹配的字符必须在最前边。 例如:/^A/不匹配"an A,"中的'A',但匹配"An A."中最前面的'A'。 字符$ 意义:与^类似,匹配最末的字符。 例如:/t$/不匹配"eater"中的't',但匹配"eat"中的't'。 字符* 意义:匹配*前面的字符0次或n次。 例如:/bo*/匹配"A ghost booooed"中的'boooo'或"A bird warbled"中的'b',但不匹配"A goat g runted"中的任何字符。 字符+ 意义:匹配+号前面的字符1次或n次。等价于{1,}。 例如:/a+/匹配"candy"中的'a'和"caaaaaaandy."中的所有'a'。 字符? 意义:匹配?前面的字符0次或1次。 例如:/e?le?/匹配"angel"中的'el'和"angle."中的'le'。 字符. 意义:(小数点)匹配除换行符外的所有单个的字符。 例如:/.n/匹配"nay, an apple is on the tree"中的'an'和'on',但不匹配'nay'。 字符(x) 意义:匹配'x'并记录匹配的值。 例如:/(foo)/匹配和记录"foo bar."中的'foo'。匹配子串能被结果数组中的素[1], ..., [n] 返 回,或被RegExp对象的属性$1, ..., $9返回。 字符x|y 意义:匹配'x'或者'y'。 例如:/green|red/匹配"green apple"中的'green'和"red apple."中的'red'。 字符{n} 意义:这里的n是一个正整数。匹配前面的n个字符。 例如:/a{2}/不匹配"candy,"中的'a',但匹配"caandy," 中的所有'a'和"caaandy."中前面的两个 'a'。 字符{n,} 意义:这里的n是一个正整数。匹配至少n个前面的字符。 例如:/a{2,}不匹配"candy"中的'a',但匹配"caandy"中的所有'a'和"caaaaaaandy."中的所有'a' 字符{n,m} 意义:这里的n和m都是正整数。匹配至少n个最多m个前面的字符。 例如:/a{1,3}/不匹配"cndy"中的任何字符,但匹配 "candy,"中的'a',"caandy," 中的前面两个 'a'和"caaaaaaandy"中前面的三个'a',注意:即使"caaaaaaandy" 中有很多个'a',但只匹配前面的三 个'a'即"aaa"。 字符[xyz] 意义:一字符列表,匹配列出中的任一字符。你可以通过连字符-指出一个字符范围。 例如:[abcd]跟[a-c]一样。它们匹配"brisket"中的'b'和"ache"中的'c'。 字符[^xyz] 意义:一字符补集,也就是说,它匹配除了列出的字符外的所有东西。 你可以使用连字符-指出一 字符范围。 例如:[^abc]和[^a-c]等价,它们最早匹配"brisket"中的'r'和"chop."中的'h'。 字符[\b] 意义:匹配一个空格(不要与\b混淆) 字符\b 意义:匹配一个单词的分界线,比如一个空格(不要与[\b]混淆) 例如:/\bn\w/匹配"noonday"中的'no',/\wy\b/匹配"possibly yesterday."中的'ly'。 字符\B 意义:匹配一个单词的非分界线 例如:/\w\Bn/匹配"noonday"中的'on',/y\B\w/匹配"possibly yesterday."中的'ye'。 字符\cX 意义:这里的X是一个控制字符。匹配一个字符串的控制字符。 例如:/\cM/匹配一个字符串中的control-M。 字符\d 意义:匹配一个数字,等价于[0-9]。 例如:/\d/或/[0-9]/匹配"B2 is the suite number."中的'2'。 字符\D 意义:匹配任何的非数字,等价于[^0-9]。 例如:/\D/或/[^0-9]/匹配"B2 is the suite number."中的'B'。 字符\f 意义:匹配一个表单符 字符\n 意义:匹配一个换行符 字符\r 意义:匹配一个回车符 字符\s 意义:匹配一个单个white空格符,包括空格,tab,form feed,换行符,等价于[ \f\n\r\t\v]。 例如:/\s\w*/匹配"foo bar."中的' bar'。 字符\S 意义:匹配除white空格符以外的一个单个的字符,等价于[^ \f\n\r\t\v]。 例如:/\S/\w*匹配"foo bar."中的'foo'。 字符\t 意义:匹配一个制表符 字符\v 意义:匹配一个顶头制表符 字符\w 意义:匹配所有的数字和字母以及下划线,等价于[A-Za-z0-9_]。 例如:/\w/匹配"apple,"中的'a',"$5.28,"中的'5'和"3D."中的'3'。 字符\W 意义:匹配除数字、字母外及下划线外的其它字符,等价于[^A-Za-z0-9_]。 例如:/\W/或者/[^$A-Za-z0-9_]/匹配"50%."中的'%'。 字符\n 意义:这里的n是一个正整数。匹配一个正则表达式的最后一个子串的n的值(计数左圆括号)。 例如:/apple(,)\sorange\1/匹配"apple, orange, cherry, peach."中的'apple, orange',下面 有一个更加完整的例子。 注意:如果左圆括号中的数字比\n指定的数字还小,则\n取下一行的八进制escape作为描述。 字符\ooctal和\xhex 意义:这里的\ooctal是一个八进制的escape值,而\xhex是一个十六进制的escape值,允许在一个 正则表达式中嵌入ASCII码。 当表达式被检查的时候,文字符号提供了编辑正则表达式的方法。利用文字符号可以使到正则表达 式保持为常数。例如,如果你在一个循环中使用文字符号来构造一个正则表达式,正则表达式不需进行 反复编译。 正则表达式对象构造器,例如,new RegExp("ab+c"),提供正则表达式的运行时编译。当你知道正 则表达式的模式会变化的时候,应该使用构造函数,或者你不知道正则表达式的模式,而它们是从另外 的源获得的时候,比如由用户输入时。一旦你定义好了正则表达式,该正则表达式可在任何地方使用, 并且可以改变,你可以使用编译方法来编译一个新的正则表达式以便重新使用。 一个分离预先定义的RegExp对象可以在每个窗口中使用;也就是说,每个分离的JavaScript线程运 行以获得自己的RegExp对象。因为每个脚本在一个线程中是不可中断的,这就确保了不同的脚本不会覆 盖RegExp对象的值。 预定义的RegExp对象包含的静态属性:input, multiline, lastMatch,lastParen, leftContext, rightContext, 以及从$1到$9。input和multiline属性能被预设。其它静态属性的值是在执行个别正则 表达式对象的exec和test方法后,且在执行字符串的match和replace方法后设置的。 属性 注意RegExp对象的几个属性既有长名字又有短名字(象Perl)。这些名字都是指向相同的值。Perl是 一种编程语言,而JavaScript模仿了它的正则表达式。 属性$1, ..., $9 取得匹配的子串,如果有的话 属性$_ 参考input 属性$* 参考multiline 属性$& 参考lastMatch 属性$+ 参考lastParen 属性$` 参考leftContext 属性$' 参考rightContext 属性constructor 指定用来建立对象原型函 属性global 决定是否测试正则表达式是否不能匹配所有的字符串,或者只是与最先的冲突。 属性ignoreCase 决定试图匹配字符串的时候是否忽略大小写 属性input 当正则表达式被匹配的时候,为相反的字符串。 属性lastIndex 决定下一次匹配从那里开始 属性lastMatch 最后一个匹配的字符 属性lastParen 子串匹配的时候,最后一个parenthesized,如果有的话。 属性leftContext 最近一次匹配前的子串。 属性multiline 是否在串的多行中搜索。 属性prototype 允许附加属性到所有的对象 属性rightContext 最近一次匹配后的的子串。 属性source 模式文本 方法 compile方法 编译一个正则表达式对象 exec方法 运行正则表达式匹配 test方法 测试正则达式匹配 toSource方法 返回一个对象的文字描述指定的对象;你可以使用这个值来建立一个新的对象。不考虑Object.toS ource方法。 toString方法 返回一个字符串描述指定的对象,不考虑Object.toString对象。 valueOf方法 返回指定对角的原始值。不考虑Object.valueOf方法。  另外,这个对象继承了对象的watch和unwatch方法    例子:    例1、下述示例脚本使用replace方法来转换串中的单词。在替换的文本中,脚本使用全局 RegExp 对象的$1和$2属性的值。注意,在作为第二个参数传递给replace方法的时候,RegExp对象的$属性的名 称。 re = /(\w+)\s(\w+)/; str = "John Smith"; newstr=str.replace(re,"$2, $1"); document.write(newstr) 显示结果:"Smith, John".   例2、下述示例脚本中,RegExp.input由Change事件处理句柄设置。在getInfo函数中,exec 方法 使用RegExp.input的值作为它的参数,注意RegExp预置了$属性。 function getInfo(abc) { re = /(\w+)\s(\d+)/; re.exec(abc.value); window.alert(RegExp.$1 + ", your age is " + RegExp.$2); }   请输入你的姓和年龄,输入完后按回车键。       $1, ..., $9属性 用圆括号括着的匹配子串,如果有的话。 是RegExp的属性 静态,只读 在JavaScript 1.2, NES 3.0以上版本提供 描述:因为input是静态属性,不是个别正则表达式对象的属性。你可以使用RegExp.input 访问该 属性。 能加上圆括号的子串的数量不受限制,但正则表达式对象只能保留最后9 条。如果你要访问所有的 圆括号内的匹配字串,你可以使用返回的数组。 这些属性能用在RegExp.replace方法替换后的字符串(输出结果)。当使用这种方式的时候,不用预 先考虑RegExp对象。下面给出例子。当正则表达式中没有包含圆括号的时候,该脚本解释成$n的字面意 义。(这里的n是一个正整数)。 例如: 下例脚本使用replace 方法来交换串中单词的位置。在替换后的文本字串中,脚本使用正则表达式 RegExp对象的$1和$2属性的值。注意:当它们向replace方法传递参数的时候,这里没有考虑 $ 属性的 RegExp对象的名称。 re = /(\w+)\s(\w+)/; str = "John Smith"; newstr=str.replace(re,"$2, $1"); document.write(newstr) 显示的输出结果为:Smith, John。 正则表达式regular expression详述(二) http://www.kymita.com/888.asp 2002-12-15 蓝箭工作室 正则表达式详述(二) 以下这些不是正则表达式的新增对象请参阅对应的JavaScript对象的属性 $_属性 参考input $*属性 参考multiline $&属性 参考lastMatch $+属性 参考lastParen $`属性 参考leftContext $'属性 参考rightContext compile方法 在脚本运行期间编译正则表达式对象 属于RegExp的方法 在JavaScript 1.2, NES 3.0以上版本提供 语法: regexp.compile(pattern[, flags]) 以数: regexp 正则表达式的名称,可以是变量名或文字串。 pattern 正则表达式的定义文本。 flags 如果指定的话,可以是下面其中的一个: "g": 匹配所有可能的字串 "i": 忽略大小写 "gi": 匹配所有可能的字串及忽略大小写 描述: 使用compile方法来编译一个正则表达式 created with the RegExp constructor function。这样 就强制正则表达式只编译一次,而不是每次遇到正则表达式的时候都编译一次。当你确认正则表达式能 保持不变的时候可使用compile 方法来编译它(在获得它的匹配模式后),这样就可以在脚本中重复多次使用它。 你亦可以使用compile 方法来改变在运行期间改变正则表达式。例如,假如正则表达式发生变化, 你可以使用compile方法来重新编译该对象来提高使用效率。 使用该方法将改变正则表达式的source, global和ignoreCasesource属性的值。 constructor 指出建立对象原型的function。注意这个属性的值由函数本身提供,而不是一个字串包含RegExp的name.Property提供。 在JavaScript 1.1, NES 2.0以上版本提供 ECMA版本ECMA-262 描述:参考Object.constructor. exec方法 在指定的字符串运行匹配搜索。返回一个结果数组。 是RegExp的方法 在JavaScript 1.2, NES 3.0以上版本提供 语法: regexp.exec([str])regexp([str]) 参数: regexp,正则表达式的名称,可以是一个变量名或文字定义串。 str,要匹配正则表达式的字符串,如果省略,将使用RegExp.input的值。 描述:就如在语法描述中的一样,正则表达工的exec方法能够被直接调用(使用regexp.exec(str))或者间接调用(使用regexp(str))。 假如你只是运行以找出是否匹配,可以使用String搜索方法。 假如匹配成功,exec方法返回一个数组并且更新正则表达式对象属性的值和预先定义的正则表达式对象、RegExp。如果匹配失败,exec方法返回null。 请看下例: //匹配一个b接着一个或多个d,再接着一个b //忽略大小写 myRe=/d(b+)(d)/ig; myArray = myRe.exec("cdbBdbsbz"); 下面是该脚本的返回值:对象 属性/Index 描述 例子 myArray myArray的内容 ["dbBd", "bB", "d"] index 基于0的匹配index 1 input 原始字符串 cdbBdbsbz [0] 最后匹配的字符 dbBd [1], ...[n] 用圆括号括住的匹配字符串,如果有的话。不限制括号的个数。 [1] = bB [2] = d myRe lastIndex 开始下次匹配操作的index值 5 ignoreCase 指出"i"是否使用以忽略大小写 true global 指出是否使用"g"标记来进行匹配所有可能的字串 true source 定义模式的文本字符串 d(b+)(d) RegExp lastMatch$& 最后匹配的字符 dbBd leftContext$\Q 最新匹配前面的子串 c rightContext$' 最新匹配后面的子串 bsbz $1, ...$9 圆括号内的匹配子串,如果有的话。圆括号的个数不受限制,但RegExp只能保留最后9个 $1 = bB $2 = d lastParen $+ 最后一个加上圆括号的匹配子串,如果有的话 d 假如你的正则表达式使用了"g"标记,你可以多次使用exec 方法来连续匹配相同的串。当你这样做 的时候,新的匹配将从由正则表达式的lastIndex 属性值确定的子串中开始。例如,假定你使用下面的脚本: myRe=/ab*/g;str = "abbcdefabh" myArray = myRe.exec(str); document.writeln("Found "+myArray[0]+". Next match starts at "+myRe.lastIndex) mySecondArray = myRe.exec(str); document.writeln("Found "+mySecondArray[0]+". Next match starts at "+myRe.lastIndex) 这个脚本显示如下结果: Found abb. Next match starts at 3 Found ab. Next match starts at 9 例子: 在下面的例子中,用户输入一个名字,脚本根据输入执行匹配操作。接着检查数组看是否和其它用户的名字匹配。 本脚本假定已注册的用户的姓已经存进了数组A中,或许从一个数据库中取得。 A = ["zhao","qian","sun","li","liang"] function lookup() { firstName = /\w+/i(); if (!firstName) window.alert (RegExp.input + "非法输入"); else { count=0; for (i=0;i 输入你的姓然后按回车键。 global属性 正则表达式中是否使用了"g"标记。 RegExp属性,只读 在JavaScript 1.2, NES 3.0以上版本提供 描述: global是一个个别正则表达式对象的属性 如果使用了"g"标记,global的值为true;否则为 false。"g"标记指定正则表达式测试所有可能的匹配。 你不能直接改变该属性的值,但可以调用compile方法来改变它。 ignoreCase 检查正则表达式是否使用了"i"标记 RegExp属性,只读 在JavaScript 1.2, NES 3.0以上版本提供 描述: ignoreCase是个别正则表达式对象的一个属性。 如果使用了"i"标记,则返回true,否则返回false。"i"标记指示在进行匹配的时候忽略大小写。 你不能直接改变该属性的值,但可以通过调用compile方法来改变它 input 指出正则表达式要测试那个字串。$_是这个属性的另一个名字。 RegExp的属性,静态 在JavaScript 1.2, NES 3.0以上版本提供 描述:因为input是静态的,不是某个个别的正则表达式对象的属性。你也可以使用 RegExp.input来表示。 如果没有给正则表达式的exec或test方法提供字符串,并且RegExp.input中有值,则使用它的值来调用该方法。 脚本或浏览器能够预置input属性。如果被预置了值且调用exec或 test方法的时候没有提供字符串 则调用exec或test的时候使用input的值。input可以被浏览器以下面的方式设置: 当text表单域处理句柄被调用的时候,input被设置为该text输入的字串。 当textarea表单域处理句柄被调用的时候,input被设置为textarea域内输入的字串。注意multili ne亦被设置成true从而能匹配多行文本。 当select表单域处理句柄被调用的时候,input被设置成selected text的值。 当链接对象的处理句柄被调用的时候,input被设置成和之间的字符串。 事件理现句柄处理完毕后,input属性的值被清除。 lastIndex 可读/可写的一个整数属性,指出下一次匹配从哪里开始。 RegExp的属性 在JavaScript 1.2, NES 3.0以上版本提供 描述:lastIndex 是个别的正则表达式对象的属性。 这个属性只有当正则表达式的"g"标记被使用以进行全串匹配的时候才被设置。实行以下规则: 如果lastIndex大小字符串的长度,regexp.test和regexp.exec失败,且lastIndex被设为0。 如果lastIndex等于字串的长度且正则表达式匹配空字符串,则正则表达式从lastIndex的位置开始匹配。 如果lastIndex等于字符串的长度且正则表达式不匹配空字符串,则正则表达式不匹配input,且lastIndex被置为0。 否则,lastIndex被设置成最近一次匹配的下一点。 例如,按下面的顺序执行脚本: re = /(hi)?/g 匹配空字符串 re("hi") 返回["hi", "hi"],lastIndex置为2 re("hi") 返回[""],一个空数组,它的下标为0的元素就是匹配字符串。在这种情况下,返回空 串是因为lastIndex等于2(且仍然是2),并且"hi"的长度也是2。 lastMatch 最后一次匹配字符串,$&是同样的意思。 RegExp的属性,静态,只读 在JavaScript 1.2, NES 3.0以上版本提供 描述:因为lastMatch是静态的,所以它不是个别指定正则表达式的属性。你也可以使用RegExp.lastMatch。 lastParen 最后一次加上括号的匹配字符串,如果有的话。$+是同样的意思。 RegExp属性,静态,只读 在JavaScript 1.2, NES 3.0以上版本提供 描述:因为lastParen是静态的,它不是某个个别正则式的属性,你可以使用RegExp.lastParen 表达同样的意思。 leftContext 最近一次匹配前面的子串,$`具有相同的意思。 RegExp的属性,静态,只读 在JavaScript 1.2, NES 3.0以上版本提供 描述:因为leftContext是静态的,不是某一个正则表达式的属性,所以可以使用RegExp.leftContext来表达想同的意思。 multiline 反映是否匹配多行文本,$*是相同的意思。 RegExp的属性,静态 在JavaScript 1.2, NES 3.0以上版本提供 描述:因为multiline是静态的,而不是某个个别正则表达式的属性,所以能够用RegExp.multiline表达相同的意思。 如果允许匹配多行文本,则multiline为true,如果搜索必须在换行时停止,则为false。 脚本或浏览器能够设置multiline属性。当一个textarea的事件处理句柄被调用的时候,multiline 被置为true。在事件处理句柄处理完毕后,multiline属性值被清除。也就是说,如果你设置了multili ne为true,则执行任何的事件处理句柄后,multiline被置为false。 prototype 描绘类的原型。你可以根据要求使用prototype来增加类的属性或方法。为了获得prototypes 的资 料,请参阅RegExp的Function.prototype.Property属性。 从JavaScript 1.1, NES 2.0版本开始提供 ECMA版本ECMA-262 rightContext 最后一次匹配的右边的字符串,$'是同样的效果。 RegExp的属性,静态,只读 从 JavaScript 1.2, NES 3.0以上版本开始提供 描述:因为rightContext是静态的,不是某个个别正则表达工的属性,可以使用RegExp.rightContext来达到相同的效果。 source 一个只读属性,包含正则表达式定义的模式,不包侨forward slashes和"g"或"i"标记。 RegExp的属性,只读 从JavaScript 1.2, NES 3.0以上版本开始提供 描述:source是个别正则表达式对象的属性,你不能直接改变它的值,但可以通过调用compile 方法来改变它。 test 执行指定字符串的正则表达式匹配搜索,返回true或false。 RegExp的方法 从JavaScript 1.2, NES 3.0以上版本开始提供 语法:regexp.test([str]) 参数:regexp,正则表达式的名称,可以是变量名或正则表达式定义文字串 str,要匹配的字符串,如果省略,将使用RegExp.input的值为作参数 描述:当你需要知道一个字符串能否匹配某个正则表达工,可以使用test方法(与String.search方 法类似); 为了获得更多的信息(但速度将变慢),可以使用exec方法(与String.match方法类似)。 例子:下面的例子显示test是否成功的提示: function testinput(re, str){ if (re.test(str)) midstring = " contains "; else midstring = " does not contain "; document.write (str + midstring + re.source); } toSource 返回一个字符串象征对象的源码 RegExp的方法 从JavaScript 1.3以上版本开始提供 语法:toSource() 参数:没有 描述:toSource方法返回下述的值: 对于内置的RegExp对象,toSource返回下面的字符象征源码不可用: function Boolean(){ [native code] } 在RegExp场合中, toSource返回象征源码的字符串,通常这个方法是由JavaScript内部自动调用而不是不代码中显式调用。 更多请看Object.toSource toString 返回描绘指定对象的字符串。 RegExp的方法 从JavaScript 1.1, NES 2.0开始提供 ECMA版本ECMA-262 语法:toString() 参数:无 描述:RegExp对象不考虑Object对象的toString方法;它不继承Object.toString,对于RegExp 对 象,toString方法返回一个代表该对象的字符串。 例如:下面的例子显示象征RegExp对象的字符串 myExp = new RegExp("a+b+c"); alert(myExp.toString()) displays "/a+b+c/" 更多请看:Object.toString valueOf 返回一个RegExp对象的原始值 RegExp的方法 从JavaScript 1.1版本开始提供 ECMA版本:ECMA-262 语法:valueOf() 参数:无 描述:RegExp的valueOf方法以字符串形式返回RegExp对象的原始值,这个值与RegExp.toString相等。 该方法通常由JavaScript内部自动调用而不是显式调用 例子: myExp = new RegExp("a+b+c"); alert(myExp.valueOf()) displays "/a+b+c/" 正则表达式在javascript中的几个实例1(转) ! 去除字符串两端空格的处理 如果采用传统的方式,就要可能就要采用下面的方式了 //清除左边空格 function js_ltrim(deststr) { if(deststr==null)return ""; var pos=0; var retStr=new String(deststr); if (retStr.lenght==0) return retStr; while (retStr.substring(pos,pos+1)==" ") pos++; retStr=retStr.substring(pos); return(retStr); } //清除右边空格 function js_rtrim(deststr) { if(deststr==null)return ""; var retStr=new String(deststr); var pos=retStr.length; if (pos==0) return retStr; while (pos && retStr.substring(pos-1,pos)==" " ) pos--; retStr=retStr.substring(0,pos); return(retStr); } //清除左边和右边空格 function js_trim(deststr) { if(deststr==null)return ""; var retStr=new String(deststr); var pos=retStr.length; if (pos==0) return retStr; retStr=js_ltrim(retStr); retStr=js_rtrim(retStr); return retStr; } 采用正则表达式,来去除两边的空格,只需以下代码 String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); } 一句就搞定了, 可见正则表达式为我们节省了相当的编写代码量 ! 移动手机号的校验 如果采用传统的校验方式至少就要完成下面三步的校验, (1). 是否是数字 (2).是否是11位 (3).数字的第三位是否是5,6,7,8,9 如果采用正则表达式校验,只需以下代码 function checkMobile1(form) { if (form.mobile.value > "") { var reg=/13[5,6,7,8,9]\d{8}/; if ( form.mobile.value.match(reg)== null) { alert("请输入正确的移动手机号码!"); form.mobile.focus(); return false; } } return true; } 从上面的代码可以看出校验移动手机号只需定义一个var reg=/13[5,6,7,8,9]\d{8}/;模式匹配串就可以完成合法性校验了 ! URL的校验, 条件:必须以http:// 或 https:// 开头, 端口号必须为在1-65535 之间, 以下代码完成了合法性校验 //obj:数据对象 //dispStr :失败提示内容显示字符串 function checkUrlValid( obj, dispStr) { if(obj == null) { alert("传入对象为空"); return false; } var str = obj.value; var urlpatern0 = /^https?:\/\/.+$/i; if(!urlpatern0.test(str)) { alert(dispStr+"不合法:必须以'http:\/\/'或'https:\/\/'开头!"); obj.focus(); return false; } var urlpatern2= /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?.+$/i; if(!urlpatern2.test(str)) { alert(dispStr+"端口号必须为数字且应在1-65535之间!"); obj.focus(); return false; } var urlpatern1 =/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i; if(!urlpatern1.test(str)) { alert(dispStr+"不合法,请检查!"); obj.focus(); return false; } var s = "0"; var t =0; var re = new RegExp(":\\d+","ig"); while((arr = re.exec(str))!=null) { s = str.substring(RegExp.index+1,RegExp.lastIndex); if(s.substring(0,1)=="0") { alert(dispStr+"端口号不能以0开头!"); obj.focus(); return false; } t = parseInt(s); if(t65535) { alert(dispStr+"端口号必须为数字且应在1-65535之间!"); obj.focus(); return false; } } return true; } 对url的校验,看上去有很多的代码,这是因为要给予出错提示, 否则只需var urlpatern1 =/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i; 一句就可以校验出url合法性了 正则表达式在JavaScript应用 时间戳: 2004-11-30 15:29:30 人气: 23 作者: AnyRock 来源:www.mending.cn -------------------------------------------------------------- 去掉字符串头尾多余的空格 /g是全文查找所有匹配 function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g, "");} function String.prototype.LTrim(){return this.replace(/(^\s*)/g, "");} function String.prototype.RTrim(){return this.replace(/(\s*$)/g, "");} -------------------------------------------------------------- 应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;} -------------------------------------------------------------- 应用:javascript中没有像vbscript那样的trim函数,我们就可以利用这个表达式来实现,如下: String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); } 得用正则表达式从URL地址中提取文件名的javascript程序,如下结果为page1 s="http://www.9499.net/page1.htm" s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2") alert(s) ##利用正则表达式限制网页表单里的文本框输入内容: -------------------------------------------------------------- 用正则表达式限制只能输入中文:onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,'))" -------------------------------------------------------------- 用正则表达式限制只能输入全角字符: onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,'))" -------------------------------------------------------------- 用正则表达式限制只能输入数字:onkeyup="value=value.replace(/[^\d]/g,') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,'))" -------------------------------------------------------------- 用正则表达式限制只能输入数字和英文:onkeyup="value=value.replace(/[\W]/g,') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,'))" 用正则表达式和javascript对表单进行全面验证 代码:<!-- 使用时请将下面的javascript代码存到一个单一的js文件中。 1、表单要求 将对表单中的所有以下类型的域依次验证,所有验证是去除了前导和后缀空格的,要注意是区分大小写的。 2、空值验证 表单中任意域加上emptyInfo属性将对此域是否为空进行验证(可以和最大长度验证\一般验证方式同时使用)。 无此属性视为此域允许空值。    如: 3、最大长度验证(可以和空值验证、一般验证方式同时使用): 或, 3、一般验证方式(不对空值做验证):    如: 4、标准验证(不与其它验证方式同时使用): 全部通过来实现,并且不需要name属性以免提交到服务器。    4.1、合法日期验证: 注:这里也可以是,以下同 yearfieldName、monthfieldName、dayfieldName分别为年月日字段,月和日可以是两位(MM)或一位格式(M), 此处不对每个字段分别检验(如果要检验,请在年月日三个域分别使用前面的一般验证方式),只对日期的最大值是否合法检查; 4.2、日期格式验证(请注意,此验证不对日期是否有效进行验证,还未找到从格式中得到年月日数据的方法^_^): 其中格式仅对y、M、d、H、m、s进行支持(其它字符视为非时间的字符) 4.3、列表验证: 检验列表(checkbox、redio、select)是否至少选中了一条记录(对select主要用于多项选择) 其中validatorType可以是Checkbox、R、Select; 对于一个select表单,如果要求选择一条不能是第一条的记录,请用下列方式: ==请选择== 1 4.4、Email验证: 其中separator为可选项,表示输入多个email时的分隔符(无此选项只能是一个地址) 4.5、加入其它javascript操作: function functionname(){ 自定义方法 } 表单中加入(此时emptyInfo等属性无效) 时将调用function属性中指定的javascript方法(要求方法返回true或false,返回false将不再验证表单,也不提交表单)。 5、在表单通过验证提交前disable一个按钮(也可将其它域disable,不能与其它验证同在一个域),不要求按钮是表单中的最后一个 6、不验证表单    当validator域值为0时不对表单进行验证,直接提交表单或执行指定function并返回true后提交表单 functionName为可选 --> function getStringLength(str){ var endvalue=0; var sourcestr=new String(str); var tempstr; for (var strposition = 0; strposition 255 || tempstr.charCodeAt(0)<0) { endvalue=endvalue+2; } else { endvalue=endvalue+1; } } return(endvalue); } function trim(str){ if(str==null) return ""; if(str.length==0) return ""; var i=0,j=str.length-1,c; for(;i-1;j--){ c=str.charAt(j); if(c!=' ') break; } if(i>j) return ""; return str.substring(i,j+1); } function validateDate(date,format,alt){ var time=trim(date.value); if(time=="") return; var reg=format; var reg=reg.replace(/yyyy/,"[0-9]{4}"); var reg=reg.replace(/yy/,"[0-9]{2}"); var reg=reg.replace(/MM/,"((0[1-9])|1[0-2])"); var reg=reg.replace(/M/,"(([1-9])|1[0-2])"); var reg=reg.replace(/dd/,"((0[1-9])|([1-2][0-9])|30|31)"); var reg=reg.replace(/d/,"([1-9]|[1-2][0-9]|30|31))"); var reg=reg.replace(/HH/,"(([0-1][0-9])|20|21|22|23)"); var reg=reg.replace(/H/,"([0-9]|1[0-9]|20|21|22|23)"); var reg=reg.replace(/mm/,"([0-5][0-9])"); var reg=reg.replace(/m/,"([0-9]|([1-5][0-9]))"); var reg=reg.replace(/ss/,"([0-5][0-9])"); var reg=reg.replace(/s/,"([0-9]|([1-5][0-9]))"); reg=new RegExp("^"+reg+"$"); if(reg.test(time)==false){//验证格式是否合法 alert(alt); date.focus(); return false; } return true; } function validateDateGroup(year,month,day,alt){ var array=new Array(31,28,31,30,31,30,31,31,30,31,30,31); var y=parseInt(year.value); var m=parseInt(month.value); var d=parseInt(day.value); var maxday=array[m-1]; if(m==2){ if((y%4==0&&y0!=0)||y%400==0){ maxday=29; } } if(d>maxday){ alert(alt); return false; } return true; } function validateCheckbox(obj,alt){ var rs=false; if(obj!=null){ if(obj.length==null){ return obj.checked; } for(i=0;i<obj.length;i++){ if(obj[i].checked==true){ return true; } } } alert(alt); return rs; } function validateRadio(obj,alt){ var rs=false; if(obj!=null){ if(obj.length==null){ return obj.checked; } for(i=0;i<obj.length;i++){ if(obj[i].checked==true){ return true; } } } alert(alt); return rs; } function validateSelect(obj,alt){ var rs=false; if(obj!=null){ for(i=0;i<obj.options.length;i++){ if(obj.options[i].selected==true){ return true; } } } alert(alt); return rs; } function validateEmail(email,alt,separator){ var mail=trim(email.value); if(mail=="") return; var em; var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/; if(separator==null){ if(myReg.test(email.value)==false){ alert(alt); email.focus(); return false; } } else{ em=email.value.split(separator); for(i=0;i0&&myReg.test(em[i])==false){ alert(alt); email.focus(); return false; } } } return true; } function validateForm(theForm){// 若验证通过则返回true var disableList=new Array(); var field = theForm.elements; // 将表单中的所有元素放入数组 for(var i = 0; i field[i].maxLength){ alert(lengthInfo); field[i].focus(); return false; } var validatorType=field[i].validatorType; if(validatorType!=null){//其它javascript var rs=true; if(validatorType=="javascript"){ eval("rs="+field[i].functionName+"()"); if(rs==false){ return false; } else{ continue; } } else if(validatorType=="disable"){//提交表单前disable的按钮 disableList.length++; disableList[disableList.length-1]=field[i]; continue; } else if(validatorType=="Date"){ rs=validateDate(theForm.elements(field[i].fieldName),field[i].format,field[i].errorInfo); } else if(validatorType=="DateGroup"){ rs=validateDateGroup(theForm.elements(field[i].year),theForm.elements(field[i].month),theForm.elements(field[i].day),field[i].errorInfo); } else if(validatorType=="Checkbox"){ rs=validateCheckbox(theForm.elements(field[i].fieldName),field[i].errorInfo); } else if(validatorType=="Radio"){ rs=validateRadio(theForm.elements(field[i].fieldName),field[i].errorInfo); } else if(validatorType=="Select"){ rs=validateSelect(theForm.elements(field[i].fieldName),field[i].errorInfo); } else if(validatorType=="Email"){ rs=validateEmail(theForm.elements(field[i].fieldName),field[i].errorInfo); } else{ alert("验证类型不被支持, fieldName: "+field[i].name); return false; } if(rs==false){ return false; } } else{//一般验证 if(empty==false){ var v = field[i].validator; // 获取其validator属性 if(!v) continue; // 如果该属性不存在,忽略当前元素 var reg=new RegExp(v); if(reg.test(field[i].value)==false){ alert(field[i].errorInfo); field[i].focus(); return false; } } } } for(i=0;i<disableList.length;i++){ disableList[i].disabled=true; } return true; }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值