Rumah > Artikel > hujung hadapan web > Prinsip pelaksanaan dan kod jQuery memintas rentetan length_jquery yang ditentukan

Prinsip pelaksanaan dan kod jQuery memintas rentetan length_jquery yang ditentukan

WBOYasal: 2016-05-16 16:42:391289semak imbas

Operasi memintas rentetan panjang yang ditentukan digunakan secara meluas dalam pembinaan laman web, terutamanya dalam operasi seperti senarai berita.

Berikut ialah contoh memintas kod rentetan:

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

Kod di atas melaksanakan fungsi memintas rentetan Berikut ialah pengenalan ringkas tentang cara ia mencapai kesan ini:

1. Prinsip pelaksanaan:
Dapatkan panjang teks dalam div, dan kemudian bandingkan dengan panjang yang ditentukan oleh had atribut Jika ia melebihi panjang, gunakan panjang pemintas yang ditentukan, dan kemudian gantikannya dengan....

2. Kod ulasan:
1.jQuery.fn.limit=function(){} digunakan untuk melanjutkan fungsi contoh untuk jQuery Objek jQuery boleh memanggil fungsi ini.
2.var self = $("div[limit]"), digunakan untuk mendapatkan koleksi objek div dengan atribut had.
3.self.each(function(){ }, anda boleh mendapatkan setiap objek dalam koleksi objek div untuk melintasi dan melaksanakan fungsi yang ditentukan sekali.
4.var objString = $(this).text(), dapatkan kandungan teks dalam elemen div, di mana ini merujuk kepada div semasa apabila fungsi each() melintasi.
5.var objLength = $(this).text().length, dapatkan panjang kandungan teks dalam div semasa.
6.var num = $(this).attr("limit"), dapatkan nilai atribut had dalam div, yang digunakan sebagai panjang aksara yang ditentukan di sini.
7.if(objLength > num){}, jika panjang kandungan teks dalam div lebih besar daripada panjang yang ditentukan, kod yang ditentukan akan dilaksanakan.
8.$(this).attr("title",objString), menetapkan nilai atribut tajuk div kepada kandungan dalam div.
9.objString = $(this).text(objString.substring(0,num) "..."), memintas rentetan panjang yang ditentukan dan gunakan elips untuk menggantikan lebihan.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pengenalan kepada window.returnValue contoh penggunaan_kemahiran javascriptArtikel seterusnya：Pengenalan kepada window.returnValue contoh penggunaan_kemahiran javascript

Artikel berkaitan

Lihat lagi