初心者「が」教える jQuery の始め方

jQuery

こんにちは!みかん星人です。

前回は「CSS の書き始め方」について書きました。
そして今回は「 jQuery の始め方」について現初心者超初心者目線で書いていこうと思います。

※今回も前回同様「 jQueryの始め方 」ですので、コードは確認のための簡単なものしか書きません。
次回以降(一通りのチュートリアルが終わり次第)コード紹介などを投稿していこうと思ってます。よろしくお願いします。

では、さっそくjQueryのファイルを作っていきましょう!
下のGIF(動く画像)と同じようにやれば作れると思います。

jQuery始め方 」という名前でファイルを作りました。
自分で決めた名前の後に「 .js 」という拡張子とよばれるものを付けましょう。

拡張子というのを雑に説明しますと「苗字みたいなもの」です。とりあえずその家系には付けとけばいいみたいな感覚で付けましょう。

なんかこんな感じのが出てくれば成功です。

ここまできたらメモ帳で HTML と jQuery の2つを開きます。

そして jQuery の方に ↓ を書きます。

うわ~~~~~~!!!!!

  で、でた~~wwww意味わからん文字列ヤツ~~~wwwww  

ここはアレです。HTMLでもありました とりあえず書いとけ欄 です。
脳死で書いてヨシッ!!

ここたまに $(fanction(){
});
って書いてしまうことがあるので要注意です!!


では次に、HTMLちゃんとjQueryちゃんを会わせてあげましょう。
ここちょっと「あ?」ってなるかもしれません。(コピペを用意しておきます)

HTMLの</head>タグのすぐ上にヴァアアアっていろいろ書きます。
ここも脳死で書いてヨシッ!

↓ コピペ用 ↓

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>


そしてもう一つ書きます。こっちは脳死ではだめですので注意!

↓ コピペ用 ↓

<script src="#########.js"></script>

このコードの意味はCSSでも同じようなものがありましたが、

  あそこに「jQuery始め方.js」っていう名前のjQueryちゃんが居るよ!!  

というように HTML ちゃんに jQuery ちゃんを紹介しているようなイメージです。


最後に会えているかの確認をして終わります。

HTML CSS jQuery の計3つのファイルをメモ帳で開くとこんな感じです。↓

webで開くとこんな感じです。↓


そして確認のため jQuery で「 fadeOut 」というものを使い、文字フェードアウト(徐々に消えていく)するようにしてみましょう!

このコード意味は
.色を赤にするというclassを持っているものたちを徐々に消していくという感じです。
2000と書かれているのは「何ミリ秒かけて消すか」を入力するところです。

そして2000ミリ秒は2秒になります。


ではこれを「 保存 」してwebのクルクルマークを押して更新してみましょう。

消えたああああああ!!!!!

ちゃんと2秒かけて消えてますね。多分。
そして、ちゃんと会えていたみたいです!ヨカッタ!


確認も取れたのでこれにてチュートリアル終了です!
HTML、CSS、jQueryのチュートリアル(全5回)は基礎中の基礎の部分になるので「やっべ、どうやるか忘れた…」となったらまた見返していただけるとありがたいです。

次回からはコードの紹介や使い方を初心者なりに分かりやすく書いていこうと思うので何卒よろしくお願いいたします!!では!

コメント

  1. Marty Jefferson より:

    Hello,

    BestLocalData.com has a special package you get any group of databases for $49 or $249 for all 16 databases and unlimited emails for a year(Domain, IP, Dashboard included).

    You can purchase it on BestLocalData.com and see samples if you are interested.

トップへ戻る
タイトルとURLをコピーしました