Le principe d'implémentation et le code de jQuery interceptant une chaîne de longueur

Le principe d'implémentation et le code de jQuery interceptant une chaîne de longueur_jquery spécifiée

WBOY

Libérer： 2016-05-16 16:42:39

original

1321 Les gens l'ont consulté

L'opération d'interception d'une chaîne d'une longueur spécifiée est largement utilisée dans la construction de sites Web, en particulier dans des opérations telles que les listes d'actualités.

Ce qui suit est un exemple d'interception de code de chaîne :

<!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>

Copier après la connexion

Le code ci-dessus implémente la fonction d'interception de chaînes. Voici une brève introduction à la manière dont il obtient cet effet :

1.Principe de mise en œuvre :
Récupérez la longueur du texte dans le div, puis comparez-la avec la longueur spécifiée par la limite d'attribut. Si elle dépasse la longueur, utilisez la longueur spécifiée par l'interception, puis remplacez-la par....

2. Commentaires du code :
1.jQuery.fn.limit=function(){} est utilisé pour étendre une fonction d'instance pour jQuery L'objet jQuery peut appeler cette fonction.
2.var self = $("div[limit]"), utilisé pour obtenir une collection d'objets div avec des attributs limit.
3.self.each(function(){ }, vous pouvez demander à chaque objet de la collection d'objets div de parcourir et d'exécuter la fonction spécifiée une fois.
4.var objString = $(this).text(), récupère le contenu du texte dans l'élément div, où this fait référence au div actuel lorsque la fonction each() traverse.
5.var objLength = $(this).text().length, obtient la longueur du contenu du texte dans le div actuel.
6.var num = $(this).attr("limit"), obtenez la valeur de l'attribut limite dans le div, qui est utilisée comme longueur de caractère spécifiée ici.
7.if(objLength > num){}, si la longueur du contenu du texte dans le div est supérieure à la longueur spécifiée, le code spécifié sera exécuté.
8.$(this).attr("title",objString), définit la valeur de l'attribut title du div sur le contenu du div.
9.objString = $(this).text(objString.substring(0,num) "..."), intercepte la chaîne de longueur spécifiée et utilise des points de suspension pour remplacer l'excédent.