site_make

jQueryの使い方

2015-01-19

イラストサイトにおいて「イラストギャラリー」って重要ですよね。
少ないスペースでどれだけユーザーが簡単に、かつ多くのイラストを見せられるかがポイントになってきます。
いちいちページを移動したり、たんたんと切り替えて表示するのはユーザー側になるとイラストも見る時間が少なくなっていきます。できるかぎり楽しんでギャラリーを見て頂く為にオリジナルで作ってみましょう。

jQueryとは

jquery

jQueryとは簡単にjavascriptを簡単に記述できるライブラリです。
javascriptだとwindow.document.getElementById(‘illust’)で対象を指定しますが
jQueryを読み込んでからだと$(‘#illust’)で指定できてしまいます。

ほかにも$(‘#illust’).animate({‘width’:90 + ‘px’});でアニメーションさせることができてしまいます。

jQueryの導入

ということで「jQuery」を使ってみましょう。ちなみにjavascriptはできなくてもjQueryはできる人も多いので使っていってみますよ。

まず、jQueryをダウンロードしましょう。
http://jquery.com/
ダウンロードしましたらhtmlの<head>の中にリンクを書きます。場所はcssの下あたりがいいでしょう。


 <script type="text/javascript" src="jquery.js"></script>

これを書くとjQueryは読み込まれます。でも、このファイルは命令文ではありませんので命令を書く「***.js」ファイルも作りましょう。


 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src=" 命令文.js"></script>

ポイントはファイルは上から順番に読み込まれていきますのでjQueryの下に命令文.jsを設置して下さい。ファイル名は英数半角で付けて下さいねw(分りやすいように”命令文”としています。)
これで準備はOKです。

書き方の基本

jQueryには書き方があります。javascriptですので普通のjavascriptを混ぜても大丈夫なのですが基本的な書き方がありますので押さえましょう。

まず、初めに書くことがあります。


 $(function(){
	 ここに命令を書いていきます。
 });

これはhtmlのタグやファイルがすべて読まれたら実行します。という意味です。
「ready」状態ですね。準備OKということです。

javascriptは「何に何をしたら、何がどうなったら・・・これをしろ!!」という文法ですので実際に書くとこうなります。


 $(function(){
  $("#menu").click(function(){
   $("#lnav").stop().animate({"width":"280px"},1000);
  });
 });

これは当サイトのメニュー画面が出てくる命令文の一部です。
id=”menu”」をclick(押したら)「id=”lnav”」はstop(今の動きをやめて)animate(アニメーションで1秒かけて)横幅を280pxにしなさい。

どうでしょうか?
がタグ<div id=”***”>です。がスイッチです。がアクションです。

copyright 2017 eo
  プロフィール  PR:無料HP  湯沢自動車学校  ゲーム 制作  IID  中古ホイール 三重  タイヤ 格安  Webディレクター 専門学校  BATTLEZ  秩父自動車学校  水晶  長崎 合宿免許  音楽 専門学校 福岡  ランドクルーザー トヨタ 中古  リノベーションセミナー