Help us understand the problem. What is going on with this article?

フリーターでも分かる、jQuery基礎

どうもこんにちは、

今日はjQueryについて、

僕が学んだ基礎知識を共有していきたいと思います。

まずはじめに

簡単な公式を知らないと、

始まらないので公式から覚えましょう。

$(’HTML要素').メソッド(引数);

です。

短っ!

と思った方もいると思いますが、

こっから色々と付け足していくのです。

もちろんコレで終わりなわけはありません。

簡単解説

HTML要素

というのは例えば、、

index.html

<h1 >こんにちは<h1>

のところで言うh1です

あと、最後の  ;(セミコロン)   は忘れずにつけましょう。

コレが基本の構文ですね。

ではこの公式を使って、jQueryで何ができるのかを話していきます。

アニメーションを付けられる

はじめ見た時コレはすごいと思いました!

ほんの二行jQueryの記述を加えるだけでこんな変化を生み出せるのか、、

と感動して、子供のようにしばらく画面を見つめていました。

書き方は、、

$(’HTML要素').fadeOut(アニメーションが起こるスピード指定);

です。

こうすることで、指定した場所のhtml要素が消えます!

$(’HTML要素').fadeIn(アニメーションが起こるスピード指定);

にすると現れます

簡単解説

スピード指定する際に、1000で一秒だということを知っておいてください

fadeOut   のところは   slideUp  でも大丈夫です。

指定先の色を勝手に変えられるだと、、、

コレも非常に簡単に作れます

こちらが公式です。

$(’HTML要素').css('プロパティ(colorとか)' ,  '値(blueとか)');

コレで指定したHTML要素の色が変えられます。

楽しいですね。

clickイベントを使って、
「あ〜、コレよく見るわ〜。」
という動きを作れる

簡単なアニメーションの次は

少し記述量を上げてクリックイベントを使った、

「あー、コレよく見るやつだわ。」

というものを作ってみましょう

公式はこんな感じです。

$(’HTML要素').イベント名(function(){
イベント内容
});

今回のイベント名には「click」を使っていきたいと思います。

$(’HTML要素1').click(function(){
$(’HTML要素2').slideUp
});

こうすることで、

HTML要素1を click すると

HTML要素2が消えます。

素晴らしいですね。。

jQueryすげー、、、

以上で簡単な説明は終わりです

またお会いしましょう。

shunichfukui
19歳 高卒文系だけどテックキャンプ主席だった人ですTwitterでもアウトプットするようにしています
https://mobile.twitter.com/fukusyun
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした