<?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>ホップススタッフブログ &#187; jQuery</title>
	<atom:link href="http://www.hops.co.jp/diary/archives/tag/jquery/feed" rel="self" type="application/rss+xml" />
	<link>http://www.hops.co.jp/diary</link>
	<description>ホップスは岩手・盛岡のWEBサイト制作会社です。</description>
	<lastBuildDate>Thu, 15 Sep 2011 01:56:03 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>＼みんなでjQueryやろうぜ／</title>
		<link>http://www.hops.co.jp/diary/archives/2010/06/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%a7jquery%e3%82%84%e3%82%8d%e3%81%86%e3%81%9c.html</link>
		<comments>http://www.hops.co.jp/diary/archives/2010/06/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%a7jquery%e3%82%84%e3%82%8d%e3%81%86%e3%81%9c.html#comments</comments>
		<pubDate>Mon, 21 Jun 2010 07:28:05 +0000</pubDate>
		<dc:creator>辻</dc:creator>
				<category><![CDATA[TIPS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[リファレンス]]></category>

		<guid isPermaLink="false">http://www.hops.co.jp/diary/?p=304</guid>
		<description><![CDATA[１）jQuery（ジェイクエリー）って何だろう？ jQueryはJavaScriptが一つにまとまったライブラリ何です。 ２）jQueryって何ができるの？ たとえばWebサイトにアニメーションを付けたり、CSSやHTM &#8230; <a href="http://www.hops.co.jp/diary/archives/2010/06/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%a7jquery%e3%82%84%e3%82%8d%e3%81%86%e3%81%9c.html">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="margin: 0 auto; width: 540px;">
<div style="margin: 0 0 30px;"><a href="http://www.hops.co.jp/diary/wp-content/uploads/8c0c3027e3cfc3d644caab3847a505b0.jpg"><img class="alignnone size-full wp-image-305" title="みんなでjQueryやろうぜ！" src="http://www.hops.co.jp/diary/wp-content/uploads/8c0c3027e3cfc3d644caab3847a505b0.jpg" alt="みんなでjQueryやろうぜ！" width="540" height="160" /></a></div>
<div style="margin: 0 0 30px;">
<h3>１）jQuery（ジェイクエリー）って何だろう？</h3>
<p>jQueryはJavaScriptが一つにまとまったライブラリ何です。</p>
</div>
<div style="margin: 0 0 30px;">
<h3>２）jQueryって何ができるの？</h3>
<p>たとえばWebサイトにアニメーションを付けたり、CSSやHTMLをリアルタイムで編集したり、Ajax（非同期通信）を簡単にやることができます。</p>
</div>
<div style="margin: 0 0 30px;">
<h3>３）こんな所でjQueryが使われてるんだよ！</h3>
<p>たとえばまがりや.netの商品詳細ページ！</p>
<p>⇒参考サイト：<a href="http://www.magariya.net/product_info.php?products_id=236">まがりや.netの商品詳細ページ</a></p>
<p>写真のサムネイルをクリックすると、フェードの効果をしながら、写真が切り替わる。</p>
<p>これ、実はjQueryを使ってやってるんです。</p>
</div>
<div style="margin: 0 0 30px;">
<h3>４）jQueryの使い方</h3>
<p>jQueryを使うには本体のJavaScriptファイルをダウンロードします。</p>
<p>⇒jQueryのダウンロード先：<a href="http://jquery.com/">http://jquery.com/</a> （jquery-1.4.2.min.js）</p>
<p>ページ右側の「Download(jQuery);」を押すとソースコードが表示されるのでブラウザで「名前を付けてページ保存」をする。</p>
<p>すると、パソコンに「jquery-1.4.2.min.js」というファイルがダウンロードされている。</p>
<p>これをHTMLに書いて、jquery-1.4.2.min.jsを読み込まされる。</p>
<p>以下のコードをの直前に書いてあげる。</p>
<p>[javascript]&lt;script src=&quot;jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;[/javascript] するとHTMLにjQueryが読み込まれて使える状態になる。  ただ、これだけだと何もすることができない。
</p></div>
<div style="margin: 0 0 30px;">
<h3>５）jQueryに命令してみる。</h3>
<p>HTMLに読み込んだだけだと何も起きない。  命令文（コード）を書かかないといけないのです。  ちょっと試しに以下の命令文を  先ほど読み込んだjQueryの下に書いてみよう。<br />
[javascript]<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
$(document).ready(function(){ //ページがロードされたら実行<br />
	$(&quot;body&quot;).click(function() { //bodyタグをマウスでクリックしたら<br />
		$(this).animate({opacity: &quot;hide&quot;}, &quot;fast&quot;); //bodyタグ（this）、アニメーション「すばやくフェードアウトしながら透明になる」<br />
	});<br />
});<br />
&lt;/script&gt;<br />
[/javascript]<br />
ページを開いてどこかクリックしたら全体が透明になり消える命令文がかけました。</p>
<p>この様に命令文を書いて指示をすることで、簡単にアニメーションができます。</p>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.hops.co.jp/diary/archives/2010/06/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%a7jquery%e3%82%84%e3%82%8d%e3%81%86%e3%81%9c.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

