search

Home >Web Front-end >JS Tutorial >jQuery intercepts string code of specified length_jquery

jQuery intercepts string code of specified length_jquery

WBOY
WBOYOriginal
2016-05-16 16:39:011768browse

Example, intercept string code. 

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

The above code implements the function of intercepting strings.

1. Implementation principle

Get the length of the text in the div, and then compare it with the length specified by the attribute limit. If it exceeds the length, use the interception specified length, and then replace it with....

2. Code comments

1.jQuery.fn.limit=function(){} is used to extend an instance function for jQuery. The jQuery object can call this function.
2.var self = $("div[limit]"), used to obtain a collection of div objects with limit attributes.
3.self.each(function(){ }, you can get each object in the div object collection to traverse and execute the specified function once.
4.var objString = $(this).text(), get the text content in the div element, where this refers to the current div when the each() function traverses.
5.var objLength = $(this).text().length, get the length of the text content in the current div.
6.var num = $(this).attr("limit"), get the limit attribute value in the div, which is used as the specified character length here.
7.if(objLength > num){}, the length of the text content in the div is greater than the specified length, this executes the specified code.
8.$(this).attr("title",objString), sets the value of the title attribute of the div to the content in the div.
9.objString = $(this).text(objString.substring(0,num) "..."), intercept the specified length string, and replace it with ellipses if it exceeds.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：wap picture scrolling special effects without css3 elements pure js script writing_javascript skillsNext article：wap picture scrolling special effects without css3 elements pure js script writing_javascript skills

Related articles

See more