jQueryの基本的な書き方
$(セレクタ) .メソッド(パラメーター) ;
$('p').css('color', 'red');
何を どう処理するか
(要素) (命令)
jQueryの基本的な書き方
$('p').css('color', 'red');
$(セレクタ) .メソッド(パラメーター) ;
文末にセミコロン!
$(‘要素’)
$(‘header’)
$(‘#main’)
$(‘.main’)
id
class
何を
タグ
$(‘header h1’)
セレクタ・・・cssのセレクタと同義語
jQueryの基本的な書き方(セレクタ)
$(‘header’, ‘#main’)複数
$(セレクタ) .メソッド(パラメーター) ;
$(‘要素’)
$(‘header’)
$(‘#main’)
$(‘.main’)
id
class
何を
タグ
$(‘header h1’)
セレクタ・・・cssのセレクタと同義語
$(‘header’, ‘#main’)複数
とってきたもの
=
オブジェクト
jQueryの基本的な書き方(セレクタ)
$(セレクタ) .メソッド(パラメーター) ;
命令
メソッド().メソッド().メソッド()
どう処理するか
jQueryの基本的な書き方
メソッドチェーン
命令が複数ある場合
$(セレクタ) .メソッド(パラメーター) ;
jQueryの書き方
<script>
$(function(){
$(セレクタ).メソッド(パラメーター);
  });
</script>
jQueryの書き方
<script>
$(function(){
$(セレクタ).メソッド(パラメーター);
  });
</script>
② jQueryの処理
<script>
$(function(){
$(セレクタ).メソッド(パラメーター);
  });
</script>
<script src="js/jquery-3.3.1.min.js"></script>
① ダウンロードした
jQuery本体
② jQueryの処理
jQueryの書き方
jQueryの書き方
<script>
$(function(){
$(セレクタ).メソッド(パラメーター);
  });
</script>
<script src="js/jquery-3.3.1.min.js"></script>
① ダウンロードした
jQuery本体
② jQueryの処理
順
番
大
切
!
<script>
$(function(){
$(セレクタ).メソッド(パラメーター);
  });
</script>
<script src="js/jquery-3.3.1.min.js"></script>
</body>
<body>
・・・・・・・・・
・・・・・・・・・
① ダウンロードした
jQuery本体
② jQueryの処理
順
番
大
切
!
jQueryの書き方

J query element.key