jQueryの基本

jQueryの基本

おはようございます!こんにちは!こんばんわ!ひよっ子プログラマuskです!
最近、暑くなってきて春ってあったのかな?と思いつつ毎日過ごしています。
もうすでに半袖短パンで過ごしたいと切実に考えてる僕は、夏が来たら溶けてなくなるのでは・・・なんて思ったり。

そんなことはさておき、今回もひよっ子の備忘録として、書いていきます!

今回は、jQueryの基本についてです!

jQueryの最大の特徴は、ブラウザによるJavaScriptの仕様の違いを吸収し、同じコードで同じ動作を実現してくれることです。つまり、JavaScriptで実装していても、実装時のブラウザと別のブラウザで確認したら、うまくいかない!なんてことも起こり得るわけです。

jQueryの基本形

$.(“セレクタ”).メソッド();
または
$.(“セレクタ”).メソッド(“パラメータ”);

セレクタ=なにを
メソッド=どうする
(パラメータ=どのように)
と置き換えると分かりやすいかもです!

「習うより慣れろ」ということで早速、よく使われる基本中の基本のメソッドをいくつか取り上げてみましょう!

slideUp()、slideDown()

fadeIn()、fadeOut()

これらは単純に「ココをクリック!」という文言部分をクリックすると
11行目から15行目のdivタグ部分が表示されたり、消えたりするというものです。

slideDown()、slideUp()だと

  • divタグ部分が表示されている場合:下から消える
  • divタグ部分が表示されてない場合:上から表れる

という感じに動作します!

また、fadeIn()、fadeOut()だと

  • divタグ部分が表示されている場合:だんだん消える
  • divタグ部分が表示されてない場合:だんだん表れる

という感じに動作します!

まとめ

今回は、jQueryの基本中の基本についてまとめました!
上記で紹介した以外にも数多くのメソッドがありますので、どんどん使っていきたいと思います!

組み合わせやブラウザによっては正常に動作しないこともあるので、注意が必要ですね!


Previous: バブリングとは?【シンプル解説】 Next: Webサイトにおいて横に並ぶコンテンツの高さを揃える簡単な実装方法

© 2017 ALL CONNECT Inc. All Rights Reserved.