jQueryの勉強・基本編(自分用)

風見聡 @kazami7

jQuery勉強中。jQueryは2006年にリリースされたJavaScript のライブラリ。古いIEにも対応している。コードが簡潔。クラス名がboxの要素の文字色を変える $('.box').css('color','blue');

風見聡 @kazami7

続き。JavaScriptのwindow.onloadはページの読み込み完了を待つ必要があるが、jQueryの$(function(){});は、準備出来次第、読み込まれる。また、複数の処理を定義できる。※window.onloadは後の処理が上書きする。

風見聡 @kazami7

続き。要素の取得。全てのdiv要素を取得 $(function){var $div = $('div');}); id=imageの要素の取得 var $images = $('images'); クラス名imgの要素の子要素spanを取得 $('.img span');

風見聡 @kazami7

続き。※JavaScriptのdocument.get.ElementByIdで取得した要素に対し、jQueryの記述でCSSの変更等を行うことは不可能。jQueryで取得したオブジェクトはjQueryオブジェクトと呼ばれ、JavaScriptで取得するNodeListとは異なる

風見聡 @kazami7

jQueryの機能メソッド 要素のCSSの変更 $moji.css('color','blue'); 要素内のHTMLを変更 $text.html('<p>Hello,world.</p>'); 要素のクラス名を取得 var kirasu=$text.attr('class');

風見聡 @kazami7

メソッドチェイン＝複数のメソッドを連続して書いても良い。$function(){$('#moji').css('color','blue').html('<p>Hello,world</p>'); }); ⇒id=mojiの要素の文字色、HTMLを変更 ※変数の定義は省略できる。

風見聡 @kazami7

続き。id=btnの要素をクリックしたらCSSを変更する $function(){$('#btn').click(function(){ $('#btn').css('color','red');}); });

風見聡 @kazami7

アニメーション $function(){$('box').animate({width:'300px'},1000); ⇒id=boxの要素を1000ミリ秒かけ横幅増。フェードアウト＝$('box').fadeOut(); スライドアップ＝$('box').slideUp();

風見聡 @kazami7

ちなみに、これからJavaScriptを学習される方は、jQueryから勉強した方が良いかもしれない。本家のJavaScriptよりもjQueryの方が非常に簡潔に出来ていて分かりやすい。そして、JavaScriptとjQueryではかなり文法が違うので学び直す必要がある。

風見聡 @kazami7

jQuery勉強中。googleのjQueryライブラリ読み込み時にhttpsとhttpを混在させる src="//ajax.google.com/...." HTML読み込み後に実行(通常で指定) $(function(){ });

風見聡 @kazami7

続き。セレクタ。直近の子要素 p > span 直後の要素 p + span 条件以外の要素 p:not(:first-child) 指定した順番の要素 dd:nth-of-type(3) ⇒3番目のdd要素を指定 [name='mail'] ⇒name属性がmailの要素を指定

風見聡 @kazami7

続き。jQuery独自セレクタ。最初の要素 p:first 最後の要素 p:last 偶数番目の要素 p:even 奇数番目の要素 p:odd 指定の順番の要素 p:eq(3) 順番以降の要素 p:gt(3) 順番以前の要素 p:lt(3)

風見聡 @kazami7

続き。指定の文字列を含む要素 p:contains('わさび') 指定の要素を含む要素 p:has(span) 空でない文字列か要素を含む要素 p:parent 追記⇒ユニバーサル(全要素) *

風見聡 @kazami7

jQuery勉強中。$("id1").text($("id2").text()); ⇒id1の要素にid2の要素のテキストを上書き $("id1").html($("id2").html()); ⇒id1の要素にid2のHTMLを上書き ※prepend() HTMLの先頭に追記

風見聡 @kazami7

JSファイルの競合(変数の上書き)への対策 $(function(){}); ⇒ jQuery(function(){}); に書き換える + JSファイルの読み込み順を変更する or jQuery.noConflict();を記述する

風見聡 @kazami7

続き。append() 要素内の最後にHTMLを追記 before() 要素の前にHTMLを挿入 after() 要素の後にHTMLを挿入 $("#id1").insertBefore("#id2"); id1の要素をid2の前に移動 insertAfter() 要素の後に移動

風見聡 @kazami7

jQuery勉強中。$("span").wrap("<h2></h2>"); span要素をh2要素で包む .wrapInner() 指定要素の中身を指定要素で包む $("#id1").remove(); id1の要素を削除する

風見聡 @kazami7

続き。$("a").attr("href","xxx.jp"); a要素のhref属性の値をxxx.jpに変更 $("a").text($("a").attr("href")); a要素内にa要素のhref属性の値を書き込む .removeAttr() 属性を削除

風見聡 @kazami7

続き。classの追加削除。$("#id1").addClass("first"); id1の要素にfirstというクラスを追加 .removeClass("first"); クラスを削除 CSSの書き換え。$("#id1").css("color","blue");

風見聡 @kazami7

CSS書き換え続き。$("#id1").css({"width":"50px", "height":"50px"}); id1の要素のwidthとheightを変更 ・イベント $("#id1").click(function(){ }); id1の要素をクリックしたら処理を実行

風見聡 @kazami7

a要素にクリックイベントを付けると実行できない不具合の対策⇒ イベントの最後に return falseを書く。※dbclickイベントの場合、return falseだけのclickイベントを同時に定義する。mousedown()とmouseup()⇒ドラッグ&ドロップで使う

風見聡 @kazami7

mouseover(function(){}).mouseout(function(){}); マウスカーソルが乗った時と外れた時の処理を定義 mousemove(function(e){$("id1").html("x座標は"+ e.clientX); }); マウス座標を表示

風見聡 @kazami7

$("id1").on("click","a",function(){ }); id1のa要素クリック時に処理を実行 ※ページ読み込み時には存在しない要素に対し処理が実行できる(重要) $("p").append("<a href='aa.jp'>リンク</a>") a要素を追加

風見聡 @kazami7

$function(){$("p").on("click","a",function(){ $("img").attr("src","aa.jpg"); return false;}); }); p要素内のa要素のクリック時に画像のsrc属性を変更。(追加されたリンクをクリック)

風見聡 @kazami7

フォーカス時に初期文字列が消える入力欄 $function(){ $("input").val("記入してくだい").css("color","#ccc").focus(function(){ $(this).val("").css("color","#000");}); });