スキルゼロ知識ゼロ経験ゼロからWeb制作で稼げる様になりたい！
jQueryコースへ突入。初級から上級まで完了しました。
javaScriptの1種で、クリックした時の反応やアニメーションなどの動きをつけることができます。
JQueryはJavaScriptの1種
ProgateのjQueryはJavaScriptのバージョンがES5でしたが、最新がES6のため若干違いがあります。
JavaScriptと同じシート上で作成していきます。
jQueryの書き方
「セレクタ」の「メソッド」を「引数」する。の様なイメージです。
$(‘セレクタ’).メソッド(引数).メソッド(引数);
セレクタにはHTMLや変数定数。メソッドにはCSSを指定することができます。
$(‘.セレクタ’) セレクタにclassがあるときはドットをつける。
$(‘#セレクタ’) セレクタにidがあるときはシャープをつける。
変数にオブジェクトを代入している時は$()はいらない。
HTMLやCSSを編集可能
メソッドにHTMLやCSSを使うことで、jQuery上で上書きすることが可能になります。。
.text(‘ ’); HTMLのテキストを変更
.html(‘ ’); HTMLの要素を追加することが可能
.css(‘ ’); CSSの要素を変更
アニメーション
クリックした時やカーソルを合わせた時の反応を作成することができます。
$(‘セレクタ’).click(function(){}); クリックした時の反応
$(‘セレクタ’).hover(function(){}); マウスを乗せた時の反応。離した反応も合わせて作成。
thisという概念
$(this)のオブジェクトを使用することで、流動的なコード作成ができます。
「これ」をクリックした時や、リストの中の「これ」みたいなイメージの使い方です。
$(this) thisを使用するときは「’」は不要
「$」,「”」,「’ ‘」,「` `」
ここまでJavaScriptからjQueryのコード作成を行ってきましたが、
「$」や「”」を使用したりしないケースが覚えきれませんでした。
そのためメモとしてここに残しておきます。間違っていたり抜けてる可能性があります。
「$」 jQueryオブジェクトの作成に使用。変数や定数以外は基本これから始めます。
「”」 ダブルクオーテーションは文字列として指定する際に使用します。
「’」 シングルクオーテーションはセレクタの指定やメソッドの中で使用します。
「`」 バッククオーテーションはテンプレートリテラルの際に使用します。${}で変数定数を使用できます。
まとめ
JavaScriptの1種としてjQueryを学びました。
今まで学んだコードを応用することが多いので、覚えているコードを使用する幅が広がります。
クリックした際のアニメーションなどの反応は必須のコードになると思いますので、
イベントの理解やコードの書き方をこなしていきたいと思います。
コメント