Blog2016.12.05miura脱jQuery初心者!コピペに頼らないプログラミング入門講座~その1~Web制作JavaScriptプログラミングjQueryシェアTweetこんにちは。気が付けばもう12月ですね。2016年も残り一か月です。皆さん年内にやり残したことはありませんか?「2016年はjQueryのコードを自前で書く勉強をはじめようと思っていたのに先延ばしにして結局手つかず」なんて方もいるんじゃないでしょうか。いますよね?きっといるはずです!それなら今から始めましょう!ということでこれから数回に渡ってjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。「HTML、CSSでコーディングはできるけどjQueryも使えるようになりたい」そんな方です。jQuery本体の読み込み、コードを記述しはじめるまでの作業は今回割愛させて頂きます。簡単な記述からはじめようjQueryで記述を行う際の基本的な考え方セレクターメソッドクリックイベント今回のまとめ簡単な記述からはじめようまずは下記をご覧ください。});上記はページのロード時にclassに”neko”が付与されている要素の文字色を#FF4D4D(赤)に変更する処理です。jQueryで記述を行う際の基本的な考え方いつ、どんな時...ページロード時、クリック時、マウスオーバー時、などなどどんな場合...何らかの数値が大きい場合、小さい場合、class”hogehoge01′′の場合、class”hogehoge02′′の場合、などなど(「どんな場合」についての詳しい説明は今後の講座で行いたいと思います。)どこのだれ...id”hoge”を持つ要素、class”hogehoge”を持つ要素、div、p、などなどなにをする...CSSを変更する、要素を見えなくする、要素を表示する、テキストを差し替える、などなどこれらを様々に組み合わせたコードを書いていきます。jQueryはこのあたりが直感的でわかりやすいですね。‘#FF4D4D’);ということになります。「どこのだれ」の部分を今回は$(“.neko”)としましたがもちろんIDも使えます。$(“#neko”)でも問題ありません。これらのことをCSSと同じく「セレクター」といいます。ほとんど記述の仕方もCSSと同じなのでCSSを使ったコーディングを普段行っている方にはとっつきやすいかもしれません。.koneko”)のような記述もできます。‘#FF4D4D’);のような要素のことを「メソッド」といいます。セレクターの後にメソッドを記述することで「だれ」に「なにをするか」が決まります。メソッドに関してはメソッドチェーンと言ってひとつのセレクターに対して連続でメソッドを呼び出す方法もあるので覚えておいてください。});ちなみに下と上は同じ処理になります。メソッドチェーンを使った上の方が簡単ですね。});メソッドチェーンとは関係ありませんが.css()を複数のプロパティを設定したい場合に下記のような書き方をしても同じ処理になります。.css()を複数のプロパティで指定する場合は下記の記述が一般的です。});以上を踏まえて先ほどのコードにちょっと変更を加えていきましょう。クリックイベント下に表示されるclickと書かれたボタンをクリックしてみてください。});});clickと書かれたボタンをクリックすると「吾輩は猫である」と書かれたテキストの色、文字の大きさ、文字の太さが変わったと思います。});});記述はこうなっています。いうコードなのか解説していきます。‘#333333’フォントサイズをを25pxに変更する...‘font-size’,’25px’文字のウェイトを太字に変更する...‘font-weight’,’bold’まとめると、ページを読み込んでから、クラス”.btn”を持つ要素をクリックした時にクラス”neko”を持つ要素の文字色を#333333に、フォントサイズを25pxに変更する、文字のウェイトを太字に変更する。これがクリックすることで起こるイベントですね。今回のまとめjQueryで記述を行う際の基本的な考え方いつ、どんな時...ページロード時、クリック時、マウスオーバー時、などなどどんな場合...何らかの数値が大きい場合、小さい場合、class”hogehoge01′′の場合、class”hogehoge02′′の場合、などなど(「どんな場合」についての詳しい説明は今後の講座で行いたいと思います。)どこのだれ...id”hoge”を持つ要素、class”hogehoge”を持つ要素、div、p、などなどなにをする...CSSを変更する、要素を見えなくする、要素を表示する、テキストを差し替える、などなどセレクターの後にメソッドを記述することで「だれ」に「なにをするか」が決まる。クリックイベント$(“セレクター”).on(“click”,function(){//ここに処理を記述する});次回はjQueryでclassを追加、削除するやり方を紹介したいと思います。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。