jQuery Progate 初級

ｊQueryの基本の型①

$('セレクタ').メッソド();
// ↑なにを　　↑どうする

ｊQueryの基本の型②

$('セレクタ').メソッド(function(){
//↑なにを　　　↑いつ
//処理　どうする
});

HTMLを変更するtextメソッド、htmlメソッド

textメソッド

$('セレクタ').text('書き換える文言');

htmlメソッド

$('セレクタ').html('<span>書き換える文言</span>');

textメソッドとhtmlメソッドの違い。

textメソッドはtextで読み込まれる

htmlメソッドはhtmlとして読み込まれる。

上の、htmlをtextにすると、「<span>書き換える文言</span>」  

のまま出力されるが、htmlだと「書き換える文言」だけが出力される

thisメソッド

イベントが起こった時に、そのイベントが起こった要素を取得することができる。

thisはテキストデータではないので　$( )の　( )　をクォーテーション''で囲まない

【html】

<ul>
 <li>HTML</li>,
 <li>CSS</li>,
 <li>java script</li>
</ul>

【java script】
$('li').click(function(){
 $(this).css('color', 'red');
});

li　を　ひとつクリックされたら、そのクリックされた用途　li を　thisは受け取る　→　その　this = li が　赤色に変わる　という意味

変数を使う

理由

１．同じjQueryオブジェクトをできるだけ少なく記載するため

２．処理スピードを速めるため

３．コードが見やすくなるため

変数を使わない場合

$('div').css('color', 'red');
$('div').html('jQuery');
$('div').fadeOut(slow);

変数を使う場合

var $div = $('div');

ｊQueryオブジェクトを変数に格納するときには、これは変数だとわかりやすいように先頭に　＄　をつける。

var $div = $('div');
$div.css('color', 'red');
$div.html('jQuery');
$div.fadeOut(slow);

メソッドチェーン

同じjQueryオブジェクトを複数回使用するときは連続してメソッドをつかうことができる。→処理を高速化することにも使えるので必須

$('div').css('color', 'red').html('jQuery');

何個でもメソッドを繋げられる可能性あり

子孫要素を取得する　findメソッド

<div id="wrapper">
 <a href="#">リンク1</a>
  <p>
   <a href="#">リンク2</a>
  </p>
</div>

$('#wrapper').find('a').css('color', 'red')

親要素　wrapper内にある a 要素をすべて取得する

子要素だけを取得する　chilidrenメソッド

$('#wrapper').chilidren('a').css('color', 'red');

hoverイベント

要素にマウスが載った時に、外れた時に指定した処理を行うイベント

$('div').hover(
function(){
 //('div').hover(function(){ //1　→　マウスを乗せた時の処理
},
function(){
//2 →　マウスを外した時の処理
};

)

clickイベントとは異なり、引数を２つ用意することに注意！