11/17～11/18に勉強したこと
イベント処理
WEB上でクリックした際に、イベント内で指定した処理を実行させること。
$('セレクタ').イベント名(function(){
//イベント発生時に実行したい処理
});
基本的に上記のように書く。
【例】ボタンをクリックした時⇒文章を隠す
//html
<div id="hide-text">説明を隠す</div>
<p id="text">ボタンをクリックすると文章が隠れる</p>
//js
$('#hide-text').click(function(){
$('#text').hide();
});
【気を付けること】
- [function()]を忘れやすいので気を付ける。
- idの際の#を付け忘れないようにする。
CSSメソッド
CSSを変更することができるメソッド
$('セレクタ').css('プロパティ','値');
基本的に上記のように書く。
【例】
//css
p{
color:blue;
}
//js
$('p').css('color','red');
【出力】
青色だった値が赤色に変更された。
textメソッド
CSSだけでなく、HTMLの文字や値を変えることができる。
//html
<p>こんにちは</p>
//js
$('p').text('こんばんは');
【出力】
「こんにちは」の表示が「こんばんは」になる。
htmlメソッド
上記のように文章などではなく、HTMLそのものを変えることができる。
//html
<p>こんにちは</p>
//js
$('p').html('<span>こんばんは</span>');
this
【例】
//html
<ul>
<li>リスト１</li>
<li>リスト２</li>
</ul>
//js
$('li').click(function(){
$(this).css('color','red');
});
【出力】
リスト１
リスト２
と普通に表示されていたものが、クリックした文字だけ赤文字に変わる。
【気を付けること】
(this)には「"」や「'」は付けないこと！
変数(var)
同じオブジェクトを使用する際に変数にすることによって
★見やすくなる ★処理が速くなる ので覚えておく。
【例-使用していないバージョン-】
$('div').css('color','red');
$('div').html('jQuery');
【例-使用したバージョン-】
var $div =$('div');
$div.css('color','red');
$div.html('jQuery');
メソッドチェーン
メソッドをつなげて書くことができる。こちらも見やすくなるので覚えておく。
【例】
$('div').css('color','red').html('jQuery');
//varで変数宣言した後に$div.css...で書いても反応する。
find/children
find
親要素より下のすべての要素を取得する。
[HTML↓]
<div id="wrapper">
<a href="#">リンク１</a>
<p>
<a href="#">リンク２</a>
</p>
</div>
[js↓]
$('#wrapper').find('a').css('color','red');
【出力】
リンク１もリンク２も赤色になる。
children
一階層下の子要素のみを取得できる。
[HTML↓]
<div id="wrapper">
<a href="#">リンク１</a>
<p>
<a href="#">リンク２</a>
</p>
</div>
[js↓]
$('#wrapper').children('a').css('color','red');
【出力】
リンク１のみ赤色になる。
hoverイベント
マウスを乗せたとき／外した時に指定した処理を行う。
【気を付けること】
引数が２つ必要！間は「,コンマ」で区切る！
【例】
$('div').hover(
function(){
$('#wrapper').fadeIn();
},
function(){
$('wrapper').fadeOut();
}
);
【出力】
カーソルを乗せたとき徐々に表示。外した時徐々に消える。
今後
初級編が一息ついたので、リセットして復習⇒そのあと中級編に移る！