【授業メモ】jQuery基礎
jQuery本体を使う方法
多くの人が使っているサイトのCDNを使うことで、関係ない人のサイトでも、キャッシュが残っていることが多く、都度読み込む必要がないメリットがある。
ネット環境がない場合は読み込むことができないデメリットがある。
- 2x の部分を使うこと
- ””の中をコピーしダウンロード→2xの部分から開くページを名前を付けて保存し、自分のフォルダに保存し、（ファイル名など決していじらない！）HTMLでCSSのように、自分のフォルダ内のjQueryファイルをリンクさせる。
★jQueryのリンク記述
HTMLへのリンクの記述は、<head>内の一番下
jQueryを使ってみる
★必ず$(function(){ });で記述する
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
<script>
$(function(){
});
</script>
- 具体的な記述は、リンクの下に<script>で記述
- function（ready function）の意味は、HTMLを先に読み込んでからjQueryを動かすための記述方法
- HTML全部ではなく、functionで指定した要素までbody内のHTMLを読み、指定した要素に行ったらfunctionが動く。
- （HTML全部読んでから動く記述も別にある）
★命令の書き方
$(function(){
$('要素名#ID名').何を変えるか('何に変えるか');
});
命令を入れ子にする事が多いので、どこがどこの指示か整理して考えること
<script>
$(function(){
$('#btn').click(function(){
$('p#second').text($('p#first').text());
});
});
</script>
HTMLに変更を加える
[元にする記述例]以下もこのソースをもとに記述する
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#btn').click(function(){
$('p#first').html('<strong>文字の変更</strong>');
});
});
</script>
</head>
<body>
<button id="btn">HTMLの変更</button>
<p id="first">取得する文字列</p>
</body>
</html>
・記述例
btnを押すと#secondを、#firstに変える
（）が空なのは、何も変更せずただ持って来るということ＝btnを押すと#secondが#firstに変わる
<script>
$(function(){
$('#btn').click(function(){
$('p#second').html($('p#first').html());
});
});
</script>
HTMLの挿入（テキスト59P）
★prepend() 要素の先頭に挿入する
<script>
$(function(){
$('#btn').click(function(){
$('p#first').prepend('<strong>P要素内の先頭に挿入</strong>');
});
});
</script>
</head>
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">ここに入るテキストテキストテキスト</p>
★append() 要素内の最後に挿入する
<script>
$(function(){
$('#btn').click(function(){
$('p#first').append('<strong>P要素内の最後に挿入</strong>');
});
});
</script>
</head>
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">テキストテキストテキストここに入る</p>
★before() 要素の前に挿入する
<script>
$(function(){
$('#btn').click(function(){
$('p#first').before('<h1>P要素の前に挿入</h1>');
});
});
</script>
</head>
<body>
<button id="btn">HTMLの挿入</button>
ここに入る<p id="first">テキストテキストテキスト</p>
★after() 要素の後に挿入する
<script>
$(function(){
$('#btn').click(function(){
$('p#first').after('<h1>P要素の後に挿入</h1>');
});
});
</script>
</head>
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">テキストテキストテキスト</p>ここに入る
要素の置き換え、削除（テキスト67P）
★replaceWith() 要素を置き換える
<script>
$(function(){
$('#btn').click(function(){
$('p#first').replaceWith('<h1>h1要素に置き換える</h1>');
});
});
</script>
</head>
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">テキストテキストテキスト</p>←h1に変わる
★remove() 要素の削除
<script>
$(function(){
$('#btn').click(function(){
$('p#first strong').remove();
});
});
</script>
</head>
<body>
<button id="btn">HTMLの挿入</button>
<p id="first"><strong>削除する部分</strong>テキストテキストテキスト</p>↑ここが消える
属性値の変更
attrとは「アトリビュート」、「属性」のこと。
属性とは、imgタグにとってのsrc,imgタグにとってのalt,aタグにとってのhref,scriptタグにとってのsrcのこと。
★ 属性値の変更のattr()
$('どこの').attr('何の属性を','何に変えるか');
<script>
$(function(){
$('#btn').click(function(){
$('a').attr('href','https://www.rakuten.co.jp/');
});
});
</script>
</head>
<body>
<button id="btn">HTMLの挿入</button>
<a href="https://www.amazon.co.jp/">リンク先へ</a>
←ボタンを押すとリンク先が変わる
★属性値の取得のattr()
<script>
$(function(){
$('#btn').click(function(){
$('a').text($('a').attr('href'));
});
});
</script>
</head>
<body>
<button id="btn">HTMLの挿入</button>
<a href="https://www.amazon.co.jp/">リンク先へ</a>
←ここの「リンク先へ」の文字が、hrefに入れたURLに変わる
CSSの制御（テキストP71）
★CSSプロパティの設定
$('どこの').css('何を','どう変えるか');
<script>
$(function(){
$('#btn').click(function(){
$('#first').css('color','red');
});
});
</script>
</head>
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">テキストテキストテキスト</p>
複数指定の場合は記述方法が変わる！
一つの指定→.css('何を','どう変えるか');
カンマでプロパティ名とプロパティ値を区切る
複数の指定→.css({ 'プロパティ名':'プロパティ値','プロパティ名':'プロパティ値','プロパティ名':'プロパティ値' });
プロパティ名とプロパティ値はコロンで区切り、命令同士はカンマで区切る
<script>
$(function(){
$('#btn').click(function(){
$('#first').css({
'color':'red','font-size':'30px','background-color':'orange'
});
});
});
</script>
</head>
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">テキストテキストテキスト</p>
★メソッドチェーン（テキストP73）
一つのセレクタに対して複数の命令を記述する場合は、メソッドチェーンの書き方[命令と命令をドットでつなげて記述]することができる
$('p').prepend('<strong>先頭に挿入</strong>')
.append('<strong>最後に挿入</strong>');
★onClickの書き方（テキストP90）
onClickと書かず、on('click')と書くことで、複数のイベントを指定することができる
<script>
$(function(){
$('#btn').on('click', function(){
$('#first').css({
'color':'red',
'font-size':'30px',
'background-color':'orange'
});
});
});
</script>
イベントの基本（テキストP78）
★画像を変更
メソッドチェーンの書き方で、ボタンをクリックして画像が変わるようにする
<script>
$(function(){
$('#btn').on('click', function(){
$('img').attr('src','img/2.jpg').attr('alt','トイプードル');
});
});
</script>
</head>
<body>
<button id="btn">画像の変更</button>
<p><img src="img/1.jpg" alt="ラブラドール"></p>
★a要素にclickイベントを設定するときは要注意！！！
<script>
$(function(){
$('#btn').on('click', function(){
$('img').attr('src','img/2.jpg').attr('alt','トイプードル');
});
});
</script>
</head>
<body>
<br><br><br><br><br><br><br><br>
<!--今確認のために入れてるけど、本当はこんなところにbr入れるのはダメ-->
<p><img src="img/1.jpg" alt="ラブラドール"></p>
<a id="btn" href="img/2.jpg">画像の変更</a>
これだと、同じ場所にいて画像だけ変えるということができず、 img/2.jpgに飛んで行ってしまう！
→return false;をclickイベント内の一番下に記述することで、aのどこかに行っちゃう機能を取り消す！！！
<script>
$(function(){
$('#btn').on('click', function(){
$('img').attr('src','img/2.jpg').attr('alt','トイプードル');
return false; ←clickの命令内の一番下に入れる！！！
});
});
</script>
</head>
<body>
<br><br><br><br><br><br><br><br>
<!--今確認のために入れてるけど、本当はこんなところにbr入れるのはダメ-->
<p><img src="img/1.jpg" alt="ラブラドール"></p>
<a id="btn" href="img/2.jpg">画像の変更</a>
★イベントが発生した要素を取得するthis（テキストP80）
attrはアトリビュート 属性のこと
属性とは、要素の中に含まれるもの pには属性はない imgの属性はsrcとalt二つある aはhrefが属性
aをクリックしたら、imgのsrcが、クリックされたaのhrefの値に変わり、imgのaltにaのテキストが入る
ここでいうthisはa html内にaは四つあるが、クリックしたアンカーすならちイベントを仕掛けている要素がthisということになる
<script>
$(function(){
$('a').on('click', function(){
$('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
return false;
});
});
</script>
</head>
<body>
<p><a href="img/spring.jpg">春</a></p>
<p><a href="img/summer.jpg">夏</a></p>
<p><a href="img/autom.jpg">秋</a></p>
<p><a href="img/winter.jpg">冬</a></p>
<p><img src="img/spring.jpg" alt="春"></p>
</body>
