当前位置:  编程技术>WEB前端
本页文章导读:
    ▪截断单行文本      如果不想由于单行文本过长而影响布局,通常会截取文本的一部分进行显示,并且在其末尾显示省略号。要实现文本截断的效果,可使用配合使用white-space、overflow与text-overflow属性,具体样式.........
    ▪javascript正则表达式      正则表达式可以:l 测试字符串的某个模式。例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。l 替换.........
    ▪jq 、xml 省市级联动      复习下xml以及ajax,$(function(){$.ajax({type:"GET",//ajax传递方法url:"city.xml",//文件地址dataType:"xml",//文件类型error:function(){alert("读取文件失败!")},//错误信息success:function(xml){$(xml).find("province").each(functio.........

[1]截断单行文本
    来源:    发布时间: 2013-11-06

如果不想由于单行文本过长而影响布局,通常会截取文本的一部分进行显示,并且在其末尾显示省略号。

要实现文本截断的效果,可使用配合使用white-space、overflow与text-overflow属性,具体样式代码如下所示。

/* 根据需要具体设置 */
width: 135px;
/* 强制文本在一行显示 */
white-space: nowrap;
/* 当文本溢出时隐藏 */
overflow: hidden;
/* 在文本后显示省略号,如果不想显示省略号,应使用clip属性值 */
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;

本文链接


    
[2]javascript正则表达式
    来源:    发布时间: 2013-11-06

正则表达式可以:

l 测试字符串的某个模式。例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。

l 替换文本。可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字。

l 根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字。

 

正则表达式语法:

一个正则表达式就是由普通字符(例如字符a到z)以及特殊字符(称为元字符)组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达作为一个模板,将某个字符模式与所搜索的字符串进行匹配。

 

创建正则表达式:

Var re=new RegExp();//RegExp是一个对象

//这样没有任何效果,需要将正则表达式的内容作为字符串传递进去

Re=new RegExp("a");//最简单的正则表达式,将匹配字母a

Re=new RegExp("a","i");//第二个参数,表示匹配时不分大小写

 

 

Ø RegExp构造函数第一个参数为正则表达式的文本内容,而第一个参数则为可选项标志。标志可以组合使用:

 

l   "g"(全文查找)

l   "i"(忽略大小写)

l   "m"(多行查找)

 

如:

Var re=new RegExp("a","gi");//匹配所有的a或A

 

Ø 正则表达式还有另一种正则表达式字面量的声明方式

Var re=/a/gi;

 

正则表达式对像方法

l "test",返回一个Boolean值,它指出在被查找的字符串中是否存在模式。如果存在则返回true,否则就返回false。

l "exec",用正则表达式模式在字符串中运行查找,并返回包含该查找结果的一个数组。

l "compile",把正则表达式编译为内部格式,从而执行得更快。

 

正则表达式对像的属性

l "source",返回正则表达式模式的文本的复本,只读。

l "lastIndex",返回字符位置,它是被查找字符串中下次成功匹配的开始位置。

l "$1...$9",返回九个在模式匹配期间找到的、最近保存的部分。只读。

l "input ($_)",返回执行规范表述查找的字符。只读。

l "lastMatch ($&)",返回任何正则表达式搜索过程中的最后匹配的字符。只读。

l "lastParen ($+)",如果有的话,返回任何正则表达式查找过程中最后括的子匹配。只读。

l "rightContext ($'),"返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符。只读。

 

String对像一些和正则表达式相关的方法

l "match",找到一个或多个正则表达式的匹配。

l "replace",替换与正则表达式匹配的子串。

l "search",检索与正则表达式相匹配的值。

l "split",把字符串分割为字符串数组。

 

正则表达式高级篇

无字符

使用元字符注意事项:元字符是正则表达式的一部分,当我们要匹配正则表达式本身时,必须对这些元字符转义。下面是正则表达式用到的所有元字符:

(  [  {  \  ^  $  |  )  ?  *  +  .

 

Ø 使用RegExp构造函数与使用正则表达式字面量创建正则表达式注意点

 

Var str="\?";

Alert(str);//只会输出?

Var re=/\?/;//将匹配?

Alert(re.test(str));//true

Re=new RegExp("\?");出错,因为这相当于re=/\?/

Re=new RegExp("\\?");正确,将匹配?

Alert(re.test(str));//true

² 注意:既然双重转义这么不友好,所以还是用正则表达式字面量的声明方式。

 

贪婪量词与惰性量词

l 用贪婪量词进行匹配时,它首先会将整会字符串当成一个匹配,如果匹配的话就退出,如果不匹配,就截去最后一个字符进行匹配,如果不匹配,继续将最后一个字符截去进行匹配,直到有匹配为止。直到现在我们遇到的量词都是贪婪量词。

l 用贪婪量词进行匹配时,它首先将第一个字符当成一个匹配,如果成功则退出,如果失败,则测试前两个字符,依此增加,直到遇到合适的匹配为止。

 

分组与非捕获性分组

Re=/abc{2}/;//将匹配abcc

Re=/(abc){2}/;/将匹配abcabc

//上面的分组都是捕获性分组

Str="abcabc###";

Arr=re.exec(str);

Alert(arr[1]);//abc

//非捕获性分组(?:)

Re=/(?:abc){2}/;

Arr=re.exec(str);

Alert(arr[1]);//unefined

候选(也就是所说的“或”)

Re=/^a|bc$/;//将匹配开始位置的a或结束位置的bc

Str="add";

Alert(re.test(str));//true

Re=/^(a|bc)$/;//将匹配a或bc

Str="bc";

Alert(re.test(str));//true

 

电子邮箱正则表达式:

用户名只能包含字

    
[3]jq 、xml 省市级联动
    来源:    发布时间: 2013-11-06

复习下xml以及ajax,

$(function(){
$.ajax({
type:"GET",//ajax传递方法
url:"city.xml",//文件地址
dataType:"xml",//文件类型
error:function(){alert("读取文件失败!")},//错误信息
success:function(xml){
$(xml).find("province").each(function(){
$("<option></option>").attr("value",$(this).attr("name")).html($(this).attr("name")).appendTo("#shi");
})
}
});
$("#shi").change(function(){
$("#city").empty();
$.ajax({
type:"GET",
url:"city.xml",
dataType:"xml",
success:function(xml){
var city = $(xml).find("province[name='" + $("#shi").val() + "']").attr("cities").split(" ");
$.each(city,function(i){
$("<option></option>")
.attr("value",city[i])
.html(city[i])
.appendTo("#city")
})
}

})
})
});

 

 

xml文件:

<?xml version="1.0" encoding="gb2312"?>
<china>
<province name="全选" cities="全选"/>
<province name="安徽" cities="全选 安庆 蚌埠 巢湖 池州 滁州 阜阳 合肥 淮北 淮南 黄山 六安 马鞍山 宿州 铜陵 芜湖 宣城 亳州"/>
<province name="北京" cities="全选 北京"/>
<province name="福建" cities="全选 福州 龙岩 南平 宁德 莆田 泉州 三明 厦门 漳州"/>
<province name="甘肃" cities="全选 白银 定西 甘南藏族自治州 嘉峪关 金昌 酒泉 兰州 临夏回族自治州 陇南 平凉 庆阳 天水 武威 张掖"/>
<province name="广东" cities="全选 潮州 东莞 佛山 广州 河源 惠州 江门 揭阳 茂名 梅州 清远 汕头 汕尾 韶关 深圳 阳江 云浮 湛江 肇庆 中山 珠海"/>
<province name="广西" cities="全选 百色 北海 崇左 防城港 桂林 贵港 河池 贺州 来宾 柳州 南宁 钦州 梧州 玉林"/>
<province name="贵州" cities="全选 安顺 毕节 贵阳 六盘水 黔东南苗族侗族自治州 黔南布依族苗族自治州 黔西南布依族苗族自治州 铜仁 遵义"/>
<province name="海南" cities="全选 白沙黎族自治县 保亭黎族苗族自治县 昌江黎族自治县 澄迈县 定安县 东方 海口 乐东黎族自治县 临高县 陵水黎族自治县 琼海 琼中黎族苗族自治县 三亚 屯昌县 万宁 文昌 五指山 儋州"/>
<province name="河北" cities="全选 保定 沧州 承德 邯郸 衡水 廊坊 秦皇岛 石家庄 唐山 邢台 张家口"/>
<province name="河南" cities="全选 安阳 鹤壁 济源 焦作 开封 洛阳 南阳 平顶山 三门峡 商丘 新乡 信阳 许昌 郑州 周口 驻马店 漯河 濮阳"/>
<province name="黑龙江" cities="全选 大庆 大兴安岭 哈尔滨 鹤岗 黑河 鸡西 佳木斯 牡丹江 七台河 齐齐哈尔 双鸭山 绥化 伊春"/>
<province name="湖北" cities="全选 鄂州 恩施土家族苗族自治州 黄冈 黄石 荆门 荆州 潜江 神农架林区 十堰 随州 天门 武汉 仙桃 咸宁 襄樊 孝感 宜昌"/>
<province name="湖南" cities="全选 常德 长沙 郴州 衡阳 怀化 娄底 邵阳 湘潭 湘西土家族苗族自治州 益阳 永州 岳阳 张家界 株洲"/>
<province name="吉林" cities="全选 白城 白山 长春 吉林 辽源 四平 松原 通化 延边朝鲜族自治州"/>
<province name="江苏" cities="全选 常州 淮安 连云港 南京 南通 苏州 宿迁 泰州 无锡 徐州 盐城 扬州 镇江"/>
<province name="江西" cities="全选 抚州 赣州 吉安 景德镇 九江 南昌 萍乡 上饶 新余 宜春 鹰潭"/>
<province name="辽宁" cities="全选 鞍山 本溪 朝阳 大连 丹东 抚顺 阜新 葫芦岛 锦州 辽阳 盘锦 沈阳 铁岭 营口"/>
<province name="内蒙古" cities="全选 阿拉善盟 巴彦淖尔盟 包头 赤峰 鄂尔多斯 呼和浩特 呼伦贝尔 通辽 乌海 乌兰察布盟 锡林郭勒盟 兴安盟"/>
<province name="宁夏" cities="全选 固原 石嘴山 吴忠 银川"/>
<province name="青海" cities="全选 果洛藏族自治州 海北藏族自治州 海东 海南藏族自治州 海西蒙古族藏族自治州 黄南藏族自治州 西宁 玉树藏族自治州"/>
<province name="山东" cities="全选 滨州 德州 东营 菏泽 济南 济宁 莱芜 聊城 临沂 青岛 日照 泰安 威海 潍坊 烟台 枣庄 淄博"/>
<province name="山西" cities="全选 长治 大同 晋城 晋中 临汾 吕梁 朔州 太原 忻州 阳泉 运城"/>
<province name="陕西" cities="全选 安康 宝鸡 汉中 商洛 铜川 渭南 西安 咸阳 延安 榆林"/>
<province name="上海" cities="全选 上海"/>
<province name="四川" cities="全选 阿坝藏族羌族自治州 巴中 成都 达州 德阳 甘孜藏族自治州 广安 广元 乐山 凉山彝族自治州 眉山 绵阳 南充 内江 攀枝花 遂宁 雅安 宜宾 资阳 自贡 泸州"/>
<province name="天津" cities="全选 天津"/>
<province name="西藏" cities="全选 阿里 昌都 拉萨 林芝 那曲 日喀则 山南"/>
<province name="新疆" cities="全选 阿克苏 阿拉尔 巴音郭楞蒙古自治州 博尔塔拉蒙古自治州 昌吉回族自治州 哈密 和田 喀什 克拉玛依 克孜勒苏柯尔克孜自治州 石河子 图木舒克 吐鲁番 乌鲁木齐 五家渠 伊犁哈萨克自治州"/>
<province name="云南" cities="全选 保山 楚雄彝族自治州 大理白族自治州 德宏傣族景颇族自治州 迪庆藏族自治州 红河哈尼族彝族自治州 昆明 丽江 临沧 怒江傈傈族自治州 曲靖 思茅 文山壮族苗族自治州 西双版纳傣族自治州 玉溪 昭通"/>
<province name="浙江" cities="全选 杭州 湖州 嘉兴 金华 丽水 宁波 绍兴 台州 温州 舟山 衢州"/>
<province name="重庆" cities="全选 重庆"/>
</china>

本文链接


    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr... iis7站长之家
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3