jQuery Progate 初級

2019年10月22日 07:42

ｊQueryの基本の型①

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

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

textメソッド

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

htmlメソッド

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

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

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

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

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

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

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

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');

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


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

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

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

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

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

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

)

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