jQuery截取字数用点点点显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery根据设置的字数截断过长标题并在末尾加上“…”</title>
<script type="text/javascript" src="../../jquery/jquery.js"></script>

</head>

<body>
<div limit="5">计算字串的长度长度长度长度</div>
<div limit="5">计算字长度长度</div>
<li limit="5">这边有优化很公开这边</li>
<li limit="5">这边有优化很公开这边这边有优化很公开这边</li>
<dt limit="5">这边有优化很公开长度长度很公开长度</dt>
<dd limit="5">这边有优化很边有优化很边有优化很边有优化很边有优化很</dd>

<script type="text/javascript">
function limit(){
//这里的div去掉的话,就可以运用li和其他元素上了,否则就只能div使用。
var self = $("[limit]");
self.each(function(){
var objString = $(this).text();
var objLength = $(this).text().length;
var num = $(this).attr("limit");
if(objLength > num){
//这里可以设置鼠标移动上去后显示标题全文的title属性,可去掉。
$(this).attr("title",objString);
objString = $(this).text(objString.substring(0,num) + "...");
}
})
}
limit();
</script>
</body>
</html>

时间: 2024-11-14 11:59:15

jQuery截取字数用点点点显示的相关文章

jQuery截取字符串、日期字符串转Date、获取html中的纯文本

jQuery截取字符串.日期字符串转Date.获取html中的纯文本. var com = com || {}; (function ($, com) { /* * 截取字符串 * @param str:要截取的字符串 * @param len:保留多少字符 * @param symbol:超过之后字符串末端要添加的字符 */ com.cutStr = function (str, len, symbol) { if (symbol == undefined) { symbol = "...&q

jQuery截取指定长度字符串

例子,截取字符串代码. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery截取字符串操作---www.jbxue.com</title> <script type="text/javascript"

JQuery实现密码有短暂的显示过程和实现 input hint效果

JQuery实现密码有短暂的显示过程和实现 input hint效果 实现目的 这几天做项目的时候,客户要求在文本框输入密码的时候,要求密码有短暂的显示过程,如下图: 问题思考 首先解决的是如何在input框里实现类似于android中hint属性,html5中添加placeholder,但是现在不是html5,怎么办? 解决办法 以输入用户名为例: <li> <input name="textfield" type="text" id="

基于jQuery左侧小图滚动右侧大图显示代码

今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="caseImg03 w1002"> <div class="slideCase03"> <div class=&q

jquery 页眉单行信息滚动显示

JSP: 以下是控制滚动的样式,将滚动的内容查询出来,放在一个div 或者别的容器里面,我这里使用的是<dt> <style> #newCglist{width:300px;height:14px;line-height:14px;overflow:hidden} #newCglist li{height:14px;padding-left:10px;} </style> 以下是滚动内容展示的容器 <dt class="positionrel"

bobo JQuery实现Ajax 根据商品名称自动显示价格

数据库字段:Id(主键,自增),Name(商品名称),Price(商品单价) 添加数据集DataSetProducts ,添加方法:GetDataByName() ----->对应SQL: SELECT id, name, price FROM dbo.T_Productwhere name = @name 新建一般处理程序:GetPrice.ashx 代码: using System;using System.Collections.Generic;using System.Linq;usin

jquery小例子,点击显示个数

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 7 </hea

jQuery+Ajax+PHP+Mysql实现分页显示数据

css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } #container .pagination ul li.inactive, #container .pagination ul li.inactive:hover{ background-color:#ededed; color:#bababa; border:1px solid #bababa; curs

j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt