-会員ページFree-jQuery入門-第1章-

■jQuery入門-第1章-ビデオ1
・jqueryとは?

■jQuery入門-第1章-ビデオ2
・jqueryの読み方を学習しましょう!

■jQuery入門-第1章-ビデオ3
・セレクタとは?
・メソッドとは?

■jQuery入門-第1章-ビデオ4
・フォントの色を変更してみましょう!

■jQuery入門-第1章-ビデオ5
・サイズを変更してみましょう!
・文字列を消してみましょう!

■jQuery入門-第1章-ビデオ6
・文字列を書き換えてみましょう!
・クラスを追加してみましょう!

テキストはありません。

■jQuery
https://jquery.com/

■「Webブラウザ」と「テキストエディタ」を準備しましょう!
https://onsaturdays.com/会員ページfree-htmlcssの学習を始める前に/

「ブラウザ」と「エディタ」は下記のWebページからダウンロードできます。

■Google Chrome (ウェブブラウザ)
https://www.google.com/intl/ja_ALL/chrome/

■Atom (テキストエディタ)
https://atom.io/

index.html

<!doctype html>
<html lang=”ja”>
<head>
<meta charset = “utf-8″>
<title>jquery練習</title>
<style>
.text {
font-size: 20px;
color: green;
padding: 10px;
display: inline-block;
border: 1px solid black;
}
</style>
</head>
<body>

<p>jqueryを勉強しよう</p>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script>

// jqueryを使用するために読み込む必要があります

// $(document).ready(function() {
//
// });

$(function() {
// $(‘p’).css(‘color’, ‘red’).css(‘font-size’, ’30px’);

// $(‘p’).hide(1000);
// $(‘p’).show(1000);

// $(‘p’).text(‘jqueryを学習しよう’);

$(‘p’).addClass(‘text’);
});

// セレクタ DOM要素…Pとかh1とか
// メソッド 処理
//
// jqueryの書き方(セレクタ)
// html要素…$(‘p’)とか$(‘h1’)とか
// class…$(‘.add’)とか
// id…$(‘#add’)とか
//
// jqueryの書き方(メソッド)
// css…スタイルを変更します。
// hide…要素を隠す
// show…要素を表示する
// text…テキストを書き換える
// addClass…クラスを追加する

</script>
</body>
</html>