コードを改善するための jQuery テクニックを理解する (個人的には、jquery マニュアルが非常に優れていると思います)_jquery

2. jQuery ラッパー セットに特定の要素が含まれているかどうかをテストします。
jQuery ラッパー セットに特定の要素が含まれているかどうかをテストしたい場合は、最初の要素が存在するかどうかを確認してください。

コードをコピーします コードは次のとおりです:

if($(selector)[0]){.. . }
// または次のように
if($(selector).length){...}

この例を見てみましょう:

コードをコピーします コードは次のとおりです:

//ページに次の HTML コードがある場合
< ;ul id="shopping_cart_items ">

アイテム X

アイテム Y

< input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z

...
//セレクターに一致する 2 つの
// 入力フィールドがあるため、この if 条件は true を返します。そのため、 コードは
if を実行します。 ($( '#shopping_cart_items input.in_stock')[0]){}

3. jquery.org から最新バージョンの jQuery を読み取ります
このコードを使用できますjQueryの最新バージョンのコードファイルを読み込みます。


このメソッドを使用して、最新バージョンのjQuery フレームワーク もちろん、次のコードを使用して、ajax.googleapis.com から同じ最新バージョンの jQuery を呼び出すこともできます:


4. データを保存する
データ メソッドを使用して保存を回避するフロントエンド開発者の中には、HTML 属性を使用してデータを保存することを好む人もいます。

コードをコピーします コードは次のとおりです。 :

$('selector').attr('alt', 'data being storage');
//後で次のようにデータを読み取ることができます:
$(' selector').attr('alt');

データを保存するためのパラメータ名として「alt」属性を使用することは、実際には HTML のセマンティックではありません。ページ内の要素:

コードをコピー コードは次のとおりです:

$(' selector').data('パラメータ名', '保存するデータ');
//次に、次のようにデータを取得します。
$('selector').data('parameter'); >

このデータ メソッドを使用すると、データ パラメーターを自分で明確に定義でき、よりセマンティックで柔軟なデータ情報をページ上の任意の要素に保存できます。 data() メソッドとremoveData() メソッドについて詳しく知りたい場合は、jQuery 公式の説明を読むことができます。

このメソッドの古典的な応用例は、入力フィールドにデフォルト値を与え、それをクリアすることです。フォーカス時:
HTML 部分:

コードをコピー コードは次のとおりです:

JavaSript部分:

コードをコピー コードは次のとおりです:

$(function() {
//clear class で入力フィールドを取り出します
//(注: 「clear Once」は 2 つのクラスをクリアして 1 回です)
$(' #testform input.clear').each(function(){
//data メソッドを使用してデータを保存します
$(this).data( "txt", $.trim($(this).val( ) ) );
}).focus(function(){
// フォーカスを取得するときにフィールドの値がデフォルト値と同じかどうかを判断し、同じであればクリアします
if ( $.trim($(this)) .val()) === $(this).data("txt") ) {
$(this).val(""); }
}).blur(function() {
// クラスをクリアしたフィールドにブラー時間を追加してデフォルト値に戻します
// ただし、クラスが 1 回の場合は無視します
if ( $.trim($(this).val()) = == "" && !$(this).hasClass("once") ) {
//保存されたデータを復元します
$(this)。 val( $(this).data("txt") );
}
});


5. jQuery マニュアルを手元に置いてください。 🎜> ほとんどの人は、どれだけ優れていても、プログラミングの詳細をすべて覚えるのは困難です。また、ほとんどのプログラマーは、特定のプログラミング言語についても無頓着なので、関連するマニュアルを印刷したり、デスクトップに置いていつでも参照できるようにすることができます。プログラミング効率が確実に向上します。

oscarotero jquery 1.3
(
壁紙バージョン) 6. FireBug コンソールで jQuery を記録する
FireBug は私のお気に入りの 1 つです。ブラウザ拡張ツールと同様に、このツールを使用すると、ビジュアル インターフェイスで現在のページの HTML CSS JavaScript をすばやく理解し、このツールで即時開発を完了できます。 jQuery または JavaScript 開発者として、FireFox はJavaScript コードのログ
もサポートされています。
FireBug コンソールに書き込む最も簡単な方法は次のとおりです: console.log("hello world")



必要に応じていくつかのパラメータを記述することもできます:

console.log(2,4,6,8,"foo",bar)
あなたもjQuery オブジェクトをコンソールに記録するための小さな拡張機能を作成できます:

コードをコピーします コードは次のとおりです: jQuery.fn.log = function (msg) {

console.log("%s: %o", msg, this);

これを返します;

この拡張機能では、.log() メソッドを直接使用して、現在のオブジェクトをコンソールに記録できます。

コードをコピー

コードは次のとおりです: $('#some_div').find ('li .source > input:checkbox') .log("チェックを外すソース") .removeAttr("checked");

7. ID セレクターを常に使用します。
jQuery を使用すると、class 属性を使用して DOM 要素を選択するのが非常に簡単であることがわかります。それにも関わらず、代わりにクラス セレクターの使用をできるだけ少なくし、できるだけ高速に実行される ID セレクターを使用することをお勧めします (IE ブラウザーでクラス セレクターを使用すると、DOM ツリー全体を走査した後に一致するクラス パッケージ セットが返されます)。 DOM 自体には「自然な」 getElementById メソッドがありますが、クラスにはそれがないため、ID セレクターの方が高速です。したがって、クラス セレクターを使用すると、Web ページの DOM 構造が十分に複雑な場合、ブラウザーは DOM 全体を走査することになり、これらのクラス セレクターだけでページの速度がどんどん遅くなります。この単純な HTML コードを見てみましょう:

コードをコピーします

コードは次のとおりです:

jQuery

... <🎜; > ...

/ クラスを使用して送信ボタンを呼び出すと、絶対 ID セレクターを使用するよりもはるかに時間がかかります。
var main_button = $('#main .button'); >

8. jQuery チェーンを上手に活用する
jQuery チェーンを使用すると、強力な操作を簡潔に記述できるだけでなく、複数のコマンドをパッケージ セットに直接適用できるため、開発効率が向上します。梱包セットを再計算します。したがって、次のように記述する必要はなくなりました:




コードをコピーします

コードは次のとおりです:

説明:

$('#shopping_cart_items input.text').css( 'border', '3px 破線黄色');
$('#shopping_cart_items input.text').css('background-color', 'red');
$('#shopping_cart_items input.text') ).val("text updated");

代わりに、jQuery チェーンを使用して簡単な操作を完了できます:

コードをコピー コードは次のとおりです:

var input_text = $('#shopping_cart_items input.text');
input_text.css('border', '3px 破線) yellow') ;
input_text.css('background-color', 'red');

//チェーンと同じ:
var input_text = $('#shopping_cart_items input.text');
input_text
.css('border', '3px 破線黄色')
.css('background-color', 'red')
.val("text updated");
[html]
9. jQuery 関数を $(window).load イベントにバインドする
ほとんどの jQuery サンプルやチュートリアルでは、jQuery コードを次のようにバインドするように指示されています。 $(document).ready イベント。ほとんどの場合、$(document).ready イベントは問題ありませんが、その解析シーケンスは、ドキュメントの準備ができ、単一ドキュメント内の画像などのオブジェクトがダウンロードされるときに開始されます。したがって、$(document).ready イベントを使用しても、一部の視覚効果やアニメーション、ドラッグ、隠し画像の先読みなど、特定の時点で期待する結果が必ずしも得られるとは限りません。 .load イベント 目的のコードを実行する前に、ドキュメント全体の準備が整うまで待っても安全です。
[code]
$(window).load(function(){
// ページの準備が完了した後に実行するコードをここに記述します

10. jQuery チェーンを使用してセレクターを制限し、コードをより簡潔かつエレガントにします
JavaScript はチェーン構造と改行をサポートしているため、コードは次のように記述できます。まず、要素を上に移動します。クラスを 1 つ削除します。同じ要素に別のクラスを追加します:

コードをコピー コードは次のとおりです: $('#shopping_cart_items input.in_stock')

.removeClass('in_stock')

.addClass('3-5_days');


もっと簡単にしたい場合、チェーン構造をサポートする jQuery 関数を作成できます:

コードをコピーします コードは次のとおりです: $.fn.makeNotInStock = function() {

return $(this).removeClass('in_stock').addClass('3-5_days');

}
$('# shopping_cart_items input.in_stock').makeNotInStock().log();


11. コールバック関数を使用してエフェクトを同期する
イベントまたはアニメーション エフェクトが次々に呼び出されるようにする場合イベントが run の場合は、コールバック関数を使用する必要があります。これらのアニメーション効果の背後にコールバック関数をバインドできます: slideDown(speed, [callback] ) 例: $('#sliding').slideDown('slow', function(){… この例をプレビューするには、ここをクリックしてください。

コードをコピーします コードは次のとおりです。

div.button {background: #cfd ; マージン: 3px;

テキスト整列: 中央; カーソル: 2px アウトセット;
display: none; }
$(document).ready(function(){
// jQuery のクリック イベントを使用して視覚効果を変更し、スライド効果を有効にします
$("div .button" ).click(function () {
//div.button が押されたときの効果のように見えます
$(this).css({ borderStyle:"inset",cursor:"wait" } );
//#sliding はアクションの完了後にフェードアウトし、フェードイン効果をオンにします
//完了するとスライドアップ
$('#sliding').slideDown('slow' , function(){
$('#sliding').slideUp('slow', function(){
//フェード効果が完了すると、ボタンの CSS プロパティが変更されます
$('div.button').css ({ borderStyle:"outset", カーソル:"auto" })
});


12 .カスタム セレクターの使用方法を学習します
jQuery を使用すると、コードをより簡潔にするために CSS セレクターに基づいてカスタム セレクターを定義できます:

コードをコピー


コードは次のとおりです:

$.expr[':'].mycustomselector= function(element,index,meta, stack){
// element- DOM 要素
// インデックス - 現在検索されているインデックスstack value
// メタ - セレクターに関するデータ要素
// スタック - すべての要素の反復処理に使用されるスタック

// 現在の要素が含まれている場合は true を返します
/ / no 現在の要素が含まれる場合は false を返します
};

// カスタム セレクターの適用:
$('.someClasses:test').doSomething(); >
以下の小さな例を見てみましょう。カスタム セレクターを使用して、「rel」属性を含む要素のセットをロックします。

コードをコピー コードは次のとおりです:

$.expr[':'].withRel = function(element){

var $this = $(element );
/ /rel 属性が空でない要素のみを返します
return ($this.attr('rel') !=
}; ).ready(function( ){
//カスタム セレクターの使用は非常に簡単です。他のセレクターと同様に、要素のパッケージング セットを返します
//そのフォーマットを変更するなど、そのフォーマット メソッドを使用できます。 css スタイルは次のとおりです
$('a:withRel').css('background-color', 'green');

• ;a href=" #">rel なし
  

;/a>

リリースなし


• 
  rel="nofollow" href="#"> 🎜>
  
  13. 画像のプリロード
  通常、画像のプリロードには JavaScript を使用するのが良い方法です:
  
  
  
  
  コードをコピー
  
  
  コードは次のとおりです:

//画像リストをプリロードする関数を定義します (パラメータ付き)
jQuery.preloadImages = function(){

//画像を走査しますfor(var i = 0; ijQuery("").attr("src", argument[i]); } } // 次のようにプリロード関数を使用できます $.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png") );

14. コードを十分にテストします
jQuery には QUnit と呼ばれる単体テスト フレームワークがあります。テストの作成は簡単なので、自信を持ってコードを変更し、期待どおりに動作することを確認できます。その仕組みは次のとおりです:




コードをコピー


コードは次のとおりです:

//
module("Module B");

test("some other test", function() {

//モジュールに追加する必要がある判定ステートメントの数を指定します。 expect (2); equals( true, false, "テストに合格" );