1新人さん達にWEB制作とは何たるかをレクチャーすべく始まった社内勉強会。初歩から学ぶ「アレコレ」。講師を務めるにあたり、資料作りをする中で意外な発見や、小さな疑問の解決など振り返るのはとても大切なことですね~というわけで、私の苦手分野「jQuery」。プラグインコピペで出来る子を気取っていた松本によるイチから振り返る「jQueryアレコレ」。jQueryとはなんぞや??と調べてみるとjQueryjQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。ウィキペディアより簡単に言うとjQueryとはJavascriptのライブラリ(複数のプログラムを再利用可能な形でひとまとまりに簡素化したもの)のひとつ。これを使用すれば、複雑になりがちなJavascriptのコードを書くこと無しに、簡単なコードでJavascriptを実行できるようになる、と言うわけです。more.」の言葉の通り。「より少ない書き方で、もっと多くこなす」なるほど。headタグ内にjQuery本体を読み込むheadタグ内にjQuery本体を読み込むjQueryを使用したいページのheadタグ内に、jQueryを呼び込むためのタグを書く。1.jQuery公式サイトからDL※特別な理由がない限り、最新版ライブラリの「Minified(圧縮版)」をDLすれば良い。※実装は簡単ですが、ネット環境のある場所でないとjQueryが動きません。jQueryを書くコードを書く場所jQueryのコードは、headタグ内、jQuery本体のコードの後に記述。※コードの煩雑化を防ぐために外部ファイルから読み込む方が良い。CSSを外部読み込みにしている場合は、コードはCSS読み込みタグの後に配置すること。これはjQueryに限ったことではないですが、JavascriptはCSSの様に同時に読み込んではくれず、それぞれに処理の時間がかかります。HTMLは上から記述してあるものを順番に読み込んでいくため、途中で読み込みの時間がかかるような事があるとページの表示速度に影響を及ぼしてしまう。jQueryの基本的な形まずは基本形js$(function(){ここにjQueryの処理を記述});全てがこの形ではないですが、ひとまず現段階ではこれだけ覚えちゃいます。js$(function(){$('A').B()});Aを「セレクタ」と言い、Bを「メソッド」、Bの直後の括弧内を「パラメータ」と言います。※パラメータは必ずしも必要なわけではなく、パラメータを用いないメソッドもあります。「セレクタ」とは任意の範囲、要素を指定するためのもので、jQueryを覚える上で欠かせない要素です。...ですがセレクタはCSSと同じような記述をするため、私にも出来るような気がしてきました。(セレクタは「“」(ダブルクォーテーション)、もしくは「’」(シングルクォーテーション)で囲うのを忘れずに。)「“」(ダブルクォーテーション)、または「’」(シングルクォーテーション)で囲まれた箇所は文字列として認識されます。class=”demo01′′>デモテキストデモテキストデモテキスト<br>デモテキストデモテキストデモテキスト<br>デモテキストデモテキストデモテキスト<br>でも。上記のコードがあったとすると、ブラウザで表示すると以下のようになります。デモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストでも。「.demo01」のcssのcolorをredにするという命令がされます。スタイルシートを変更せずにテキストが赤色になりました。class=”demo01′′>デモテキストデモテキストデモテキスト<br>デモテキストデモテキストデモテキスト<br>デモテキストデモテキストデモテキスト<br>でも。声お問い合わせNORENは、株式会社のれんの登録商標です。弊社は、株式会社のれんと提携しNOREN製品をご提案・ご提供しております。