JS一覧

書き方

HTMLのヘッダーにJQUERYを使えるようにするプログラムを書く必要がある。
JQUERYはJSを簡単に書けるようにした拡張機能

$(document).ready(function() {
〇〇〇〇〇〇〇〇〇〇
});

〇〇のところに内容を書く
$(document).ready(function() {　});はHTMLの読み込みが終わったときに実行するという意味
省略形でもかける。省略形は$(function() {　});
'p'のようなHTMLタグのほかに'.A'や'#A'のようなクラスやidも使える

ｐのCSSを変更する

$('p').css('color',red);

ｐのテキストを変更する

$('p').text('ABCDE');

ｐの中身を要素に変更する
pの中にh1が入る

$('p').html('<h1>ABCDE</h1>');

要素を削除

$('P').remove();

子要素だけ削除

$('div').empty();

要素を置き換える

$('p').replaceWith('<h1>新しい見出し</h1>')

imgの画像ファイルを変える

$('img').attr('src','○○.jpg');

ｐにクラスＡをつける

$('p').addClass('A');

ｐのクラスＡを外す

$('p').removeClass('A');

ｐのクラスＡがついているのなら外し、ついていないならクラスＡをつける

$('p').toggleClass('A');

divの上にテキストを追加する

$('div').before('<p>ABC</p>');

divの下にテキストを追加する

$('div').after('<p>ABC</p>');

divの中の一番上にテキストを追加する

$('div').prepend('<p>ABC</p>');

divの中の一番下にテキストを追加する

$('div').append('<p>ABC</p>');

親要素

$('p').parent().css('color',red);

子要素

$('p').children().css('color',red);

親要素の上の親も含めて

$('p').parents('div').css('color',red);

親要素の上の親も含めて条件に最も近い親要素

$('p').closest('div').css('color',red);

子要素の中の子要素も含めて

$('p').find('a').css('color',red);

同じ親を持つ兄弟要素

$('p.A').siblings()

次の兄弟要素

$('p.A').next()

前の兄弟要素

$('p.A').prev()

クラスを持つなら実行

$(document).ready(function() {
if ($('P').hasClass('A')) {console.log('クラスあを持つ')}
});}