jQuery メソッド2

要素を動的に追加していくためのメソッド
「before/after」— 前に追加/後ろに追加
「insertBefore/insertAfter」— ↑語順を変えたもの
「prepend/append」— ある要素の子要素の先頭に追加/末尾に追加
「prependTo/appendTo」— ↑語順を変えたもの
例;
$(‘セレクタ’).before(追加するもの);
追加するもの.insertBefore($(‘セレクタ’));

$(‘セレクタ’).append(追加するもの);
追加するもの.appendTo($(‘セレクタ’));

参考サイト
https://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9

視覚効果(エフェクト)
「hide/show」— 消す/表示する
「fadeOut/fadeIn」— ふわっと消す/ふわっと表示する
「toggle」— 今表示せれていたら消す、消されていたら表示する
「コールバック関数」— 何らかの処理が終わったあとに何らかの処理をする
例;

$(function() {
        // hide, show
        // fadeOut, fadeIn
        // toggle
        //$('#box').hide(800);
        //$('#box').fadeOut(800);
        //$('#box').toggle(800);
        $('#box').fadeOut(800, function() {
            alert("gone!");
        });
    });

参考サイト
http://semooh.jp/jquery/api/effects/

クリックイベントなどを扱う方法
「click」— マウスをクリックしたとき
「mouseover」— マウスが要素にかかったとき
「mouseout」— マウスがそこから離れたとき
「mousemove」— マウスが動いたとき
例;

$(function() {
$(‘#box’).click(function() {
alert(“hi!”);
});
$(‘#box’)
.mouseover(function() {
$(this).css(‘background’, ‘green’);
})
.mouseout(function() {
$(this).css(‘background’, ‘red’);
})
.mousemove(function(e) {
$(this).text(e.pageX);
});
});

フォーム部品に関するイベント
「focus」— focusがあたったら何かをする
「blur」— focusが外れたらblurというイベントで処理をする
「change」— セレクトボックスの値を変える
例;
$(function() {
$(‘#name’)
.focus(function() {
$(this).css(‘background’, ‘red’);
})
.blur(function() {
$(this).css(‘background’, ‘white’);
});
$(‘#members’).change(function() {
alert(‘changed!’);  
});

動的に作られた要素にイベントを設定していく方法
「on」— 読み込まれたときに存在していない要素に対してイベントをつける
例;

$('button').on('click', function() {   
alert('クリックされました');
});

参考サイト
https://www.sejuku.net/blog/38774



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です