jQuery截取指定长度字符串代码


Posted in Javascript onAugust 21, 2014

例子,截取字符串代码。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery截取字符串操作---3water.com</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<style> 
* 
{ 
margin:0; 
padding:0; 
font-family:"宋体", Arial, Helvetica, sans-serif; 
} 
#best 
{ 
width:300px; 
height:200px; 
border:1px solid #ccc; 
margin:60px auto 0; 
line-height:1.6; 
font-size:14px; 
padding:10px 0 0 10px 
} 
.blank 
{ 
font-size:18px; 
font-weight:bold; 
text-align:center; 
padding:20px 
} 
</style> 
<script type="text/javascript"> 
jQuery.fn.limit=function(){ 
var self = $("div[limit]"); 
self.each(function(){ 
var objString = $(this).text(); 
var objLength = $(this).text().length; 
var num = $(this).attr("limit"); 
if(objLength > num){ 
$(this).attr("title",objString); 
objString = $(this).text(objString.substring(0,num) + "..."); 
} 
}) 
} 
$(function(){ 
$(document.body).limit(); 
}) 
</script> 
</head> 
<body> 
<div id="best"> 
<div limit="12">计算字串的长度长度长度长度</div> 
<div limit="10">这边有优化很公开这边</div> 
<div limit="12">这边有优化很公开长度长度很公开长度</div> 
<div limit="12">计算字长度长度</div> 
<div limit="10">这边有优化很边有优化很边有优化很边有优化很边有优化很</div> 
</div> 
</body> 
</html>

以上代码实现了截取字符串的功能.

一.实现原理

获取div中文本的长度,然后和通过和属性limit规定的长度进行对比,如果超出长度则使用截取指定的长度,后面用...替代。

二.代码注释

1.jQuery.fn.limit=function(){},用以为jQuery扩展一个实例函数,jQuery对象可以调用此函数。
2.var self = $("div[limit]"),用以获去具有limit属性的div对象集合。
3.self.each(function(){ },可以让获取的让div对象集合中的每一个对象遍历执行一次指定的函数。
4.var objString = $(this).text(),获取div元素中的文本内容,这里的this是指当each()函数进行遍历时当前div。
5.var objLength = $(this).text().length,获取当前div中文本内容的长度。
6.var num = $(this).attr("limit"),获取div中limit属性值,在这里用作了指定的字符长度。
7.if(objLength > num){},div中文本内容长度大于指定长度这执行指定的代码。
8.$(this).attr("title",objString),将div的title属性值设置为div中的内容。
9.objString = $(this).text(objString.substring(0,num) + "..."),截取指定长度字符串,超出的用省略号代替。

Javascript 相关文章推荐
判断一个变量是数组Array类型的方法
Sep 16 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 #Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 #Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 #Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 #Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 #Javascript
json字符串之间的相互转换示例代码
Aug 21 #Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 #Javascript
You might like
正则表达式语法
2006/10/09 Javascript
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
PHP 变量的定义方法
2010/01/26 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Python 数据结构之队列的实现
2017/01/22 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
实习计划书范文
2015/01/16 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
Python OpenCV快速入门教程
2021/04/17 Python