クラスの追加と削除~Web制作JavaScriptプログラミングjQueryシェアTweetこんにちは。2017年になりました。前回の酉年に起こった出来事というと和泉元彌がプロレスデビューした年だそうです。空中元彌チョップ...忘れられないですね。前回に引き続きjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。「HTML、CSSでコーディングはできるけどjQueryも使えるようになりたい」そんな方です。Blog脱jQuery初心者!コピペに頼らないプログラミング入門講座~その1~こんにちは。気が付けばもう12月ですね。2016年も残り一か月です。皆さん年内にやり残したことはありませんか?「2016年はjQueryのコードを自前で書く勉強をはじめようと思っていたのに先延ばしにして結局手つかず」なんて方もいるんじゃないで...前回はjQueryで記述を行っていく際の基本的な考え方と簡単なクリックイベントについてご紹介しましたが、今回はjQueryでclassを追加、削除する方法についてご紹介していきます。応用編、addClassとremoveClassを両方使ってみよう今回のまとめclassの追加addClassというメソッドを利用するとセレクターで指定した要素に任意のclassを付与することが出来ます。前回の講座でいう「なにをする...」の部分ですね。書き方はこんな感じです。("セレクター").addClass("付与したいクラス名");ちょっとやってみます。下記サンプルは「猫でなくす」ボタンを押すと猫がおじさんに変わります。これは、猫の画像が入っているdivにclass=”nekodenai”を追加することでCSSのbackground-imageで設定しているCSSを上書きするような仕組みになっています。});});classの削除removeClassというメソッドを利用するとセレクターで指定した要素に付与されているclassを削除することができます。書き方はこんな感じです。("セレクター").removeClass("削除したいクラス名");では先ほどのサンプルを利用して実際にやってみます。下記サンプルは「猫にする」ボタンを押すとおじさんが猫に戻ります。これは、おじさんの画像が入っているdivからclass=”nekodenai”を削除することでCSSのbackground-imageで上書きしていたおじさんの画像を表示するCSSを効かないようにする処理になっています。ちなみにremoveClassは括弧内のクラス名を指定しないと、付与されているすべてのclassを削除します。使うので覚えておいて損はないと思います。("セレクター").removeClass();それではremoveClassを使ってみましょう。});});応用編、addClassとremoveClassを両方使ってみよう下記サンプルは「猫でなくす」ボタンを押すと猫がおじさんに変わり、「猫にする」ボタンを押すとおじさんから猫に戻す処理になっています。});});今回のまとめaddClass要素に任意のclassを付与できるメソッド。removeClass要素に付与されているclassから任意のものを削除できるメソッド。要素に付与されているclass全てを削除することもできる。前回と今回の講座でクリックイベント、クラスの付与、削除ができるようになりました。次回はif文による条件分岐を紹介したいと思います。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。