<?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>まよねこ inside &#187; jQuery</title>
	<atom:link href="http://mayoneco.com/blog/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://mayoneco.com/blog</link>
	<description>一般以上マニア未満　20代女子の迷いとか想いとか願いとか</description>
	<lastBuildDate>Fri, 23 Mar 2012 12:07:59 +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】thisの親や子要素の指定方法[リライト版]</title>
		<link>http://mayoneco.com/blog/2011/06/jquery_parent_child_2/</link>
		<comments>http://mayoneco.com/blog/2011/06/jquery_parent_child_2/#comments</comments>
		<pubDate>Sun, 05 Jun 2011 10:17:17 +0000</pubDate>
		<dc:creator>mayoneco</dc:creator>
				<category><![CDATA[memo]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://mayoneco.com/blog/?p=1238</guid>
		<description><![CDATA[jQueryで、&#8221;this&#8221;の親要素、子要素（子孫要素）を指定する記述方法のメモ、リライト版です。 （元々はこちら） 親要素 thisの親要素を取得 $(this).parent() &#8220 [...]]]></description>
			<content:encoded><![CDATA[<p>jQueryで、&#8221;this&#8221;の親要素、子要素（子孫要素）を指定する記述方法のメモ、リライト版です。<br />
（元々は<a href="http://mayoneco.com/blog/2011/01/jquery_parent_child/">こちら</a>）</p>
<h2 style="font-weight:bold;">親要素</h2>
<p>thisの親要素を取得</p>
<pre>$(this).parent()</pre>
<p>&#8220;<q cite="http://semooh.jp/jquery/api/traversing/parent/%5Bexpr%5D/">親要素を全て返す</q>&#8220;記述です。<br />
近いものとして、&#8221;<q cite="http://semooh.jp/jquery/api/traversing/parents/%5Bexpr%5D/">ルートを除く先祖要素を全て返す</q>&#8220;parents()や、&#8221;<q cite="http://semooh.jp/jquery/api/traversing/closest/%5Bexpr%5D/">開始要素から最も近い親要素を選択</q>&#8220;するclosest()もあります。</p>
<p>参：<br />
<a href="http://semooh.jp/jquery/api/traversing/parent/%5Bexpr%5D/" target="_blank">parent([expr]) &#8211; jQuery 日本語リファレンス</a><br />
<a href="http://semooh.jp/jquery/api/traversing/parents/%5Bexpr%5D/" target="_blank">parents([expr]) &#8211; jQuery 日本語リファレンス</a><br />
<a href="http://semooh.jp/jquery/api/traversing/closest/%5Bexpr%5D/" target="_blank">closest([expr]) &#8211; jQuery 日本語リファレンス</a><br />
<a href="http://js.agilmente.com/2010/03/30/8/" target="_blank">jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く</a></p>
<h2 style="font-weight:bold;">子要素・子孫要素</h2>
<p>thisの子要素、もしくは子孫要素（ここでは&lt;ul&gt;）を取得</p>
<h3>子要素</h3>
<pre>$(this).children("ul")</pre>
<h3>子孫要素</h3>
<pre>$(this).find("ul")</pre>
<pre>$("ul",this)</pre>
<h4 id="comment" style="margin-top:40px;padding:5px;border-left:5px solid #CAE1EA;font-weight:bold;">それぞれのプチ解説</h4>
<pre>$(this).children("ul")</pre>
<p>&#8220;<q cite="http://semooh.jp/jquery/api/traversing/children/%5Bexpr%5D/">直下にある子要素のみ</q>&#8220;を選択。&#8221;<q cite="http://semooh.jp/jquery/api/traversing/children/%5Bexpr%5D/">孫要素以下は対象外</q>&#8220;となります。<br />
「&#8221;ul&#8221;」部分は絞り込みの条件式なので、この場合選択したい「ul」以外に子要素がなければ記述しなくても問題ないと思います。<br />
参：<a href="http://semooh.jp/jquery/api/traversing/children/%5Bexpr%5D/" target="_blank">children([expr]) &#8211; jQuery 日本語リファレンス</a></p>
<pre>$(this).find("ul")</pre>
<p>thisが持つ&#8221;<q cite="http://semooh.jp/jquery/api/traversing/find/expr/">全子孫要素から、指定条件式に合致するものを選択</q>&#8220;します。<br />
直下の子要素だけでなく、子孫要素から条件（&#8221;ul&#8221;）に合うものを探すということですね。<br />
参：<a href="http://semooh.jp/jquery/api/traversing/find/expr/" target="_blank">find(expr) &#8211; jQuery 日本語リファレンス</a></p>
<pre>$("ul",this)</pre>
<p><a href="http://api.jquery.com/jQuery/#selector-context" target="_blank">公式の説明</a>によると、&#8221;<q cite="http://api.jquery.com/jQuery/#selector-context">selector context is implemented with the .find() method, so $(&#8216;span&#8217;, this) is equivalent to $(this).find(&#8216;span&#8217;).</q>&#8220;とのことですので、行っている処理内容は、上のfind()と同じようです。<br />
なので、子孫要素から条件に合うものを探すという処理になります。<br />
参：<a href="http://semooh.jp/jquery/api/core/jQuery/expression%2C+context/" target="_blank">jQuery(expression, context) &#8211; jQuery 日本語リファレンス</a></p>
<h4 id="sample" style="margin-top:40px;padding:5px;border-left:5px solid #CAE1EA;font-weight:bold;">サンプル</h4>
<p>自分のメモ用ですが、簡単なサンプルを書いたので載せておきます。<br />
<a href="http://mayoneco.com/demo/jquery/jquery_parent_child/sample.html" target="_bank">動作サンプル</a></p>
<p>また<a href="http://mayoneco.com/blog/2011/01/jquery_parent_child/#comment-55">前エントリーのコメント</a>にてmattari_pandaさんがつくってくださった計測用のサンプルもこちらにも載せておきます。（mattari_pandaさんご快諾ありがとうございます！）<br />
<a href="http://mayoneco.com/demo/jquery/jquery_parent_child/sample_speed.html" target="_bank">速度測定サンプル</a><br />
サンプルを見ていただければ、mattari_pandaさんのコメント内容にある、以下の点がわかるかと思います。</p>
<ul>
<li>&#8220;<q>$(‘ul’, this)はjQueryの中でfind()に展開しているようなので、今回のような場合はfindを使ったほうが若干ですがパフォーマンス的に良い</q>&#8220;</li>
<li>&#8220;<q>$(this)を一回の処理の中で繰り返す場合はあらかじめ変数に入れておくと、処理の速度も速く</q>&#8220;なる</li>
</ul>
<p>ご参考までに。</p>
<p>他参考URL：<br />
<a href="http://baseviews.com/program/jquery-get-child-elements-of-this.html" target="_bank">jQueryでthisの子要素を取得するやり方いろいろ | Base Views</a></p>
<p>Thanks☆：<br />
mattari_pandaさん、initiumさん、kzさん、understandardさん</p>
<hr />
<h5>以下おまけ</h5>
<pre>$("#dummy").css</pre>
<p>上記のような記述は、&#8221;"以降、つまり範囲指定を省略しているようですね。<br />
ドキュメント内から#dummyを探す、と。（<a href="http://semooh.jp/jquery/api/core/jQuery/expression%2C+context/" target="_blank">jQuery 日本語リファレンス</a>のサンプル3参照）</p>
<p>また、パッと見、似ていて私も誤解していたのですが、まったく違うので注意！</p>
<pre>$("ul",this)</pre>
<pre>$("ul,this").css</pre>
<p>後者は複数のセレクタを指定する記述です。<br />
参：<a href="http://semooh.jp/jquery/api/selectors/multiple/" target="_blank">selector1, selector2, &#8230;, selectorN &#8211; jQuery 日本語リファレンス</a></p>
<hr />
<p>最後に。<br />
前エントリーよりは、リファレンス等を確認して載せてはおりますが、必ずしも上記の内容が正しいとは限りません。<br />
不具合等の責任は負いかねますので、その点だけご留意いただければと思います。<br />
私と同じようなjQuery初心者の方の参考になれば幸いです！</p>
]]></content:encoded>
			<wfw:commentRss>http://mayoneco.com/blog/2011/06/jquery_parent_child_2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【jQuery】thisの親や子要素の指定方法</title>
		<link>http://mayoneco.com/blog/2011/01/jquery_parent_child/</link>
		<comments>http://mayoneco.com/blog/2011/01/jquery_parent_child/#comments</comments>
		<pubDate>Sat, 29 Jan 2011 14:58:23 +0000</pubDate>
		<dc:creator>mayoneco</dc:creator>
				<category><![CDATA[memo]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://mayoneco.com/blog/?p=1006</guid>
		<description><![CDATA[jQueryでよくつかう&#8221;this&#8221;の親要素や子要素を指定する記述をすぐに忘れてしまうので、メモ。 /*　110605　*/ リライト版エントリーをアップしました。 そちらのほうがまだ見やすいと思 [...]]]></description>
			<content:encoded><![CDATA[<p>jQueryでよくつかう&#8221;this&#8221;の親要素や子要素を指定する記述をすぐに忘れてしまうので、メモ。</p>
<p>/*　110605　*/<br />
<a href="http://mayoneco.com/blog/2011/06/jquery_parent_child_2/">リライト版エントリー</a>をアップしました。<br />
そちらのほうがまだ見やすいと思いますので、、ご参照いただければ！</p>
<p>/*　110522　*/<br />
「<strong>$(&#8220;ul&#8221;,this).css</strong>」についてコメントにてご指摘いただきました！<br />
エントリー内で、これは「間違い」と記述しておりますが、<strong>子孫要素を取得できる正しい書き方</strong>でした。<br />
詳細についてはお手数ですが、<a href="#comments">コメント欄</a>をご覧ください。<br />
近々、コメントでいただいた内容も含めて、一度リライトしたエントリーを書こうと思っております。</p>
<p>/*　110131　*/<br />
<strong>子要素指定方法についての記述</strong>で、<a href="#comment-44">間違いをご指摘いただいた</a>ので、<a href="#correct"><strong>訂正</strong>しました</a>。</p>
<h2>親要素</h2>
<p>thisの親要素を取得する。</p>
<pre>$(this).parent().css</pre>
<p>参：<a href="http://js.agilmente.com/2010/03/30/8/" target="_bank">jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く</a></p>
<p>parentのカッコを忘れてて、子一時間悩むとかもう止めたい…</p>
<h2>子要素</h2>
<p>thisの子要素（ここでは&lt;ul&gt;）を取得する。</p>
<pre>$(this).children("ul")</pre>
<p><del datetime="2011-01-31T07:16:38+00:00">$(&#8220;ul&#8221;,this).css</del><br />
→これ、間違い（補足は後述）<br />
<del datetime="2011-01-31T07:16:38+00:00">$(this).find(&#8220;ul&#8221;)</del><br />
→これも、間違い（補足は後述）</p>
<p>参：<a href="http://baseviews.com/program/jquery-get-child-elements-of-this.html" target="_bank">jQueryでthisの子要素を取得するやり方いろいろ | Base Views</a></p>
<h3 id="correct">※なぜ間違いだったのか</h3>
<p>前述のそれぞれがどう違うのか、について。</p>
<pre>$("ul",this).css</pre>
<blockquote><p><del datetime="2011-05-22T08:04:04+00:00">「ulタグ」と「自分」を〜する。（この場合はCSSを変更）</del></p></blockquote>
<p><del datetime="2011-05-22T08:04:04+00:00">thisもほかの関係ないulも対象ってことですね。。<br />
参：<a href="http://semooh.jp/jquery/api/selectors/multiple/" target="_blank">selector1, selector2, &#8230;, selectorN &#8211; jQuery 日本語リファレンス</a></del><br />
上記説明は</p>
<pre>$("ul,this").css</pre>
<p>の場合について、でした。</p>
<pre>$("ul",this).css</pre>
<p>の正しい説明は、<a href="http://semooh.jp/jquery/api/core/jQuery/expression%2C+context/" target="_blank">jQuery(expression, context) &#8211; jQuery 日本語リファレンス</a>をご覧ください。<br />
この記述では、thisの中からulを探す、つまりfind()のようなことを出来るようです。</p>
<pre>$("#dummy").css</pre>
<p>のような記述は、つまり&#8221;"以降を省略しているようですね。<br />
つまりドキュメント内から#dummyを探す、と。（上記リンクのサンプル3参照）</p>
<p>他参考リンク<br />
<a href="http://api.jquery.com/jQuery/#selector-context">jQuery() &#8211; jQuery API</a></p>
<p>initiumさん、kzさん、understandardさん、ありがとうございました！</p>
<hr />
<pre>$(this).children("ul")</pre>
<blockquote><p>「自分」の中の「子要素」にある「ulタグ」を〜する</p></blockquote>
<p>参：<a href="http://semooh.jp/jquery/api/traversing/children/%5Bexpr%5D/" target="_blank">children([expr]) &#8211; jQuery 日本語リファレンス</a></p>
<hr />
<pre>$(this).find("ul")</pre>
<blockquote><p>「自分」の中の「子孫要素」にある「ulタグ」を〜する</p></blockquote>
<p>子供も孫もひ孫(ryも探せるってことですね。<br />
参：<a href="http://semooh.jp/jquery/api/traversing/find/expr/" target="_blank">find(expr) &#8211; jQuery 日本語リファレンス</a></p>
<p>もっとちゃんと勉強しないとですね。</p>
<h2>結論（？）</h2>
<p>持つべきものは、偉大な先輩…☆<br />
<a href="http://twitter.com/mattari_panda" target="_blank">ぱんださん</a>、ありがとうございました！！！</p>
]]></content:encoded>
			<wfw:commentRss>http://mayoneco.com/blog/2011/01/jquery_parent_child/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>【jQuery】外部リンクを別ウィンで開きたいー</title>
		<link>http://mayoneco.com/blog/2010/01/jquery-newwindow/</link>
		<comments>http://mayoneco.com/blog/2010/01/jquery-newwindow/#comments</comments>
		<pubDate>Mon, 04 Jan 2010 05:54:05 +0000</pubDate>
		<dc:creator>mayoneco</dc:creator>
				<category><![CDATA[memo]]></category>
		<category><![CDATA[Tools & Tips]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[エラー]]></category>
		<category><![CDATA[リンク]]></category>
		<category><![CDATA[別ウィンドウ]]></category>
		<category><![CDATA[外部リンク]]></category>

		<guid isPermaLink="false">http://mayoneco.com/blog/?p=711</guid>
		<description><![CDATA[じぶんの個人サイトで、外部リンクを別ウィンドウで開くのをjQueryでやりたいなーと思って、ちょっとぐぐった＆エラーとか出たので自分用メモ。 ぐぐって、なんとなくこの辺（↓）を参照させていただくことに。 jQueryを使 [...]]]></description>
			<content:encoded><![CDATA[<p>じぶんの個人サイトで、外部リンクを別ウィンドウで開くのをjQueryでやりたいなーと思って、ちょっとぐぐった＆エラーとか出たので自分用メモ。</p>
<p>ぐぐって、なんとなくこの辺（↓）を参照させていただくことに。</p>
<ul>
<li><a href="http://ameblo.jp/adde/entry-10204471043.html">jQueryを使って、外部サイトへのリンクだけ別ウィンドウで開く方法｜AdDe &#8211; 静岡のデザイン制作会社アドテクニカのデザイナーブログ</a></li>
<li><a href="http://www.kadoyan.com/item/515/">targetを使わず外部リンクを新しいウインドウで開く｜KADOYAN.com</a></li>
</ul>
<p>さて、残念ながらアタシにはどっちがイイとかよくわからないので、、、ひとまず前者のソースをお借りしてやってみます。<br />
いつだかにダウンロードしてたjquery.js（v1.3.2）を設置し、<br />
新規JSファイルに、上のエントリーのソース（これ↓）をコピペ、</p>
<pre>
$(document).ready( function () {
$('a[@href^="http"]').not('[@href*="www.sample.com"]').click(function(){
window.open(this.href, '');
return false;});
});
</pre>
<p>「www.sample.com」をアタシの場合は「mayoneco.com」に変更し、保存。<br />
HTML側に上記2つのJSファイルへのリンクつけまして、これでOK！<br />
…のは・ず・が、、、<br />
構文エラーだよ！とFirebugで下記のようなエラーが出てしまいました。</p>
<blockquote><p>[Exception... "'Syntax error, unrecognized expression: [@href^=http://]&#8216; when calling method: [nsIDOMEventListener::handleEvent]&#8221; nsresult: &#8220;0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)&#8221; location: &#8220;<unknown>&#8221; data: no]</p></blockquote>
<p>はいはい、何言ってるんでしょうかね？ふふふ…と、英語のエラーが出るとひとまず目を逸らしたくなるアタシですがw、調べたら、このへんが怪しそう！</p>
<ul>
<li><a href="http://snmr325.blog43.fc2.com/blog-entry-47.html">すなぶろっ！ &#8211;  スナメリ、jQueryを導入す。</a></li>
<li><a href="http://jamesallen.name/index.cfm/2009/3/12/JQuery-selector-problem--Syntax-error-unrecognized-expression-fix">JQuery selector problem &#8211; &#8216;Syntax error, unrecognized expression&#8217; fix :: James Allen&#8217;s Coldfusion and Internet Technology Blog</a></li>
</ul>
<p>よくよく見てみると、、</p>
<blockquote><p>The @ syntax is no longer supported in JQuery 1.3+.<br />
So the simple fix is to just remove the @ and it&#8217;ll work</p></blockquote>
<p>jQuery 1.3以降のバージョンでは@をつかう構文がサポート外ってコトみたいですな。<br />
今回アタシが設置していたのはバージョン1.3.2。つまりサポート外。<br />
&#8220;@&#8221;を消せばOK！って書いてあるので、よくわからないまま消したら本当にOKでしたw</p>
<p>JSの知識をきちんと入れてないまま使ってる上に、バージョンによる構文の違いなんてほとんど意識外なもので；、いい勉強になりましたぁぁ。<br />
でもって、すぐ忘れるので今回は忘れないうちにメモメモ。</p>
]]></content:encoded>
			<wfw:commentRss>http://mayoneco.com/blog/2010/01/jquery-newwindow/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【jQuery】CSSの複数プロパティを変える</title>
		<link>http://mayoneco.com/blog/2009/06/change-cssproperties/</link>
		<comments>http://mayoneco.com/blog/2009/06/change-cssproperties/#comments</comments>
		<pubDate>Mon, 29 Jun 2009 12:16:22 +0000</pubDate>
		<dc:creator>mayoneco</dc:creator>
				<category><![CDATA[Diary]]></category>
		<category><![CDATA[memo]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[WorkDay]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[プロパティ]]></category>

		<guid isPermaLink="false">http://mayoneco.com/blog/?p=442</guid>
		<description><![CDATA[とゆーわけでgoogle先生召喚。 一発解決！ cssメソッドに2つのパラメーターを与える場合、以下のようなcodeが考えられる。 $("p").css("color","#000000").css("backgroun [...]]]></description>
			<content:encoded><![CDATA[<p>とゆーわけでgoogle先生召喚。<br />
一発解決！</p>
<blockquote><p>cssメソッドに2つのパラメーターを与える場合、以下のようなcodeが考えられる。</p></blockquote>
<pre>$("p").css("color","#000000").css("background-color","#0033cc")</pre>
<blockquote><p>この様に複数のプロパティを同時に操作する場合、以下の記述で対応できる。</p></blockquote>
<pre>$("p").css({"color":"#000000","background-color":"#0033cc"})</pre>
<p>参照元：<a href="http://www.e2esound.com/20080916/entry-id=479">jQuery:CSSへのアクセス | [E2]e2esound.com</a></p>
<p>なるほどね～<br />
こつこつと本見たりして勉強するのもいいんだけど、やっぱり実践で必要に迫られてやろうとすると身につくの早いと思う。<br />
とはいえ、アタシはもう少し基礎的部分を勉強して土台を固めたほうがきっともっと幅が広がるだろうな、と。</p>
<p>ロクナナのワークショップ、やっぱ行こうかな～<br />
自分への気合入魂も込めて。</p>
<p>何しろ、自分で調べて、たとえ9割コピペでも笑、思い描いたものが出来ると充実感ある！<br />
最近、JS楽しいなーと思えている。<br />
楽しければ何でも出来るよね！！</p>
]]></content:encoded>
			<wfw:commentRss>http://mayoneco.com/blog/2009/06/change-cssproperties/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

