プログラミング

【超初心者向け】jQueryの基本の書き方と使い方をまとめてみた

O-DAN(オーダン)とは

悩んでる人
jQueryが分からない

jQueryの基本の書き方が知りたい

JavaScriptで書いちゃダメなの?


こんなお悩みを解決します。

 

kawateru
こんにちは、かわてるです!(@kaz_lion)

今回は本業でjQueryを使う場面が出てきたので、

今後のためにもまとめてみました。

 

基本JavaScriptばかり使っていたのでなかなか慣れません(笑)

 

 

本記事のテーマ

【超初心者向け】jQueryの基本の書き方と使い方をまとめてみた

 

本記事の信頼性
kawateru_profile

jQueryを使うメリットとは?

jQueryって同じ処理をJavaSqriptでもできたりするので、

だったら使い慣れてるJavaScriptを使えばいいじゃんと思いがちですが、

jQueryを使うメリットがいくつかあります。

 

JavaSqriptよりjQueryの方が構文が短い

例えばHTMLからidの内容を取得する場合

JavaSqript

document.getElementById('id名');

jQuery

$('#id名');

HTML内の値を取るだけでもこれだけの差が出てきます。

 

エディターの補助入力があるのでそこまで気にならないかもしれませんが、

大きなシステムになればなるほど記述量に差が生まれます。

 

jQueryはプラグインが多い

jQueryには機能を拡張するためのプラグインが数多く存在しています。

 

難しいアニメーションを付けたいときも、

jQueryのプラグインを使えば比較的簡単に実装することができます。

 

jQueryを使う準備

jQueryを使うにはHTML側で下記のコードを読み込んであげましょう。

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

 

JavaScriptやCSSファイルを読み込んでいるところに続けて記入すればOK

基本的にはHTMLのheadタグ内に記述します。

 

jQueryの$(ドルマーク)の意味

jQueryの構文って$(ドルマーク)がついていますよね。

 

あの$には意味があって、

実はjQuery()の略した書き方です。

 

実際には$()じゃなくてjQuery()と書いても動きます。

 

注意ポイント

注意点としてWordPressで書くときは

$(ドルマーク)を使うと動かないので覚えておきましょう。

 

よく使うjQueryのセレクタまとめ

  • $(“p”)     : pタグ全てを指定
  • $(“#ID名”)   : 記入したID名の要素を指定
  • $(“.Class名”)   :  記入したClass名の要素を指定

 

他にも色々なセレクタがありますが、

本当によく使うのはこの辺りです。

 

 

別のサイトになりますが参考にどうぞ↓

>>jQueryの全セレクタのまとめ「完全マスター辞典!」

 

クリック時に行うjQueryの書き方

クリック時にjQueryの処理を行いたいときは次のように記入します。

$('セレクタ').on('click', function() {

//ここにjQueryの処理を書く

});

 

これはめちゃくちゃ使うので

とりあえず覚えておきましょう。

 

jQueryの基本文法「メソッドチェーン」

jQueryにはメソッドチェーンという

セレクタを省略して書ける便利な基本的な構文があります。

 

例えば通常このように2行になるコードですが、
$(function(){ 
    $('セレクタ').css('color','blue');
  $('セレクタ').before('<p>文字</p>');
});
このように連結して1行で記述する事が出来てしまいます!
$(function(){ 
    $('セレクタ').css('color','blue').before('<p>文字</p>');
});

まとめ「jQueryの基本の書き方と使い方をまとめてみた」

まだまだ勉強し始めたばかりなので、

とりあえずこの辺にしておきます!

 

勉強するとともに追加していきますヾ(≧▽≦)ノ

おすすめプログラミングスクール

  1. GEEK JOB【無料:最短で22日でエンジニア】
  2. TechAcademy【オンライン:自宅で完結したい人向け】
  3. DMM WEBCAMP【転職保証あり:教室で学びたい人向け】

【関連記事】【無料あり】現役エンジニアが選んだプログラミングスクール3選
【関連記事】【2020年最新】プログラミング言語は何がいい?初心者向け言語10選

 

  • この記事を書いた人
  • 最新記事

kawateru

【ブログ運営】×【Twitter運用】×【エンジニア】 3月からWordPressに移行しました。 4年間ブラック飲食→MGになるも28歳で退職→未経験から開発エンジニアに転職→最短でフリーランス目指す‼ ●大阪出身 ●28歳 ●1児のパパ

-プログラミング
-,

Copyright© Kawateru blog , 2020 All Rights Reserved Powered by AFFINGER5.