jQueryの基本文法を解説

これまでJavaScriptを学習してきて、「さっぱり分からない」という方は、一通りJavaScriptの基本構文を習って、その後でjQueryを学習すると、その理解の促進につながると思ったので、ここでjQueryの基本構文もブログとして残しておこうと思います。

JavaScriptとjQueryの基本文法は異なるのですが、jQueryを理解していく過程でJavaScriptのことも理解が促進されてました。

jQueryの文法

これまでjQueryの書き方が変わってきている

jQueryを学習していくと、先生によってその記述方法が違うことに疑問を感じて、調べていくと、記述方法が変わってきていることが分かりました。

従来の書き方

初期

  1.         $(document).ready(function(){
  2.         };

この中(2行目)にセレクタやメソッドを書いていくスタイルでした。

【補足】

(例)セレクタとメソッドについて

  1.         $(document).ready(function(){
  2.             $(‘p’).css(‘color’, ‘red’);
  3.         });

セレクタは(‘p’)、メソッドは.css(‘color’, ‘red’)を指します。

 

省略した書き方

それが新しくなって、書き方が簡単になりました。
省略系の書き方

  1.         $(function(){
  2.         });

 

(document).readyの部分がなくなりました。

これでも十分簡略化されているなという印象だったのですが、最近の書き方(2020年5月現在)を見てみると、さらに簡略化されています。

さらに簡略化した書き方

さらに、より簡略化

  1.         $(‘div’).filter(‘.box’).html(‘★’).css(‘background-color’, ‘#fcc’);

 

もはや↓の記述がなくなっています。

なくなった記述

  1. $(function(){
  2. });

 

最初から、セレクタの記述から始まっています。

まとめ

jQueryの基本構文について解説しました。

  • 従来の書き方
  • 省略した書き方
  • さらに簡略化した書き方

今後、さらに簡略化されていくかもしれません。
現時点で簡略化されてきたjQueryの記述についての説明でした。