JavaScriptは文字通りのスクリプト言語であり、サポートタイプが組み込まれた動的で弱いプロトタイプベースの言語です。その通訳はJavaScriptエンジンと呼ばれます。ブラウザの一部であり、クライアントスクリプト言語で広く使用されています。最初にHTML(標準のユニバーサルマークアップ言語の下のアプリケーション)Webページで使用され、HTML Webページに動的関数を追加しました。
この記事では、開発を促進するために、すべての人のための5つの実用的なJavaScriptコードをまとめました。
1.日付が有効かどうかを判断します
JavaScriptに含まれる日付関数はまだ単純すぎており、実際のプロジェクトで異なる日付形式を解析して判断するニーズを満たすことは困難です。 jQueryには、日付関連の処理を簡単にするためのサードパーティライブラリもありますが、巨大なサードパーティライブラリを導入せずに非常に単純な機能が必要になる場合があります。現時点では、次の日付検証コードを使用できます。これにより、日付形式をカスタマイズして日付の有効性を確認できます。
function isvaliddate(value、userformat){// default formatが提供されていない場合、userformat = userformat || 'mm/dd/yyyy'; // //月、日、年の文字を除外してカスタムデリミターを見つけますvar delimiter =/[^mdy ]/.exec(userformat) [0]; //月、日、年に配列を作成する//インデックスVar format = userformat.split(delimiter)によるフォーマット順序がわかります。 //ユーザー日付から配列を作成するvarthedate = value.split(delimiter);関数isdate(日付、形式){var m、d、y、i = 0、len = format.length、f; for(i; i <len; i ++){f = format [i]; if(/m/.test(f))m = date [i]; if(/d/.test(f))d = date [i]; if(/y/.test(f))y = date [i]; } return(m> 0 && m <13 && y && y.length === 4 && d> 0 && //それが月の有効な日であるかどうかを確認しますd <=(new Date(y、m、0))。getDate()); } return isdate(thedate、theformat);}使い方:
11月に31日間ないため、次の呼び出しがfalseを返します
isvaliddate( 'dd-mm-yyyy'、'31/11/2012 ')
2。一連の要素の最大幅または高さを取得します
次の機能は、動的なレイアウトを実行する必要がある開発者にとって非常に便利です。
var getmaxheight = function($ elms){var maxheight = 0; $ elms.each(function(){//場合によっては、bar height = $(this).height(); if(height> maxheight){maxheight = height;}})を代わりにbar height = $(this).height();を使用する場合があります。 maxheightを返します;};使い方:
$(elements).height(getmaxheight($(elements)));
3。テキストを強調表示します
ハイライトテキストの機能を実装できるJQueryのサードパーティライブラリがたくさんありますが、この関数を実装するには、次の小さなjavaScriptコードを使用することを好みます。それは非常に短く、私のニーズに応じて柔軟に修正することができ、自分でハイライトスタイルを定義できます。次の2つの機能は、プラグインを強調表示する独自のテキストを作成するのに役立ちます。
関数ハイライト(テキスト、ワード、タグ){//タグが提供されていない場合のデフォルトタグタグ=タグ|| 'スパン'; var i、len = words.length、re; for(i = 0; i <len; i ++){//すべての一致を強調するグローバルなregex re = new regexp(words [i]、 'g'); if(re.test(text)){text = text.replace(re、 '<' + tag + '> $&</' + tag + '>'); }} return text;}また、ハイライト付き関数も必要です。
function unhighlight(text、tag){//タグが提供されていない場合はデフォルトタグ= tag || 'スパン'; var re = new regexp( '(<'+tag+'。+?> | <//'+tag+'>)'、 'g'); text.replace(re、 '');}を返す使い方:
$( 'p')。html(highlight($( 'p')。html()、// text ['foo'、 'bar'、 'baz'、 'hello world']、//「強い」// customタグを強調する単語またはフレーズのリスト);
4。テキストモーション効果
すべての単語が移動できるように、テキストの段落に動きを追加したい場合があります。次のjQueryプラグインコードを使用して、この効果を実現できます。もちろん、より良い結果を達成するには、CSS3トランジションスタイルを組み合わせる必要があります。
$ .fn.animateText = function(delay、klass){var text = this.text(); var letthes = text.split( ''); return this.each(function(){var $ this = $(this); $ this.html(text.replace(/./ g、 '<span> $&</span>')); $ this.find( 'span.letter')。各(function(i、el){setimeout(function(){$(){$(); deay * i}; });使い方:
$( 'p')。animateText(15、 'foo');
5。要素を1つずつ非表示にします
次のjQueryプラグインは、設定したステップの長さ(間隔時間)に応じて、要素のグループを1つずつ非表示にできます。リロードリスト要素で使用すると、良い結果が得られます。
$ .fn.fadeall = function(ops){var o = $ .extend({delay:500、//要素間の遅延速度:500、//アニメーション速度容易さ: 'swing' // other exceedプラグイン}、ops); var $ el = this; for(var i = 0、d = 0、l = $ el.length; i <l; i ++、d+= o.delay){$ el.eq(i).delay(d).fadein(o.speed、o.ease); } $ elを返します;}使い方:
$(elements).fadeall({delay:300、speed:300});
上記は、これらの実用的なJavaScriptコードスニペットのほんの一部であり、誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。