jQueryの書き方
セレクタの使い方1：id, classを指定する- セレクタ内でidあるいはclassを指定する
- $(".class")でクラスを指定, $("#id")でidを指定
- $("#id .class")でid以下のclassに適用
セレクタの使い方2：フィルター- id, class, タグ等で選択したもののうち、さらに絞り込む場合に使う
- 使い方はセレクタ内 $("#id名等 :フィルター")
- フィルターの種類
- :eq(n) -- n番目の要素にのみ適応する
- :gt(n), :lt(n) -- nよりも大きい, nよりも小さい
- :even, :odd -- 偶数, 奇数
- :contains('text') -- タブ内にtextがあるものに適応する.
- :first, :last -- 先頭、最後のアイテムに適応
セレクタの使い方3:属性セレクタ
メソッドの使い方1：DOM要素の指定- クラスやIDがあれば直接指定できるが、そういったものがない場合に使用できる
- parent(), children(): ある要素の親要素、子要素を指定する
- next(), prev(): その要素の前、後
- siblings(): 兄弟要素(同列の要素)
メソッドの使い方2:属性情報の取得、追加- ある要素の背景色が知りたい場合
$(".example > p.How_to_method").css('color',"red").css('background','pink'); にたいして以下の文で色を取得できる $(".example > p.How_to_method").css('color'); - クラスを追加したい場合
$('要素').addClass('class名') - 削除したい場合
$('要素').removeClass('class名') - 属性の値をとるのはattrメソッド、 カスタム属性を取得するのはdataメソッド
- リンクの情報を取得したい場合 attrメソッド
$('a').attr('href'); リンクの再設定もできる $('a').attr('href', '新しいurl'); - data属性の値を取得したい場合
$('a').data('カスタム属性名')
メソッドの使い方3:タグの中身の操作- タグの中身を以下のメソッドで書きかえることができる
text("テキスト"):タグ内のテキストを書きかえる.()内を空白にすると値を取得できる. html:選択した範囲のhtmlごと置き換える. 選択しているタグごと書きかえる. val: form部品の中のvalue要素の中身を確認・操作する. empty: タグ内を消去する remove: htmlタグごと消去する
メソッドの使い方4:要素の追加- 指定した位置に新しくタグ＆文字を追加する場合
- 挿入する方法には4つある
- before, after: 指定した位置の前/ 後ろ に追加する
- prepend, append: 指定した要素の子要素の先頭/ 末尾 に追加する
- 各メソッドは以下のように書きなおすこともできる
- before, after ⇒ insertBefore, insertAfter
- prepend, append ⇒ prependTo, appendTo
- $('< タグ >').text("タグに入れたいテキスト") で追加したい文字列を指定する
- $('挿入したい位置').before(入れたい文字列);
var li_text = $('< li >').text("Hello World!");
$('ul.test_list:eq(1)').before(li_text); //li_text.insertBefore('ul.test_list > li:eq(1)');
メソッドの使い方5: エフェクトを使ってみる- hide, show: 非表示/ 表示 ((slow), (n[ms])を指定できる)
- fadeOut, fadeIn: フェードイン/フェードアウト ()内でアニメーション時間を指定できる
- toggle: 表示/ 非表示 を切り替える
$('.box').fadeOut(800, function(){fadeoutした後に実行される命令});
$('.box').fadeIn(800);
メソッドの使い方6:イベントを使ってみる- click:クリックしたとき
- mouseover:マウスが載ったとき
- mouseout:マウスが離れたとき
- mousemove:マウスが動いた時
引数とその返り値の指定は ここで検索 $('.method6')
.mouseover(function(){
$(this).css("background","blue");
})
.mouseout(function(){
$(this).css("background","green");
})
.mousemove(function(e){
$(this).text(e.pageX);
});
メソッドの使い方7:form部品に関するイベント- focus:選択したとき
- blur:選択が外れた時
- change: 値が変化したとき
$(function(){
$('#name')
.focus(function(){
$(this).css("background", "pink");
})
.blur(function(){
$(this).css("background","white");
});
$('#members')
.change(function(){
console.log("changed!");
});
});
メソッドの使い方8:onメソッド- javaScriptで動的に作成したクラスに対してイベント起こしたい場合に使う
- $('親クラス')on("イベント名",'クラス名', 無名関数(){});
$(function(){
$('button.btn_1').click(function(){
var p = $('< p >').text("sampleText").addClass('samples');
(this).after(p);
});
$('ul').on('click', '.samples', function(){
$(this).remove();
});
});
Ajaxとは？- Asynchronous JavaScript + XML
ページをurlで切り替えるのではなくJavaScriptをつかって通信、
さらに結果をページの一部に反映させる方法 - 非同期通信であることに注意!
$('class').load('more.html');
$('class_inMore.html').css('color','red');
これでは文字色は赤色にならない $('class').load('more.html', function(){ $('class_inMore.html').css('color','red'); });- loadメソッドで別のhtmlファイルにあるソースを読み込むことができる.
Ajax: $.get, $.post- loadメソッドでコンテンツを送るだけでなく、引数を渡して何か処理をしたい場合に使う
- getはデータを送るだけ, postは何か渡して処理する
$.post('サーバー側のファイル', {パラメータ}, function(){コールバック関数}); $('#kettei').click(function(){
$.post('greet.php', {
name_ajax_2: $('#name_ajax_2').val() //keyをidに、valueを id=nameの中身(valメソッド)とする
}, function(data){
//引数dataにはgreet.phpの返り値が入る
$('#result_2').html(data);
});
});
|
|
