そのほかjQueryでできること・・・入力フォームとかAjaxとか

jQueryでは、入力フォームの値を取得したり、Ajaxでサーバーとやり取りしたりできます。
入力フォームはともかく、Ajaxとかjsonとか言い出すと、企業によってはコーダー（デザイナー）が手を出すんじゃねーとかなりかねないので、jqueryとかjsとかある程度勉強して判ってきたら、手を出すようにしてください。
実際の業務でいじるときは、開発担当者（システム担当とかプログラマーとか企業によって呼び名は異なりますが）と運用ルールとかもろもろ確認した上で、いろいろやってみましょう。

下記のサンプルは、サーバがどうのとか、開発担当者にお小言食らわない程度のものです。

sample1

html

<form action="#">
  <input type="text" value="">
</form>

企業によってはフォームで何やらやるときは、ほとんど開発担当側でやってくれて（というかむしろコーダーとかがいろいろやると嫌がられたりする場合も・・・）、フォームに関する諸々の設定はせいぜい入力フォームなのか、ラジオボタンなのか・・・等々程度だったりします。
そういうわけで、企業によってはhtmlコーダー（やデザイナー）がフォームに対してjqueryを使うことはあまりなかったりしますが、使いそうなものとしてはテキストフォームに「入力してください」と表示しておいて、フォーカスすると文字が消えて入力できるようになるというものがあります。 htmlは上記のようになっています。

これはhtml5ではjqueryを使わなくても、placeholder属性を使って簡単に実現できます。

js

$(function(){
  $("input").val("入力してください").css("color","#ccc").one("focus",function(){
    $(this).val("").css("color","#000");
  }).blur(function(){
    if($(this).val()==""){
      $(this).val("入力してください").css("color","#ccc").one("focus",function(){
        $(this).val("").css("color","#000");
      })
    }
  })
});
  • val()はinputタグのvalue属性の値を取得したり、value属性に値を渡したりしています。1行目のval("入力してください")で「入力してください」という文字列の値をvalue属性に渡しています。
  • inputタグに対して続けざまに、なにかしてほしい場合は、.（ドット）でつないでいきます。ここではcss()でcolorプロパティを変更しています。
  • さらに、inputタグにフォーカスしたときの処理を1度だけ実行させています。
    thisはセレクターのことなので、ここではinputタグです。
    inputタグにフォーカスしたら、value属性の値を空にし（「入力してください」を削除し）、colorプロパティを変更させています。
  • つづけてinputタグに別なイベントがあった時の処理を記述しています。blur()はフォーカスが外れたときの処理をします。
    ここではif文を使って、value属性の値が空だった場合の処理だけを記述しています。
    一度フォーカスが当たって、外れたとき、inputのvalue属性の値が空ならば、また「入力してください」という文字列の値をvalue属性に渡し、colorプロパティを変更し、またフォーカスしたときの処理を与えています・・・つまり、one()は1度しか実行しないのですが、こうすることでフォーカスが当たるか外れるかによって繰り返し処理と同じような状況になります。

このような感じで入力フォームに対して処理をするのですが、詳しくは以下を参照してください。

sample2

html

<p class="jq"></p>

Ajaxとは「Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態」（引用元：IT用語辞典 e-Words）だそうです。
詳しいことはgoogle先生にお任せすることにして、サーバーとちょっとやり取りしたいというときに便利なものです。
たとえば、webページにgoogleマップを埋め込んだりしたことがあると思いますが、googleマップもAjaxを使っています。

とりあえず、サーバとやりとりってどういうこと？と言う人のために、簡単なものをちょっとだけご紹介します。

サンプル2のhtmlは見ての通りタグの中身は空です。
ここにサーバにアップされているテキストファイルを読み込むことで、サンプルのように文字を表示させています。

js

$(function(){
  $(".jq").load("テキストファイルのパス");
})

ここではload()を使って、セレクターで指定した要素内にテキストファイルを読み込んでいます（コードを試すときは、一部のブラウザではローカル環境で確認できないので、サーバーにアップしてから確認してください）。
このとき、テキストファイルの文字コードとhtmlファイルの文字コードが同じである必要があります（つまるところ、UTF-8）。
当然ながら、改行は反映されないので、テキストファイルの中にbrタグなどを入れておく必要があります。

読み込むファイルはhtmlファイルでも大丈夫です。htmlファイルなら、そのhtmlソース内の一部だけ読み込むということもできます。

このように、外部からデータを取得したりできるので、rssを取得するといった場面でajax関連のapiを使ったりします。
ajaxについてここでは詳しく説明しませんが、以下のリンクを参照したり、google先生に訊いてください（参考までにjQuery以外でのAjaxの利用方法についてのwebページも掲載してあります）。

上記のリンクにもありますが、jQueryのバージョンによって違いがあるので、注意してください。

戻る

Top