2011-12-03

12/3(土)：JQuery入門(5)

JQueryをマスターするための第一歩は「セレクター」。
５つの分類

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

そのうちの

４．CSSの属性セレクター

jQueryは要素の属性や属性値を条件に対象を絞り込める「属性セレクター」にも対応している。
それぞれ、［…］内に条件を記述して使う。

[attribute]

特定の属性を持つ要素を選択できるセレクターである。

html

	<div id="test1">testtesttest</div>
	<div class="test1">testtesttest</div>
	<div id="test2">testtesttest</div>
	<div class="test2">testtesttest</div>

JQuery

$(function(){
	$("[class]").css("color","blue");
}

class属性を持つ要素（２番目と４番目のdiv要素）が青色になる。

[attribute='value']

特定の属性が、特定の値を持つ要素を選択できるセレクターである。
html

	<div title="test1">testtest</div>
	<div title="test2">testtest</div>
	<div title="test3">testtest</div>

JQuery

$(function(){
	$("[title='test3']").css("color","blue");
}

title属性の値が「test3」の要素、つまり３番目のdiv要素が青色になる。

[attribute!='value']

特定の属性が、特定の値を持たない要素を選択できるセレクターである。
このセレクターは要素セレクターの後に続けて記述する必要がある。
html

	<div title="test1">testtest</div>
	<div title="test2">testtest</div>
	<div title="test3">testtest</div>

JQuery

$(function(){
	$("div[title!='test3']").css("color","blue");
}

title属性の値が「test3」以外のdiv要素が青色になる。

[attribute^='value']

特定の属性の値が、特定の文字列で始まっている要素を選択できる。
html

	<div title="test1">testtest</div>
	<div title="test2">testtest</div>
	<div title="3test">testtest</div>

JQuery

$(function(){
	$("[title^='t']").css("color","blue");
}

title属性の値が「t」で始まる要素、つまり１番目と２番目のdiv要素は青色になる。

[attribute$='value']

特定の属性の値が、特定の文字列で終わっている要素を選択できる。
html

	<div title="test1">testtest</div>
	<div title="test2">testtest</div>
	<div title="test3">testtest</div>

JQuery

$(function(){
	$("[title$='2']").css("color","blue");
}

title属性の値が「2」で終わっている要素、つまり２番目のdiv要素が青色になる。

[attribute*='value']

特定の属性が特定の文字列を含んでいる要素を指定できる。
html

	<div title="test1">testtest</div>
	<div title="test2">testtest</div>
	<div title="test3">testtest</div>

JQuery

$(function(){
	$("[title*='t1']").css("color","blue");
}

title属性の値に「t1」を含む要素、つまり、１番目のdiv要素が青色になる。

[attributeFilter1] [attributeFilter2]

複数の属性セレクターを同時に指定することもできる。
html

	<div title="stesttest1">testtest</div>
	<div title="stest2">testtest</div>
	<div title="testtest3">testtest</div>

JQuery

$(function(){
	$("[title^='s'][title*='tt']").css("color","blue");
}

title属性の値が「s」から始まり、かつtitle属性の値に「tt」が含まれる要素、
つまり１番目のdiv要素が青色になる。

以上がCSSの属性セレクターである。
明日は５つの分類のうちの

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

JQueryの独自フィルターを勉強する。
毎日一時間コツコツと。

ちなみにこの学習は

 Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
で行なっている。

2011-12-02

12/2(金)：JQuery入門(4)

JQueryをマスターするための第一歩は「セレクター」。
５つの分類

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

そのうちの

２．CSS3のセレクター

jQueryは、現在策定中のCSS3（Cascade Style Sheets level 3)のセレクターの多くにも対応している。

間接セレクター

特定のセレクターの後に出現する要素を選択できるのが「間接セレクター」である。
セレクターと要素を~（チルダ）で結ぶ。

html

	<div id="test1">testteststet</div>
	<div id="test2">testteststet</div>
	<div id="test3">testteststet</div>
	<div id="test4">testteststet</div>

JQuery

$(function(){
	$("#test1 ~ div").css("color","blue");
}

id属性に「test1」が設定された要素の後ろに登場するli要素、
つまり２番目以降のli要素が青色になる。

否定擬似クラス

セレクター内の要素で特定の条件以外の要素を選択できるのが「否定擬似クラス」である。
セレクターの後ろに:not(...)を付け、(...)内に除外する条件を記述する。

html

	<div id="test">testtest</div>
	<div>testtest</div>
	<div>testtest</div>

JQuery

$(function(){
	$("div:not(#test)").css("color","blue");
}

div要素の１番目（id属性がtest）以外のdiv要素が青色になる。

empty擬似クラス

子要素やテキストを含まない要素を選択できるのが「empty擬似クラス」である。
セレクターの後ろに:emptyと記述する。

html

	<div id="test1">testteststet</div>
	<div id="test2">testteststet</div>
	<div id="test3">testteststet</div>
	<div id="test4">testteststet</div>

JQuery

$(function(){
	$("strong:not(:empty)").css("color","blue");
}

nth-child擬似クラス

セレクターの要素から任意の番号の要素だけを選択できるのが「nth-child擬似クラス」である。
セレクターの後ろに:nth-child（番号）と記述する。

html

	<div>testtesttest</div>
	<div>testtesttest</div>
	<div>testtesttest</div>

JQuery

$(function(){
	$("div:nth-child(3)").css("color","blue");
}

実行すると、３番目のdiv要素だけが青色になる。
番号だけでなく、偶数・奇数や任意の倍数でも指定できる。
偶数番目は$("div:nth-child(even)")、奇数番目は$("div:nth-child(odd)")、
３の倍数番目なら$("div:nth-child(3n)")と記述する。

last-child擬似クラス

特定のセレクターの中で最後の要素を選択できるのが「last-child擬似クラス」である。
セレクターの後ろに:last-childと記述する。

html

	<div>testtesttest</div>
	<div>testtesttest</div>
	<div>testtesttest</div>

JQuery

$(function(){
	$("div:last-child").css("color","blue");	
}

最後のdiv要素（ここでは３番目のdiv要素）だけが青色になる。

only-child擬似クラス

セレクターに特定の要素が１つだけ含まれる場合、「only-child擬似クラス」で選択できる。
セレクターの後ろに:only-childと記述する。

html

	<div><span>testtest</span>testtesttest</div>
	<div><span>testtest</span>test<span>testtest</span>testtest</div>
	<div>testtesttest</div>

JQuery

$(function(){
	$("div span:only-child").css("color","blue");
}

１番目のspan要素だけが青色になる。
２番目のdiv要素にはspan要素が複数含まれるため、対象になりません。

以上がCSS3のセレクターである。
明日は５つの分類のうちの

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

CSSの属性セレクターを勉強する。
毎日一時間コツコツと。

ちなみにこの学習は

 Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
で行なっている。

2011-12-01

12/1(木)：JQuery入門(3)

JQueryをマスターするための第一歩は「セレクター」。
５つの分類

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

そのうちの

２．CSS2のセレクター

IE6など、一部のWEBブラウザが対応してないCSS2であるが
IE6も世界のブラウザシェアの8.3%とかなり減少しているものの
まだまだ残っている。（※The Internet Explorer 6 Countdown）

子セレクター

特定の要素の直下に配置された要素を選択できるのが「子セレクター」である。
子セレクターは親要素と子要素を>（大なり、greater than）で結ぶ。

html

	<div><strong>test</strong>testtest</div>
	<div>testtesttest</div>
	<div><span>testtest<strong>testtest</strong>test</span>test</div>

JQuery

$(function(){
	$("div > span > strong").css("color","blue");
}

３番目のdiv要素の子要素の子要素であるstrong要素が青色になる。
１番目のdiv要素の子要素であるstrong要素は青色にならない。

隣接セレクター

特定の要素の次に出現する要素を選択できるのが「隣接セレクター」である。
隣接セレクターは隣接する要素を+（プラス）で指定する。

html

	<div id="test1">testteststet</div>
	<div id="test2">testteststet</div>
	<div id="test3">testteststet</div>
	<div id="test4">testteststet</div>

JQuery

$(function(){
	$("#test3 + div").css("color","blue");
}

id属性が「test3」の要素の次に出現するdiv要素、
つまり４番目のdiv要素が青色になる。

first-child擬似クラス

特定のセレクターのうち、最初に登場する要素を指定するセレクターとして、
「first-child擬似クラス」がある。セレクターの後ろに：first-childと記述して指定する。
セレクターに含まれる要素の親要素が複数存在する場合は、
それぞれの最初に出現する子要素が選択される。

html

<ul>
	<li>テキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキスト</li>
</ul>
<ul>
	<li>テキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキスト</li>
</ul>

JQuery

$(function(){
	$("li:first-child").css("color","blue");
}

２つのul要素のそれぞれ最初に登場するli要素、
つまり１番目のli要素が青い色になる。

以上がCSS2のセレクターである。
明日は５つの分類のうちの

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

CSS3のセレクターを勉強する。
毎日一時間コツコツと。

ちなみにこの学習は

 Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
で行なっている。

2011-11-30

11/30(水)：JQuery入門(2)

JQueryをマスターするための第一歩は「セレクター」。
５つの分類

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

そのうちの

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

要素セレクターやIDセレクター、クラスセレクターから、子孫セレクター、ユニバーサルセレクター、グループセレクター・・・
様々なセレクターが存在する。

要素セレクター

特定のHTML要素に対して命令を実行するには「要素セレクター」を利用する。

html

	<div>testtest</div>
	<div>testtest</div>
	<div>testtest</div>
	<div>testtest</div>

JQuery

$(function(){
  $("div").css("color","blue");
}

するとdiv要素のcolorプロパティが変更され、テキスト「testtest」が青くなる。

IDセレクター

特定のid属性を持つ要素を対象にするときには「IDセレクター」を利用する。
id属性の値に#（ハッシュ）を付けたものをセレクターとして利用する。

html

	<div id="ft">テキスト</div>
	<div id="sd">テキスト</div>
	<div id="td">テキスト</div>
	<div id="fh">テキスト</div>

JQuery

$(function(){
  $("#fh").css("color","blue");
}

するとid属性に「th」が設定されたdiv要素（四番目のdiv要素）が青くなる。
id属性だけでも要素はとくてできるが要素名をわかりやすくするために、要素セレクターも一緒に指定するといい。
JQuery

$(function(){
  $("div#fh").css("color","blue");
}

クラスセレクター

特定のclass属性を持つ要素を対象とするときには「クラスセレクター」を利用する。
class属性の値に．（ドット）を付けたものをセレクターとして利用する。

html

	<div class="test-1">テキスト</div>
	<div class="test-2">テキスト</div>
	<div class="test-3">テキスト</div>

JQuery

$(function(){
  $("div.test-1").css("color","blue");
}

class属性に「test-1」がされたdiv要素（１番目のdiv要素）が青色になる。
クラスセレクターは、IDセレクターのようにつなげて記述することが可能

孫セレクター

複数のセレクターをスペース区切りで指定することにより、特定の要素の内側にある要素をさらに絞り込める。

html

	<div class="test1"><strong>test</strong>testtest</div>
	<div class="test2"><strong>test</strong>testtest</div>
	<div class="test3"><strong>test</strong>testtest</div>

JQuery

$(function(){
  $(".test1 strong").css("color","blue");
}

class属性が「test-1」の要素の内側にあるstrong要素、
つまり１番目のdiv要素のstrong要素だけが青色になる。
クラスセレクターは、IDセレクターのようにつなげて記述することが可能

ユニバーサルセレクター

すべての要素を選択できるのが「ユニバーサルセレクター」である。
ユニバーサルセレクターは*（アスタリスク）で記述する。

html

	<div><strong>testtest</strong>testtesttesttest</div>
	<div><em>testtest</em>testtesttesttest</div>
	<div><span>testtest</span>testtesttesttest</div>

JQuery

$(function(){
　$("div *").css("color", "blue");
}

div要素内に含まれるすべての要素、１番目のstrongと２番目のem要素と３番目のspan要素が青色になる。

グループセレクター

複数のセレクターを，（カンマ）区切りで並べて指定できるのが「グループセレクター」である。
それぞれのセレクターに対する命令をまとめて記述できる。

html

	<div id="number1">テストテストテスト</div>
	<div id="number2">テストテストテスト</div>
	<div id="number3">テストテストテスト</div>

JQuery

$(function(){
　$("#number1 , #number3").css("color","blue");
}

id属性が「number1」の１番目のdiv要素と、「number3」の３番目のdiv要素が青色になる。

以上がCSSでよく利用されるセレクターである。
明日は５つの分類のうちの

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

CSS2のセレクターを勉強する。
毎日一時間コツコツと。

ちなみにこの学習は

 Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
で行なっている。

2011-11-29

11/29(火)：JQuery入門(1)

JQueryを使いこなすべく、
JQueryの勉強を始めたのでメモとして記述する。
毎日一時間程度勉強することを目標。

スクリプトを実行するタイミングを制御する「ready」という関数がある。

$(document).ready(function(){
   ここにJQueryの処理を記述する
});

省略形

$(function(){
   ここにJQueryの処理を記述する
});

ほとんどの場合にready関数を記述する。

HTMLの要素を指定する「セレクター」

どのHTMLの要素を操作するかを「セレクター」で指定し、（2）操作する内容を書く。

$(function(){
  $("セレクター").JQueryの命令
});

JQueryをマスターするための第一歩は「セレクター」。
５つの分類

CSSでよく利用されるセレクター
CSS2のセレクター
CSS3のセレクター
CSSの属性セレクター
JQueryの独自フィルター

明日はこの５つの分類について学ぶ。

2011-11-15

メモ

ヒアドキュメント：長文を文字列リテラルとして記述する手段
PHPの場合は<<

2011-10-30

EclipseにWordpressを入れる際、躓いた時のメモ

Eclipseの使い方を全然知らないなと思い知らされた。
意外と詰まる人多いんじゃないかと勝手に思ったけど自分があほなだけかな？？
結構常識なのかもしれないし。

XAMPP内のhtdocsにWordpressをおいている状況で
EclipseにWordpressを入れて、色々弄ろうと企んでいたけど
[File]→［New］→［PHP Project］
で［Create project from exsisting source］からファイル参照して、
Wordpress開発環境ばっちし！！と思ったらできず。
インポートも試したけど出来ず。

何回も
The specified external location already exists.
If a project is created in this location, the wizard will automatically try to detect existing sources and configure the buildpath appropriately
（指定された外部の場所に既にこのフォルダは存在しています。
もしプロジェクトがこの場所に作成されたら、ウィザードは自動的に既存のソースを検出しようとビルドパスを適切に構成されます。)
とメッセージが出て、Finishボタンを押せずじまい・・・

なんでやろうと思って諦めた瞬間に
ラジオボタンを［Create new project in workspace］を選択したままで
［Project name:］のテキストエリアに「wordpress」と入力すると
Directory内に「C:\xampp\htdocs\」の後に続き、「C:\xampp\htdocs\wordpress」と表示された。
このままFinishボタン押せるから押してみようと思ったら出来た。

なるほど、なんかややこしいけど出来た。
見事wordpressフォルダにファイルがばっちり表示された。
さて、作ろう。