1. ryuuuuuuuuuu

    Posted

    ryuuuuuuuuuu
Changes in title
+jQueryにの書き方について簡単にまとめた
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,127 @@
+#RubyだけじゃなくてJSもやらなあかん
+Rubyしかやってきてないけど、JSは必須なので勉強しないと。
+ってことでjQueryについて。
+
+JSを書きやすくしたもの(ライブラリが)jQuery。
+jQueryなら簡単にJSを書くことができます。
+
+#使い方
+jQuryを使い始める2パターンについて(他にも方法はあると思います)。
+
+###①jQueryのサイトを開いて、ダウンロードして使う
+⇒HTMLファイルにダウンロードしたjQueryファイルを紐づける。
+
+```html
+
+<head>
+<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
+</head>
+```
+
+
+###②jQueryをダウンロードせずに、他のサーバーにあるものを使用する
+GoogleやMicrosoft、jQuery本家などのサーバーが配信しているjQueryを使います。
+専門用語でCDN(コンテンツデリバリネットワーク)と言って、アクセス元から近いサーバーと通信をとって高速化をはかるものです。
+なんかよくわからんですが、こういう方法もあるってことで。
+以下のように記述します。
+
+```
+<head>
+
+<!-- headの中に以下のように記述 -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+
+</head>
+```
+
+src=””のリンク先については、それぞれ希望のCDNのURLを入れます。これでjQueryファイルの紐付けができました。
+この②の方法を使えば、自分でダウンロードせずにjQueryを使えるので、こちらのほうがミスもなく簡単。
+
+#JavaScript(jQuery)のコードを書く場所
+これについては依然まとめた記事があるのでそちらを参照
+https://qiita.com/ryuuuuuuuuuu/items/6420353e8e2db4d28f20
+
+#jQueryの書き方
+###基本形
+
+```js
+$(function(){
+ ここに処理を書く
+});
+```
+
+基本形の中に処理を書いていくと以下のようになります。
+
+```js
+
+$(function(){
+ $(A).B() ⇦AをBする
+});
+```
+
+Aを***「セレクタ」***といい、
+Bを***「メソッド」***、
+Bの直後のカッコ内を***「パラメータ」***といいます。
+
+ちゃんと記入するとこんな感じに
+
+```js
+
+$(function(){
+ $(".hoge1").css("color","blue") ⇦「.hoge」のcolorをblueにする
+})
+```
+***「セレクタ」***とは任意の範囲、要素を指定するためのもので、jQueryを覚える上で欠かせない要素です。
+なお、セレクタはCSSと同じような記述をするため、CSSを勉強済みであれば比較的簡単に覚えることができます。
+下記のように書きます。
+
+```
+$(“#hoge”) – idセレクタ
+$(“.hogehoge”) – クラスセレクタ
+$(“li a”) – 子孫セレクタ
+$(“p.hoge, p.hogehoge”) – グループセレクタ
+```
+
+*セレクタは「“」(ダブルクォーテーション)、もしくは「’」(シングルクォーテーション)で囲う必要あり。
+
+jQueryはこの「セレクタ」で指定した場所に、
+***メソッド***および***パラメータ***で記述した命令が処理されていく、と言うのがおおまかな流れとなります。
+
+
+#イベントを使う
+jQueryを扱う上でもう一つ欠かせない要素、それが***「イベントメソッド」***。
+イベントとは、セレクタを「クリックした時」や「マウスのカーソルをあてた時」など(他にもいろいろあるが)、次に記述したメソッドを実行する「きっかけ」のこと。
+
+```js
+
+$(function(){
+ $("A").B(function{    ⇦AをBしたとき
+ $("C").D()  ⇦CをDする
+ });
+});
+```
+
+Bがイベントです。
+イベントには「.click(セレクタをクリックした時に実行)」や「.mouseover(セレクタにマウスを当てた時に実行)」など色々あります。
+
+
+###「.click」を使った 例
+
+```
+<div class="hoge">クリックすると青色になります</div>
+```
+
+```js
+
+$(function(){
+ $(".hoge").click(function(){
+ $(this).css("background-color","blue")
+ });
+});
+```
+
+上記の例では、class名がhogeの「クリックすると青色になります」をクリックすると、
+clickイベントが走り、背景色が青になる。という感じです。
+
+*「this」はイベント時に同じセレクタを使用するということです。
+