Keyword
初めてのjQuery – とりあえず書いてみよう編
2017.04.10
こんにちわこんばんわ、ちばです。
どうも最近いろんなことに手を出しては全て中途半端にしてる系エンジニアです。
つまみ食いが悪化しすぎると大変なことになるので良い子の皆さんは一個ずつ攻略しましょう。
さて、今回はとりあえず難しいことは考えずjQueryを触ってみよう的な内容です。
jQueryやらなきゃいけないってわかってるけどー。。。となかなか手を付けられない方も多いと思います。
なので今回はいろんな思考を捨ててとりあえず書いたら動くじゃん!簡単じゃん!というテンションで進めていきます。
※ HTML・CSSかけるぜ!という方を対象に進めていきます。
jQueryを動かすためには決まってjQueryを読み込む必要があります。
何も考えずhtmlファイルを用意してhead内に下記を読み込ませましょう。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
読み込ませたら、次は前述の記述の後ろに下記を記述しましょう。
<script> $(function() { //ここに何かを書くんだよ! }); </script>
これで基本的な準備は出来ました。
とりあえず一旦jQueryはここまでお約束だと思っておいてください。
次からはいよいよ{ }内にいろいろ書いてプログラム(すごそう)を動かして行きますよ!
<script> $(function() { console.log('こんにちは!コンソールさん!'); }); </script>
上記の記述をするとブラウザのDeveloper Toolsでconsoleを確認すると、
「こんにちは!コンソールさん!」の文字が表示されているはずです。
consoleの開き方わかんないよ!って方は下記を参考に開いて見てください。
https://developers.google.com/web/tools/chrome-devtools/console/?hl=ja
さて、次はもう少しだけ目に見えることをやってみましょう。
まずはbody内にpタグを書いてみましょう。
<p>入れ替わってないよー</p>
そしてこのpタグ内のテキストを入れ替えてみますよー。
<script> $(function() { $('p').text('入れ替わったよー!'); }); </script>
いかがでしょう?pタグの中身が
「入れ替わったよー!」になれば大成功です!
これであなたもjQueryデビューです!
今回はとりあえず書いて、なんとなく動いたってところまでわかれば大丈夫です。
次回以降はもう少し踏み込んで、要素の指定方法や動かし方を解説していく予定です。
これを気にjQueryアレルギー患者が少しでも減ったら嬉しいなとおもいます。
それではまた次回お会いしましょう٩( ᐛ)و
お問い合わせ
トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。
03-6403-3259
受付:10:00 - 19:00