jQueryの基本2

jQueryのライブラリの読み込み方

jQueryを使うために、HTMLドキュメントにライブラリを読み込む。
読み込む方法は下記２通り

  • CDNサーバーのURLに直接リンクを張る方法

  • ダウンロードしておいたファイルにリンクする方法

現在の主流はCDNサーバーへリンクを貼る方法である。

 

CDN：Contents Delivery Network
→コンテンツを効率的に配信することに特化したネットワークのことをさす

HTMLを編集しjQueryを読み込む

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Practice</title>
<link rel="stylesheet" href="css/layout.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="scripts/test.js"></script>

要素セレクタを使用し<p>を取得してみる

test.js
$(function(){
  $('p').css('outline', '1px solid gold');
});

イベントハンドラを設定する

下記ソースはすべての<p>にアウトラインがつく

$(function(){
  $('p').on('click',function(){
    $('p').css('outline', '1px solid gold');
  });
  
});

イベントハンドラとは

スクリプトもon()は、取得した要素にイベントハンドラを設定するものである。
なんらかの物事が発生したタイミングでなにかしたい場合にその処理を記述することがイベントハンドラである。上記のソースを例にすると、on()の()内、’click’、カンマ(,)に続くfunction(){}がイベントハンドラである。略してハンドラと呼ばれることもある

クリックした要素にだけ処理を実行する

$(function(){
  $('p').on('click',function(){
    $(this).css('outline', '1px solid gold');
  });

});

jQueryスクリプトの重要ポイント

・操作する

$(function(){
  $('p').on('click',function(){
    $(this).css('outline', '1px solid gold');
  });

});

・取得した要素にイベントハンドラを設定する

$(function(){
  $('p').on('click',function(){
    $(this).css('outline', '1px solid gold');
  });

});

・イベントハンドラに処理内容を記述する

$(function(){
  $('p').on('click',function(){
    $(this).css('outline', '1px solid gold');
  });

});

 

コメント