のんびりしているエンジニアの日記

ソフトウェアなどのエンジニア的な何かを書きます。

JQuery(2) JQueryの基本

Sponsored Links

皆さんこんにちは
お元気ですか。私は今日休みです。やったね!

今日は基本的なJQueryの使い方をやってみたいと思います。

f:id:tereka:20140614144704p:plain

これだけですね。セレクタメソッドを設定するだけで可能。

セレクタ

変更する対象を選択する部分です。

$('p') // htmlのpの部分を変更
$('#id') // 指定したidに対してメソッドを実行
$('.class') //指定したクラスに対してメソッドを実行します。
$('ul li') //ul要素の中にあるli
$('[属性]') //属性を持つ要素を取得
$("[属性='値']") //属性を持つ要素を取得

メソッド

セレクタで選択した要素に対し、メソッドを実行します。
htmlの内容を書き換えたりすることができます。

//要素に対して、実行
$('p').text('きゅーちゃん');
$('p').remove();
$(#id).css('color':'#0000FF'); //CSSを適用する

$("div").addClass('class');
$("div").removeClass('class');

//イベント処理 functionの中でイベントが実際に行われた時の処理を記載します。
$('p').click(function(){});
$('div').load(function(){});

基本的にこれらの組み合わせを行うことでhtmlやcssの要素を動的に変更することができます。