1. ryuuuuuuuuuu

    No comment

    ryuuuuuuuuuu
Changes in body
Source | HTML | Preview
@@ -1,127 +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にする
+ $(".hoge").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」はイベント時に同じセレクタを使用するということです。