ホームページ > 記事 > ウェブフロントエンド > 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) "...")、指定された長さの文字列をインターセプトし、それを超える場合は省略記号に置き換えます。