JQuery sheet

2018年12月8日 category - useful

JQueryのサンプル

001.ページの読み込みが完了したらダイアログ表示

$(function(){
alert(“ページの読み込み完了”)
});

002.id=”foo”の要素を表示

$(‘#foo’).show();

003.id=”foo”の要素を非表示

$(‘#foo’).hide();

004.class=”foo”の要素を表示

$(‘.foo’).show();

005.class=”foo”の要素を非表示

$(‘.foo’).hide();

006.全てのdiv要素を表示

$(‘div).show();

007.全てのdiv要素を非表示

$(‘div).hide();

008.id=”foo”の要素の中にあるdiv要素を表示

$(‘#foo div’).show();

009.id=”div1″の要素を取得し、変数に保存

var div1 = $(‘div1’);

010.div1の中にあるクラスfooが指定された要素を表示

div1.find(‘.foo’).show();

011.id=”foo”の要素のスタイル、font-sizeを20pxに変更

$(‘#foo’).css(‘font-size’, ’20px’);

012.id=”foo”の要素のスタイル、font-sizeの値を変数に保存

var size = $(‘#foo’).css(‘font-size’);

013.id=”foo”の要素の幅を400にする

直接指定はpx無し、cssで設定の場合はpx有りにする

$(‘#foo’).width(‘400’);

014.id=”foo”の要素の高さを400にする

直接指定はpx無し、cssで設定の場合はpx有りにする

$(‘#foo’).height(‘400’);

015.id=”foo”の要素をフェードインする

$(‘#foo’).fadeIn();

016.id=”foo”の要素をフェードアウトする

$(‘#foo’).fadeOut();

017.id=”foo”の要素を1秒でフェードインする

$(‘#foo’).fadeIn(1000);

018.id=”foo”の要素を1秒でフェードイン後ダイアログを表示する

$(‘#foo’).fadeIn(1000, function(){
alert(“フェードイン完了”);
});

019.id=”foo”の要素をスライドダウンする

$(‘#foo’).slideDown();

020.id=”foo”の要素をスライドアップする

$(‘#foo’).slideUp();

021.id=”foo”の要素をtop200px,left400pxへアニメーション

$(‘#foo’).animate(
{
top: 200;
left: 400;
}
);

022.id=”foo”の要素をtop200px,left400pxへアニメーション

$(‘#foo’).animate(
{
top: 200;
left: 400;
},
1000,
function(){
alert(“アニメーション完了”);
}
);

023.id=”foo”の要素をhogehogeに変更

$(‘#foo’).text(“hogehoge”);

024.id=”foo”の要素の内容を変数textに保存

var text = $(‘#foo’).text();

025.id=”foo”の要素の内容を

hogehoge

に変更

$(‘#foo’).html(‘

hogehoge

‘);

026.id=”foo”の要素の内容を変数htmlに保存

var html = $(‘#foo’).html();

027.id=”foo”の内容を空にする

$(‘#foo’).empty();

028.id=”foo”のa要素のtarget属性値に_blankを指定する

$(‘a#foo’).attr(‘target’, ‘_blank’);

029.id=”foo”のa要素のtarget属性値を変数targetに保存する

var target = $(‘a#foo’).attr(‘target’);

030.id=”foo”のinput要素の入力値をhogeに変更

$(‘input#foo’).var(‘hoge’);

031.id=”foo”のinput要素に入力されている値を変数valueに保存する

var value = $(‘input#foo’).val();

031.id=”foo”の要素のクラスにbarを追加する

$(‘#foo’).addClass(‘bar’);

032.id=”foo”の要素のクラスからbarを削除する

$(‘#foo’).removeClass(‘bar’);

033.id=”bar”の要素をid=”foo”の要素の中に追加する

$(‘#foo’).append($(‘#bar’));
$(‘#bar’).appendTo($(‘#foo’));

034.pの要素を作ってid=”foo”の要素の中に追加する

$(‘

新要素

‘).appendTo($(‘#foo’));

035.id=”foo”の要素を削除する

$(‘#foo’).remove();

036.id=”foo”の要素がクリックされたらダイアログ表示

$(‘#foo’).click(
function(){
alert(‘アラート’);
}
);

037.id=”foo”の要素の上にマウスが乗ったらダイアログ表示

$(‘#foo’).mouseenter(
function(){
alert(‘アラート’);
}
);

038-1.id=”foo”の要素の上にマウスがおりたらダイアログ表示

$(‘#foo’).mouseleave(
function(){
alert(‘アラート’);
}
);

038-2.上記2つを一度に処理

$(‘#foo’).hover(
function(){
alert(‘アラートA’);
},
function(){
alert(‘アラートB’);
}
);

039.id=”foo”のinput要素にフォーカスが当たったらダイアログ表示

$(‘input#foo’).focus(
function(){
alert(‘アラート’);
}
);

040.id=”foo”のinput要素にフォーカスが外れたらダイアログ表示

$(‘input#foo’).blur(
function(){
alert(‘アラート’);
}
);

041.クラスfooが指定された要素がクリックされたら中身のテキストを変更

$(‘.foo’).click(
function(){
$(this).text(‘クリック’);
}
);

042.クラスfooが指定された要素それぞれにつき中身のテキストをダイアログ表示

$(‘.foo’).each(
function(){
var text = $(this).text();
alert(text);
}
);