jQueryの基礎

以下のページでjQueryやDOMについて学んでいます。 www.mojage.club

本記事は、jQueryの基礎について纏めています。

Sponsored Link

jQuery基礎

バージョンチェック

alert(jQuery().jquery);

Google Hosted Librariesを使う

自分のサーバにjQueryを配置しない場合は、Google Hosted Librariesを使用する選択肢もあります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

DOMの準備が出来てから実行

HTMLにjQueryを読み込む際には、CSSファイルを読み込んだ後に<script>タグを記述しましょう。更にjQueryコードを記述する際には以下の様にすることによって、DOMの準備が出来てからjQueryを実行します。

jQuery(function($){
  //write your code!!
});

$jQueryのショートカットです。その$が匿名関数に渡されているので、jQueryライブラリが読み込まれます。

コンフリクトを避けて、$を使用する。

$を使用した方がコードが短くなって嬉しいですが、ほかのライブラリも読み込んでいた場合はコンフリクトが発生する可能性があります。以下の様なファンクションスコープを作りましょう。これはクロージャになっているので、この中では気にせず$を使用できます。

(function($){
  alert('You are using jQuery ' + $().jquery);
})(jQuery)

チェーン

セレクタで一度指定した要素に複数の処理をしたい場合は以下の様に記述できます。

$('a')
  .text('jQuery')
  .attr('href', 'http://www.jquery.com/')
  .addClass('jQuery');

getとset

jQueryのファンクションはgetとして使用するときと、setとして使用するときがあります。

var theText = $('p')
    .text('jQuery')  // set:<p>要素に'jQuery'を設定する。
    .text();  // get:変数theTextにセレクタで指定した<p>要素のテキストを取得する。
alert(theText);  // jQuery

メソッドの破壊

前項のgetとsetなどでも示した通り、一度選択した要素に対しては続けて処理をかけられます。以下では、find()filter()によって要素を抽出し、任意の処理をかけ、end()で抽出を開放しています。

$('#list') // id="list"をセレクト 
    .find('> li')
        .filter(':last')
            .addClass('last')
        .end() // .filter(':last')を終了
        .find('ul')
            .css('background', '#ccc')
            .find('li:last')
                .addClass('last')
            .end() // .find('li:last')を終了
        .end() // .find('ul')を終了
    .end() // .find('> li')を終了
    .find('li') // 元の$('#list')からのfind('li')
        .append('I am an &lt;li&gt;');

色々なパス

jQuery(function($){ // jQueryファンクションへのパス

    // HTMLへのパス
    $('<p></p>').appendTo('body');

    //  要素へのパス
    $(document.createElement('a')).text('jQuery').appendTo('p');

    // CSS要素へのパス
    $('a:first').attr('href', 'http://www.jquery.com');

    // jQuery DOM 参照へのパス
    $(document.anchors[0]).attr('jQuery');
});

要素の順番での指定

要素の指定をそのドキュメントの何番目のものかで指定ができます。

$('a').get(0).title = 'jQuery.com';

$('a')[0].title = 'jQuery.com';

上記2つはどちらもドキュメントに出てくる最初のa要素にtitle: jQuery.comを付与しています。

$を他の文字列にも出来る

$以外の文字をjQueryのコード開始文字として定義することも出来ます。

var XYZ = jQuery.noConflict();
alert(XYZ("div").text());

コンテキストの取得

jQuery([expression], [context])これは、jQueryの基本的なファンクションです。[context]を指定しない場合は、DOMツリー内の要素で合致するオブジェクトを探します。

// $('a', document).context; ←と同じ意味"object HTMLDocument"を返す。
// ドキュメント内の'a'要素のコンテキスト取得
alert($('a').context);

// "object HTMLDivElement"を返す
// ドキュメント内の最初のid="context"を持つ要素内のa要素を取得
alert($('a', $('#context')[0]).context);

Reference from : jQuery Enlightenment