jQuery概要

2010.11.19 0:35

jQueryはこんな様子(概要)

 こてこてのプログラム言語...というのではなくて、CSSやHTML、FlashなんかでいろいろとWebデザインしている人には比較的簡単に理解できるのが、jQueryのいいところです。細かいことは抜きにして実際にいじってみると結構動く。そこらあたりがなかなかいいです。その最大の特徴とは、
  • XHTMLタグへのアクセスがCSSのidアクセスのように簡単にできる。文法的にも殆ど同じで、#idとか#titleみたいにそのIDが設定されたところへいろんなことができます。
  • 繰り返し処理がない。これは、forとか、foreachとかwhileとかどの言語にも見られるような繰り返しの処理がありません。これが簡単なんだかシンプルなんだかよくわかりませんが、繰り返し処理がなくて何となく変な感じ。しかし繰り返し処理があるということは、つまりは「繰り返し処理を1発でやっちゃえばいいので...」というわけで繰り返し処理がなくなっています。
  • メソッドチェーンと呼ばれる方法で、複数の処理をまとめてかける。これも簡単なんだか難しいんだかよくわかりませんが、どんどんメソッドを入れ子にしてまるで一つのメソッドみたいに書けます。一つ一つの処理を上から順番に行うプログラム言語になれているとちょっと面食らうかも。
  • 関連ライブラリ(プラグイン)がすごい。簡単。無料。自分で書かなくていいので楽。
  • コードがシンプルで短い。
こんな感じです。

jQueryの入手

 自分でダウンロードしてサーバーに設置することも可能ですが、バージョンアップしたりなんなりで面倒なので、
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Google先生から引っ張ってくるのが簡単でいいです。
こんな書き方もできます。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
こんな風に書くと、1.4.xの最新バージョンが自動的にダウンロードされるので非常にいいです。

自分でダウンロードして中身をみてみたいという人は、http://docs.jquery.com/Downloading_jQueryからダウンロード可能です。
Current Release 1.4.4 (Release Notes) Minified, Uncompressedとなっていますが、Uncompressdでいいんじゃないかと思われます。


基本的な使い方

 javascriptと殆ど同じようなものなのですが、
<script type="text/javascript"><!--
 ---ここにjqueyコードを書く---
// --></script>
ということになっています。
または、xhtmlに直接書く場合(外部ファイルにしない場合)は、
<script type="text/javascript">//<![CDATA][
 ---ここにjqueyコードを書く---
//]]</script>
というように書くこともできます。というか、こっちで書いた方がいいと思います。最近のブラウザで<script>タグを理解しないということは殆どないと思うので<!---->とか必要あるんですかね。


外部ファイルに記述する

<script type="text/javascript" src="js/sample.js" charset="utf-8"></script>
とかいう風に呼び込みます。外部ファイルに記述する場合は、頭からゴリッとjqueryを書いてしまって構いません。<? ?>のとか#!/usr/bin/perlみたいなものも必要ないです。

というわけで、htmlのヘッダはこんな感じになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> 
<head> 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
      <meta name="generator" content="omnioo" /> 
      <meta name="description" content="" /> 
      <meta name="keywords" content="" /> 
      <link rel="stylesheet" href="" type="text/css" />  
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
      <script type="text/javascript">//<![CDATA][
             ---ここにjqueyコードを書く---
      //]]</script>
</head>
...

文字コード

UTF-8がおすすめ





 







プロフィール



  • Name :: 山上オサム ♂(39)
  • Hobby :: 武術
  • Work :: Web Designer