【jQuery-13】表示と非表示のメソッド【超初心者向き】-キタテン

今回はとてもシンプルです。指定したセレクタを表示したり、非表示にしたりするメソッドをご紹介します。

※エディタは編集可能です。いろいろいじって動きを体験してみましょう！

【show()】指定したセレクタを表示する

See the Pen show() by taichi (@taichi_na) on CodePen.

上の例では、ボタンを押すと指定したセレクタ <p> が表示されるスクリプトを書いています。

<p> 要素内にはすでに文字が書かれているので、CSS に display:none; と書いておいて、デフォルトの状態では見えないようにしてあります。

そして、ボタンをクリックするスクリプトの中に、<p> を表示させるスクリプトを書いて命令しているわけです。

See the Pen hide() by taichi (@taichi_na) on CodePen.

先ほどの show() と全く逆の動きをするメソッドになります。

CSSの display:none; は消して、デフォルトの状態で文字が表示されるようにしておいて、ボタンを押すとその表示が消えるようにしました。

先ほどの show() と同様に、引数は空にしたままでセレクタのみ指定しています。

指定されたセレクタが消えるということです。