検索
ホームページウェブフロントエンドjsチュートリアルjQuery は指定された長さの文字列コードをインターセプトします_jquery

例、文字列コードをインターセプトします。

<!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]")、limit 属性を持つ div オブジェクトのコレクションを取得するために使用されます。
3.self.each(function(){ }、div オブジェクト コレクション内の各オブジェクトを取得して、指定された関数を 1 回走査して実行できます。
4.var objString = $(this).text()、div 要素内のテキスト コンテンツを取得します。ここで、this は each() 関数が通過するときに現在の div を参照します。
5.var objLength = $(this).text().length、現在の div 内のテキスト コンテンツの長さを取得します。
6.var num = $(this).attr("limit")、div内のlimit属性値を取得します。これは、ここで指定された文字長として使用されます。
7.if(objLength > num){}、div 内のテキスト コンテンツの長さが指定された長さより大きい場合、指定されたコードが実行されます。
8.$(this).attr("title",objString) は、div の title 属性の値を div 内のコンテンツに設定します。
9.objString = $(this).text(objString.substring(0,num) "...")、指定された長さの文字列をインターセプトし、それを超える場合は省略記号に置き換えます。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Go语言字符串截取方法详解Go语言字符串截取方法详解Mar 13, 2024 am 08:03 AM

Go语言字符串截取方法详解在Go语言中,字符串是不可变的字节序列,因此在进行字符串截取时需要使用一些方法来实现。字符串截取是获取字符串中的特定部分的一种常见操作,可以根据需求截取字符串的前几个字符、后几个字符或者从特定位置截取一定长度的字符。本文将详细介绍在Go语言中如何进行字符串截取,并提供具体的代码示例。使用切片实现字符串截取在Go语言中,可以使用切片来

MySQL中如何使用ROUND函数截取小数位数MySQL中如何使用ROUND函数截取小数位数Jul 13, 2023 pm 09:21 PM

MySQL中如何使用ROUND函数截取小数位数在MySQL中,可以使用ROUND函数来截取小数的位数。ROUND函数可以把一个数字四舍五入到指定的小数位数。下面将为您详细介绍ROUND函数的使用方法,并提供代码示例。语法:ROUND(X,D)X表示要四舍五入的数字,D表示要保留的小数位数。使用ROUND函数截取小数位数的示例:假设有一个表格名为produc

PHP中文字符串截取技巧:告别mb_substr()PHP中文字符串截取技巧:告别mb_substr()Mar 15, 2024 pm 12:18 PM

在PHP开发中,经常会遇到需要对中文字符串进行截取的情况。传统上,我们通常会使用mb_substr()函数来处理中文字符的截取,但其性能较差且不够易读。本文将介绍一些新的中文字符串截取技巧,让我们告别mb_substr(),提高代码效率和可读性。使用正则表达式截取中文字符串利用正则表达式来截取中文字符串是一个高效且简洁的方法。我们可以通过正则表达式匹配中文字

UniApp实现图片上传与裁剪的实现方法UniApp实现图片上传与裁剪的实现方法Jul 06, 2023 am 10:01 AM

UniApp是一种基于Vue.js的跨平台应用开发框架,可以快速地开发出同时适用于iOS和Android平台的应用程序。在UniApp中,实现图片上传与裁剪是一个常见的需求。本文将介绍在UniApp中如何实现图片上传和裁剪的方法,并提供相应的代码示例。一、图片上传的实现方法:使用uni.uploadFile()方法进行图片上传。首先,需要在uni.uploa

如何优化Java开发中的字符串截取拼接性能如何优化Java开发中的字符串截取拼接性能Jun 29, 2023 pm 06:04 PM

如何优化Java开发中的字符串截取拼接性能在日常的Java开发中,字符串的截取和拼接是非常常见的操作。然而,由于字符串在Java中的不可变性质,频繁的字符串截取和拼接操作可能会导致性能的下降。为了提高Java开发中的字符串截取和拼接性能,我们可以采取以下几种优化策略。使用StringBuilder或StringBuffer进行拼接:在Java中,String

Java 12中的新特性:如何使用新的String API进行字符串的截取与连接Java 12中的新特性:如何使用新的String API进行字符串的截取与连接Jul 31, 2023 pm 12:55 PM

Java作为一种广泛使用的编程语言,经过不断的发展和更新,每一个新版本都会引入一些新的特性和功能,以提升开发者的编码效率。Java12作为最新版本中的特点之一是引入了新的StringAPI,使得字符串的截取与连接变得更加便捷和高效。在以往的版本中,字符串截取和连接的操作需要通过调用substring()和"+"操作符来实现,但这些方法在处理大量字符串操作

快速掌握Go语言中的字符串截取功能快速掌握Go语言中的字符串截取功能Mar 12, 2024 pm 06:15 PM

快速掌握Go语言中的字符串截取功能Go语言是一种在近年来备受关注的编程语言,它具有简洁、高效的特点,受到越来越多开发者的青睐。在Go语言中,字符串处理是非常常见的操作,而字符串截取功能是其中的重要部分。本文将通过具体的代码示例,带你快速掌握Go语言中的字符串截取功能。1.基本的字符串截取Go语言中的字符串可以通过索引进行截取,代码示例如下:package

PHP函数介绍—array_slice(): 从数组中截取一部分PHP函数介绍—array_slice(): 从数组中截取一部分Jul 25, 2023 am 11:01 AM

PHP函数介绍—array_slice():从数组中截取一部分在PHP开发中,经常需要对数组进行操作。PHP提供了许多强大的数组处理函数,其中一个非常实用的函数是array_slice()。在本文中,我们将介绍array_slice()函数的用法,并提供一些代码示例来帮助读者更好地理解。array_slice()函数用于从数组中截取一部分元素,并返回一个新

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール