jQueryの基本文法を解説

記事内に商品プロモーションを含む場合があります

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

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

jQueryの文法

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

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

従来の書き方

初期

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

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

【補足】

（例）セレクタとメソッドについて

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

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

 

省略した書き方

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

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

 

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

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

さらに簡略化した書き方

さらに、より簡略化

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

 

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

なくなった記述

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

 

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

まとめ

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

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

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