Das Implementierungsprinzip und der Code von jQuery zum Abfangen einer Zeichenfolge mit der angegebenen Länge

Das Implementierungsprinzip und der Code von jQuery zum Abfangen einer Zeichenfolge mit der angegebenen Länge_jquery

WBOY

Freigeben： 2016-05-16 16:42:39

Original

1289 Leute haben es durchsucht

Der Vorgang des Abfangens einer Zeichenfolge einer bestimmten Länge wird häufig beim Erstellen von Websites verwendet, insbesondere bei Vorgängen wie Nachrichtenlisten.

Das Folgende ist ein Beispiel für das Abfangen von String-Code:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>jQuery截取字符串操作</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>

Nach dem Login kopieren

Der obige Code implementiert die Funktion zum Abfangen von Zeichenfolgen. Hier finden Sie eine kurze Einführung, wie dieser Effekt erzielt wird:

1. Umsetzungsprinzip:
Ermitteln Sie die Länge des Textes im Div und vergleichen Sie ihn dann mit der durch das Attributlimit angegebenen Länge. Wenn er die Länge überschreitet, verwenden Sie die angegebene Abfanglänge und ersetzen Sie ihn dann durch ....

2. Codekommentare:
1.jQuery.fn.limit=function(){} wird verwendet, um eine Instanzfunktion für jQuery zu erweitern. Das jQuery-Objekt kann diese Funktion aufrufen.
2.var self = $("div[limit]"), wird verwendet, um eine Sammlung von div-Objekten mit Limit-Attributen zu erhalten.
3.self.each(function(){ }, Sie können jedes Objekt in der div-Objektsammlung dazu bringen, die angegebene Funktion einmal zu durchlaufen und auszuführen.
4.var objString = $(this).text(), ruft den Textinhalt im div-Element ab, wobei sich dieser auf das aktuelle div bezieht, wenn die Funktion every() durchlaufen wird.
5.var objLength = $(this).text().length, ermittelt die Länge des Textinhalts im aktuellen Div.
6.var num = $(this).attr("limit"), ruft den limit-Attributwert im div ab, der hier als angegebene Zeichenlänge verwendet wird.
7.if(objLength > num){}: Wenn die Länge des Textinhalts im div größer als die angegebene Länge ist, wird der angegebene Code ausgeführt.
8.$(this).attr("title",objString), setzt den Wert des Titelattributs des Div auf den Inhalt im Div.
9.objString = $(this).text(objString.substring(0,num) "..."), fangen Sie die Zeichenfolge mit der angegebenen Länge ab und verwenden Sie Ellipsen, um den Überschuss zu ersetzen.