<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>新人webコーダーの覚え書き &#187; Ajax</title>
	<atom:link href="http://kazu-memo.com/category/ajax/feed" rel="self" type="application/rss+xml" />
	<link>http://kazu-memo.com</link>
	<description>新人のwebコーダーが新しく覚えた事を忘れないようにメモするサイトです。</description>
	<lastBuildDate>Tue, 12 Jul 2011 02:27:49 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>jQueryによるアニメーションエフェクト</title>
		<link>http://kazu-memo.com/ajax/76.html</link>
		<comments>http://kazu-memo.com/ajax/76.html#comments</comments>
		<pubDate>Tue, 05 Oct 2010 06:17:54 +0000</pubDate>
		<dc:creator>kazu</dc:creator>
				<category><![CDATA[Ajax]]></category>

		<guid isPermaLink="false">http://kazu-memo.com/?p=76</guid>
		<description><![CDATA[
フェイドインする。スピードの部分は、slow／norma／fast もしくは、ミリ秒（1秒＝1000秒）で指定できます。ミリ秒で指定する数字は、&#8221;（ダブルクォーテーション）で囲う必要はありません。
コールバ]]></description>
			<content:encoded><![CDATA[<p>
<pre class="brush: jscript; title: ; notranslate">&lt;br /&gt;
$(セレクター).show(スピード,コールバック関数);&lt;br /&gt;
</pre>
</p>
<p>フェイドインする。スピードの部分は、slow／norma／fast もしくは、ミリ秒（1秒＝1000秒）で指定できます。ミリ秒で指定する数字は、&#8221;（ダブルクォーテーション）で囲う必要はありません。</p>
<p>コールバック関数は、アニメーション処理が終わった後に続けて実行される命令です。「処理が終わったら、この関数を呼び出して」と指定するのでコールバック関数と呼ばれます。function(){&#8230;} で指定し、{&#8230;} 内に命令を記述します。jQueryはメソッドチェーンで続けて実行する命令を記述できますが、メソッドチェーンで記述した命令がアニメーションの終了を待たずにすぐに実行されるのに対して、コールバック関数として記述した命令はアニメーションが完了してから実行されます。</p>
<p class="ando1">アニメーションエフェクト関連の命令</p>
<table class="style1" style="width: 500px;">
<thead>
<tr>
<th>命令 </th>
<th>意味 </th>
</tr>
</thead>
<tbody>
<tr>
<td>show(&#8230;)</td>
<td>要素を徐々に表示する</td>
</tr>
<tr>
<td>hide(&#8230;)</td>
<td>要素を徐々に非表示にする</td>
</tr>
<tr>
<td>toggle(&#8230;)</td>
<td>要素の表示／非表示を徐々に切り換える</td>
</tr>
<tr>
<td>slideDown(&#8230;)</td>
<td>要素をスライドアニメーションで表示する</td>
</tr>
<tr>
<td>slideUp(&#8230;)</td>
<td>要素をスライドアニメーションで非表示にする</td>
</tr>
<tr>
<td>slideToggle(&#8230;)</td>
<td>要素の表示／非表示をスライドアニメーションで切り換える</td>
</tr>
<tr>
<td>fadeIn(&#8230;)</td>
<td>要素をフェードインで表示する</td>
</tr>
<tr>
<td>fadeOut(&#8230;)</td>
<td>要素フェードアウトで非表示にする</td>
</tr>
<tr>
<td>fadeTo(&#8230;)</td>
<td>要素の透明度を指定した値に徐々に変更する</td>
</tr>
<tr>
<td>animate(&#8230;)</td>
<td>任意のCSSプロパティの値を徐々に変更する</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://kazu-memo.com/ajax/76.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQueryによるフォームのデザインの基礎</title>
		<link>http://kazu-memo.com/ajax/68.html</link>
		<comments>http://kazu-memo.com/ajax/68.html#comments</comments>
		<pubDate>Tue, 05 Oct 2010 06:04:20 +0000</pubDate>
		<dc:creator>kazu</dc:creator>
				<category><![CDATA[Ajax]]></category>

		<guid isPermaLink="false">http://kazu-memo.com/?p=68</guid>
		<description><![CDATA[はフォーム部品の種類を決める type属性に関係なく、すべてのinput要素のvalue属性の値を取得します。
value属性がないtextarea要素の場合も、入力されているテキストを取得できます。
]]></description>
			<content:encoded><![CDATA[<pre class="brush: jscript; title: ; notranslate">
$(&quot;select&quot;).val();
</pre>
<p>はフォーム部品の種類を決める type属性に関係なく、すべてのinput要素のvalue属性の値を取得します。</p>
<pre class="brush: jscript; title: ; notranslate">
$(&quot;textarea&quot;).val();
</pre>
<p>value属性がないtextarea要素の場合も、入力されているテキストを取得できます。</p>
]]></content:encoded>
			<wfw:commentRss>http://kazu-memo.com/ajax/68.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>(X)HTML/CSSを操作するjQueryの命令のまとめ</title>
		<link>http://kazu-memo.com/ajax/51.html</link>
		<comments>http://kazu-memo.com/ajax/51.html#comments</comments>
		<pubDate>Tue, 05 Oct 2010 05:00:11 +0000</pubDate>
		<dc:creator>kazu</dc:creator>
				<category><![CDATA[Ajax]]></category>

		<guid isPermaLink="false">http://kazu-memo.com/?p=51</guid>
		<description><![CDATA[CSSを操作する命令



名称 
書式 
指定対象 




CSSでよく利用されるセレクター


要素セレクター
$(&#8220;要素名&#8221;)
特定のhtml要素


IDセレクター
$(&#8220;#]]></description>
			<content:encoded><![CDATA[<p class="ando1">CSSを操作する命令</p>
<table class="style1" style="width: 650px;">
<thead>
<tr>
<th>名称 </th>
<th>書式 </th>
<th>指定対象 </th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="3">CSSでよく利用されるセレクター</td>
</tr>
<tr>
<td>要素セレクター</td>
<td>$(&#8220;要素名&#8221;)</td>
<td>特定のhtml要素</td>
</tr>
<tr>
<td>IDセレクター</td>
<td>$(&#8220;#ID名&#8221;)</td>
<td>特定のid属性の値を持つ要素</td>
</tr>
<tr>
<td>クラスセレクター</td>
<td>$(&#8220;.クラス名&#8221;)</td>
<td>特定のclass属性の値を持つ要素</td>
</tr>
<tr>
<td>子孫セレクター</td>
<td>$(&#8220;要素1 要素2&#8243;)</td>
<td>特定の要素の内側にある要素</td>
</tr>
<tr>
<td>ユニバーサルセレクター</td>
<td>$(&#8220;*&#8221;)</td>
<td>すべての要素</td>
</tr>
<tr>
<td>グループセレクター</td>
<td>$(&#8220;セレクター1,セレクター2,&#8230;&#8221;)</td>
<td>複数のセレクター</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="3">CSS2のセレクター</td>
</tr>
<tr>
<td>子セレクター</td>
<td>$(&#8220;親要素名 > 子要素名&#8221;)</td>
<td>特定の要素の直下の子要素</td>
</tr>
<tr>
<td>隣接セレクター</td>
<td>$(&#8220;要素1 + 要素2&#8243;)</td>
<td>特定の要素の次の要素</td>
</tr>
<tr>
<td>first-child擬似クラス</td>
<td>$(&#8220;要素:first-child&#8221;)</td>
<td>特定の要素内の最初の要素</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="3">CSS3のセレクター</td>
</tr>
<tr>
<td>間接セレクター</td>
<td>$(&#8220;要素1 ~ 要素2&#8243;)</td>
<td>特定の要素の後に出現する要素</td>
</tr>
<tr>
<td>否定擬似クラス</td>
<td>$(&#8220;要素1:not(要素2)&#8221;)</td>
<td>特定の要素内の指定した要素以外の要素</td>
</tr>
<tr>
<td>empty擬似クラス</td>
<td>$(&#8220;要素:empty&#8221;)</td>
<td>子要素やテキストを含まない要素</td>
</tr>
<tr>
<td>nth-child擬似クラス</td>
<td>$(&#8220;要素:nth-child(番号)&#8221;)</td>
<td>特定の要素内の指定した番号の要素</td>
</tr>
<tr>
<td>last-child擬似クラス</td>
<td>$(&#8220;要素:last-child&#8221;)</td>
<td>特定の要素内の最後の要素</td>
</tr>
<tr>
<td>only-child擬似クラス</td>
<td>$(&#8220;要素:only-child&#8221;)</td>
<td>指定した要素が1つだけ含まれる特定の要素</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="3">CSSの属性セレクター</td>
</tr>
<tr>
<td>[attribute]</td>
<td>$(&#8220;[属性名]&#8220;)</td>
<td>特定の属性を持つ要素</td>
</tr>
<tr>
<td>[attribute='value']</td>
<td>$(&#8220;[属性名='値']&#8220;)</td>
<td>特定の属性が指定した値を持つ要素</td>
</tr>
<tr>
<td>[attribute!='value']</td>
<td>$(&#8220;要素名[属性名!='値']&#8220;)</td>
<td>特定の属性が指定した値を持たない要素</td>
</tr>
<tr>
<td>[attribute^='value']</td>
<td>$(&#8220;[属性名^='値']&#8220;)</td>
<td>特定の属性が特定した値で始まっている要素</td>
</tr>
<tr>
<td>[attribute$='value']</td>
<td>$(&#8220;[属性名$='値']&#8220;)</td>
<td>特定の属性が特定した値で終わっている要素</td>
</tr>
<tr>
<td>[attribute*='value']</td>
<td>$(&#8220;[属性名*='値']&#8220;)</td>
<td>特定の属性が特定した値を含んでいる要素</td>
</tr>
<tr>
<td>[attributeFilter1][attributeFilter2]</td>
<td>$(&#8220;[属性セレクター1][属性セレクター2]&#8220;)</td>
<td>複数の属性セレクターに該当する要素</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="3">jQueryの独自フィルター</td>
</tr>
<tr>
<td>firstフィルター</td>
<td>$(&#8220;要素:first&#8221;)</td>
<td>指定した要素の最初の要素</td>
</tr>
<tr>
<td>lastフィルター</td>
<td>$(&#8220;要素:last&#8221;)</td>
<td>指定した要素の最後の要素</td>
</tr>
<tr>
<td>evenフィルター</td>
<td>$(&#8220;要素:even&#8221;)</td>
<td>指定した要素の偶数番目の要素</td>
</tr>
<tr>
<td>oddフィルター</td>
<td>$(&#8220;要素:odd&#8221;)</td>
<td>指定した要素の奇数番目の要素</td>
</tr>
<tr>
<td>eqフィルター</td>
<td>$(&#8220;要素:eq(番号)&#8221;)</td>
<td>指定した番号の要素（番号は0から数える）</td>
</tr>
<tr>
<td>gtフィルター</td>
<td>$(&#8220;要素:gt(番号)&#8221;)</td>
<td>指定した番号より後の要素（番号は0から数える）</td>
</tr>
<tr>
<td>ltフィルター</td>
<td>$(&#8220;要素:lt(番号)&#8221;)</td>
<td>指定した番号より前の要素（番号は0から数える）</td>
</tr>
<tr>
<td>headerフィルター</td>
<td>$(&#8220;要素:header&#8221;)</td>
<td>h1～h6までのheader要素</td>
</tr>
<tr>
<td>containsフィルター</td>
<td>$(&#8220;要素:contains(文字列)&#8221;)</td>
<td>特定の文字列が含まれている要素</td>
</tr>
<tr>
<td>hasフィルター</td>
<td>$(&#8220;要素1:had(要素2)&#8221;)</td>
<td>特定の要素が含まれている要素</td>
</tr>
<tr>
<td>parentフィルター</td>
<td>$(&#8220;要素:parent&#8221;)</td>
<td>子要素やテキストを含む要素</td>
</tr>
</tbody>
</table>
<p class="ando1">HTMLを操作する命令</p>
<table class="style1" style="width: 500px;">
<thead>
<tr>
<th>命令 </th>
<th>意味 </th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="2">テキストの変更と取得</td>
</tr>
<tr>
<td>text(&#8230;)</td>
<td>テキストを変更する</td>
</tr>
<tr>
<td>text()</td>
<td>テキストを取得する</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="2">（X)HTMLの変更と取得</td>
</tr>
<tr>
<td>html(&#8230;)</td>
<td>(X)HTMLを変更する</td>
</tr>
<tr>
<td>html()</td>
<td>(X)HTMLを取得する</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="2">(X)HTMLの挿入</td>
</tr>
<tr>
<td>prepend(&#8230;)</td>
<td>要素内の先頭に(X)HTMLを挿入する</td>
</tr>
<tr>
<td>append(&#8230;)</td>
<td>要素内の最後に(X)HTMLを挿入する</td>
</tr>
<tr>
<td>before(&#8230;)</td>
<td>要素の前に(X)HTMLを挿入する</td>
</tr>
<tr>
<td>after(&#8230;)</td>
<td>要素の後に(X)HTMLを挿入する</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="2">(X)HTMLの移動</td>
</tr>
<tr>
<td>prependTo(&#8230;)</td>
<td>他の要素内の先頭に要素を移動する</td>
</tr>
<tr>
<td>appendTo(&#8230;)</td>
<td>他の要素内の最後に要素を移動する</td>
</tr>
<tr>
<td>insertBefore(&#8230;)</td>
<td>他の要素の前に要素を移動する</td>
</tr>
<tr>
<td>insertAfter(&#8230;)</td>
<td>他の要素の後に要素を移動する</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="2">他の要素で包む</td>
</tr>
<tr>
<td>wrap(&#8230;)</td>
<td>要素を他の要素で包む</td>
</tr>
<tr>
<td>wrarpAll(&#8230;)</td>
<td>要素をまとめて他の要素で包む</td>
</tr>
<tr>
<td>wrapInner(&#8230;)</td>
<td>子要素/テキストを他の要素で包む</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="2">要素の置き換え</td>
</tr>
<tr>
<td>replaceWith(&#8230;)</td>
<td>要素を他の要素に置き換える</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="2">要素の削除</td>
</tr>
<tr>
<td>remove()</td>
<td>要素を削除する</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="2">属性値の変更と取得</td>
</tr>
<tr>
<td>attr(&#8230; , &#8230;)</td>
<td>指定した属性の値を変更する</td>
</tr>
<tr>
<td>attr(&#8230;)</td>
<td>指定した属性の値を取得する</td>
</tr>
<tr>
<td>removeAttr(&#8230;)</td>
<td>指定した属性を削除する</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="2">class属性の追加と削除</td>
</tr>
<tr>
<td>addClass(&#8230;)</td>
<td>class属性を追加する</td>
</tr>
<tr>
<td>removeClass(&#8230;)</td>
<td>class属性を削除する</td>
</tr>
<tr>
<td style="background-color: #a9a9a9; font-weight: bold;" colspan="2">CSSの制御</td>
</tr>
<tr>
<td>css(&#8230; , &#8230;)</td>
<td>指定したCSSプロパティの値を設定する</td>
</tr>
<tr>
<td>css(&#8230;)</td>
<td>指定したCSSプロパティの値を取得する</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://kazu-memo.com/ajax/51.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQueryの関数ready</title>
		<link>http://kazu-memo.com/ajax/46.html</link>
		<comments>http://kazu-memo.com/ajax/46.html#comments</comments>
		<pubDate>Tue, 05 Oct 2010 02:29:44 +0000</pubDate>
		<dc:creator>kazu</dc:creator>
				<category><![CDATA[Ajax]]></category>

		<guid isPermaLink="false">http://kazu-memo.com/?p=46</guid>
		<description><![CDATA[
このとき、ready関数の内側（{&#8230;}）に書かれている命令は、(X)HTMLの読み込みが終わった後に実行されます。これなら、head要素内のscript要素にスクリプトを書いた場合でも、body要素内の(X]]></description>
			<content:encoded><![CDATA[<pre class="brush: jscript; title: ; notranslate">
$(document).ready(function(){
    //ここにjQueryの命令を記述
})
</pre>
<p>
このとき、ready関数の内側（{&#8230;}）に書かれている命令は、(X)HTMLの読み込みが終わった後に実行されます。これなら、head要素内のscript要素にスクリプトを書いた場合でも、body要素内の(X)HTMLをちゃんと操作できます。</p>
<p>　ready関数は以下のような省略形でも使えます。</p>
<pre class="brush: jscript; title: ; notranslate">
$(function(){
    //ここにjQueryの命令を記述
})
</pre>
<p>
jQueryでスクリプトを書くときには、ほとんどの場合、まずready関数を記述し、その内側に実際の命令を記述していきます。jQueryを利用するときの1つの“決まりごと”として、覚える！</p>
]]></content:encoded>
			<wfw:commentRss>http://kazu-memo.com/ajax/46.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google AJAX Libraries APIによるjQueryの利用</title>
		<link>http://kazu-memo.com/ajax/39.html</link>
		<comments>http://kazu-memo.com/ajax/39.html#comments</comments>
		<pubDate>Tue, 05 Oct 2010 01:57:15 +0000</pubDate>
		<dc:creator>kazu</dc:creator>
				<category><![CDATA[Ajax]]></category>

		<guid isPermaLink="false">http://kazu-memo.com/?p=39</guid>
		<description><![CDATA[Google AJAX Libraries APIを利用するには、script要素でhttp://www.google.com/jsapi を読み込み、使用したいJavaScriptライブラリーとライブラリーのバージョン]]></description>
			<content:encoded><![CDATA[<p>Google AJAX Libraries APIを利用するには、script要素でhttp://www.google.com/jsapi を読み込み、使用したいJavaScriptライブラリーとライブラリーのバージョンを指定します。たとえば、jQueryの1.3.2を読み込むときは以下のように記述します。</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);&lt;/script&gt;
</pre>
<p>google.loadを利用せず、src属性で直接ライブラリーを指定しても読む込めます。
</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
</pre>
<p>以下のようにバージョン名の一部（マイナーバージョン）を省略すると、常に最新のバージョンを自動的に読み込んでくれます。</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;google.load(&quot;jquery&quot;, &quot;1.3&quot;);&lt;/script&gt;
</pre>
<p>この場合、1.3.xの最新バージョン――たとえば現在は1.3.2ですが、1.3.3がリリースされれば1.3.3が読み込まれるようになります。マイナーバージョンアップのほとんどがパフォーマンスの向上ですので、わざわざHTMLのscript要素を書き換えなくてもパフォーマンスの向上が望めます。</p>
<p>　ただし、マイナーバージョンアップにバグや仕様変更が含まれている場合、それらも自動的に反映されてしまいます。また、マイナーバージョンを指定した場合に比べてキャッシュの有効期間が短くなるため（バージョンを指定しない場合は1時間、指定した場合は1年間有効)、通常はマイナーバージョンを指定した方が無難です。</p>
]]></content:encoded>
			<wfw:commentRss>http://kazu-memo.com/ajax/39.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
