>웹 프론트엔드 >JS 튜토리얼 >jQuery는 지정된 length_jquery의 문자열 코드를 가로챕니다.

jQuery는 지정된 length_jquery의 문자열 코드를 가로챕니다.

WBOY
WBOY원래의
2016-05-16 16:39:011765검색

예, 문자열 코드를 가로채세요.

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

위 코드는 문자열 가로채기 기능을 구현한 것입니다.

1. 실시원칙

div의 텍스트 길이를 가져온 다음 속성 제한에 지정된 길이와 비교합니다. 길이를 초과하는 경우 지정된 길이를 가로채서 다음으로 바꿉니다....

2. 코드 주석

1.jQuery.fn.limit=function(){}은 jQuery용 인스턴스 함수를 확장하는 데 사용됩니다. jQuery 객체는 이 함수를 호출할 수 있습니다.
2.var self = $("div[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의 제한 속성 값을 가져옵니다.
7.if(objLength > num){}, div의 텍스트 콘텐츠 길이가 지정된 길이보다 길면 지정된 코드가 실행됩니다.
8.$(this).attr("title",objString)은 div의 title 속성 값을 div의 콘텐츠로 설정합니다.
9.objString = $(this).text(objString.substring(0,num) "..."), 지정된 길이 문자열을 가로채서 이를 초과하는 경우 타원으로 바꿉니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.