jQuery入門 No.12
- 2009 03月26日
- コメントは受け付けていません。
───────────────────────────────
■目次
───────────────────────────────
├ テキストを含む要素を指定する
├ 子のない空の要素を指定する
├ 指定したセレクタを含む要素を指定する
├ 子を持つ要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した文字列を含む要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:contains(“文字列”)
となります。
以下の例ではjavascriptと書かれている行のみ
下線を表示します。
例1)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“li:contains(‘javascript’)”).css(“text-decoration”, “underline”);
});
</script>
</head>
<body>
<ul>
<li>java</li>
<li>perl</li>
<li>javascript</li>
<li>ruby</li>
<li>python</li>
<li>php</li>
</ul>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■子要素のない空の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:empty
となります。
以下の例では<div></div>
となっている箇所に
“ここは空です”
という文字を表示します。
例2)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“div:empty”).text(“ここは空です”);
});
</script>
</head>
<body>
<div></div>
<div>子要素あります</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定したセレクターを含む要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:has(セレクター)
となります。
以下の例ではdivでp要素をもつ要素部分の背景と
文字色を設定しています。
例3)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“div:has(p)”).css({ background:’#CCC’, color:’blue’ });
});
</script>
</head>
<body>
<div><p>ここがdiv:has(p)にあたります</p></div>
<div>ここはdivのみです</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■子要素を持つ要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:parent
となります。
以下の例では
背景を、子要素を持つtd部分は赤に
子要素を持たないtd部分は緑に
設定しています。
例4)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“td”).css(“width”, “40px”);
$(“td:parent”).css(“background”, “red”);
$(“td:empty”).css(“background”, “green”);
});
</script>
</head>
<body>
<table>
<tr><td>1</td><td></td></tr>
<tr><td>2</td><td></td></tr>
</body>
</html>
10 Best jQuery Plugins – March 2009
- 2009 03月25日
- コメントは受け付けていません。
10 Best jQuery Plugins – March 2009
ベストjQuery プラグインが紹介されています。
tips_admin jQueryjQuery入門 No.11
- 2009 03月19日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.11
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
├ 指定番目より後の要素を指定する
├ 指定番目より前の要素を指定する
├ ヘッダー要素(h1,h2など)を指定する
├ アニメーション中の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定番目より後の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:gt(番目)
となります。
指定番目（0より始まる)より後ろの要素を指定しますので
以下の例では0番目より後の要素(2行目以降)に打ち消し線が
付きます。
例1)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“li:gt(0)”).css(“text-decoration”, “line-through”);
});
</script>
</head>
<body>
<ul>
<li>1行目(0番目)</li>
<li>2行目(1番目)</li>
<li>3行目(2番目)</li>
<li>4行目(3番目)</li>
<li>5行目(4番目)</li>
</ul>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定番目より前の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:lt(番目)
となります。
指定番目（0より始まる)より前の要素を指定しますので
以下の例では3番目より前の要素(1から3行目)に打ち消し線が
付きます。
例2)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“li:lt(3)”).css(“text-decoration”, “line-through”);
});
</script>
</head>
<body>
<ul>
<li>1行目(0番目)</li>
<li>2行目(1番目)</li>
<li>3行目(2番目)</li>
<li>4行目(3番目)</li>
<li>5行目(4番目)</li>
</ul>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ヘッダー要素(h1,h2など)を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:header
となります。
以下の例ではh1,h2部分のみ背景と文字色を設定します。
例3)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“:header”).css({ background:’#CCC’, color:’blue’ });
});
</script>
</head>
<body>
<h1>ここはh1</h1>
<div>ここはdiv</div>
<h2>ここはh2</h2>
<div>ここはdiv</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■アニメーション中の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:animated
となります。
$(“div:animated”).toggleClass(“colored”);
部分で、div部分のアニメーション中の要素のクラス
を変更していますので、ボタンを押すと、
色が黄色と緑に交互に変わります。
なお、アニメーションしている部分は
animateIt()
部分の
$(“#mover”).slideToggle(“slow”, animateIt);
で、idがmover部分をアニメーションしています。
slideToggle(速度,コールバック関数)
は、スライドしながら、表示されている場合は非表示に、
非表示の場合は表示します。
この例の場合は、速度がslowで、また終わった後に
animateItが呼ばれるので、ずっとスライド表示を
繰り返しています。
例4)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“#change”).click(function(){
$(“div:animated”).toggleClass(“colored”);
});
function animateIt() {
$(“#mover”).slideToggle(“slow”, animateIt);
}
animateIt();
});
</script>
<style>
div { background:yellow;
border:1px solid #AAA;
width:80px;
height:80px;
margin:5px;
float:left; }
div.colored { background:green; }
</style>
</head>
<body>
<button id=”change”>色変更</button>
<div></div>
<div id=”mover”></div>
<div></div>
</body>
</html>
jQuery プラグイン autoResize
- 2009 03月18日
- コメントは受け付けていません。
Ajax活用情報紹介サイト Recently Ajax by H2O Space.
http://www.h2o-ajax.com/archives/341
で紹介されている、フォームのテキストエリアが入力すると
広がるプラグインです。
http://james.padolsey.com/javascript/jquery-plugin-autoresize/
ライセンスがどこにも記述されていなかったので
利用の際は注意が必要です。
jQuery prettyPhoto a jQuery lightbox clone
- 2009 03月18日
- コメントは受け付けていません。
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
liteboxのjQuery版クローンだそうです。
This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. Donationsare always welcome.
Creative Commons Attribution 2.5
で商用可能だそうですが寄付歓迎とのことです。
GXライブラリ
- 2009 03月17日
- コメントは受け付けていません。
phpspot開発日記で紹介されていた、GXライブラリ、結構面白そうです。
MITライセンスだそうです。
tips_admin jQueryjQuery プラグイン ImageSwitch
- 2009 03月17日
- コメントは受け付けていません。
http://www.hieu.co.uk/ImageSwitch/
が結構よさそうです。
CDDLライセンスだそうです。
tips_admin jQueryjQuery入門 No.10
- 2009 03月12日
- コメントは受け付けていません。
┼─────────────────────────────┼
■目次
┼─────────────────────────────┼
├ 指定したセレクターを除く要素を指定する
├ 偶数番の要素を指定する
├ 奇数番の要素を指定する
├ 指定番目の要素を指定する
├ UI(1) UIウィジェット タブを使ってみましょう
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定したセレクターを除く要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:not(セレクター)
となります。
以下の例ではinputでcheckedでないものの次のlabel部分の背景が
黄色になります。
例1)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input:not(:checked) + label”).css(“background-color”, “yellow”);
$(“input”).attr(“disabled”, “disabled”);
});
</script>
</head>
<body>
<div>
<input type=”checkbox” name=”a” />
<label>花子</label>
</div>
<div>
<input type=”checkbox” name=”b” />
<label>太郎</label>
</div>
<div>
<input type=”checkbox” name=”c” checked=”checked” />
<label>次郎</label>
</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■偶数番の要素を指定する
──────────────────────────────────
記述方法
:even
となります。
1つめを0番とした偶数番の要素を指定します。
以下の例では1行目(0番)と3行目(2番)の背景が青になります。
例2)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“tr:even”).css(“background-color”, “blue”);
});
</script>
</head>
<body>
<table border=”1″>
<tr><td>1行目(0)</td></tr>
<tr><td>2行目(1)</td></tr>
<tr><td>3行目(2)</td></tr>
<tr><td>4行目(3)</td></tr>
</table>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■奇数番の要素を指定する
──────────────────────────────────
記述方法
dd
となります。
１つめを0番とした奇数番の要素を指定します。
以下の例では2行目(1番）と4行目(3番)の背景が青になります。
例3)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“tr:odd”).css(“background-color”, “blue”);
});
</script>
</head>
<body>
<table border=”1″>
<tr><td>1行目(0)</td></tr>
<tr><td>2行目(1)</td></tr>
<tr><td>3行目(2)</td></tr>
<tr><td>4行目(3)</td></tr>
</table>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定番目の要素を指定する
──────────────────────────────────
記述方法
:eq(番目)
となります。
0から始まる指定番目の要素を指定します。
以下の例では3行目(2番)の背景が青になります。
例4)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“tr:eq(2)”).css(“background-color”, “blue”);
});
</script>
</head>
<body>
<table border=”1″>
<tr><td>1行目(0)</td></tr>
<tr><td>2行目(1)</td></tr>
<tr><td>3行目(2)</td></tr>
<tr><td>4行目(3)</td></tr>
</table>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■UI(1) UIウィジェット タブを使ってみましょう
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery UIウィジェットのタブを使ってみましょう。
http://jqueryui.com/themeroller/
より
左側のメニューからThemeRollerのGalleryを選びます。
気に入ったテーマをクリックして選びます。
Editをクリックするとカスタマイズできます。
Downloadをクリックすると
ダウンロード画面に行きます。
ダウンロードページではタブだけを使う場合は
UI Core「UI Core」とWidgets「Tabs」のチェックをオンにします。
他のUIも使う場合は、必要なものをチェックする
もしくは全部をチェックします。
右側にあるダウンロードボタンをクリックすると、
圧縮ファイルがダウンロードされます。
(2009.3.10現在windows xp/IE7では圧縮ファイルが壊れていて
うまく動作しませんでしたがFireFoxではダウンロードできました）
次にダウンロードしたファイルを解凍すると、2009.3.10現在
jquery-ui-1.7.custom.min.jsというファイルがjsフォルダに
入っています。
（バージョンが変わるとファイル構成やファイル名が変わるようです）
同胞されている、index.htmlを見てみると、
動作確認が出来ますが、以下に例を簡単に記述してみます。
例5ではjquery-ui-1.7.custom.min.jsは
jquery-1.3.2.min.jsと同様に
htmlと同じ階層に設置しています。
上記ファイルとともに、ダウンロードしたフォルダ内に
cssというフォルダとが入っていますのでこちらを
コピーして使います。
まず、cssフォルダ内のディレクトリ、cssファイル名を
見てみましょう。
以下のhref部分をダウンロードしたもののディレクトリ、
ファイル名に変更してください。
（ダウンロードするテーマが変わるとディレクトリ名が変わります）
<link type=”text/css” href=”./css/custom-theme/jquery-ui-1.7.custom.css”
rel=”stylesheet” />
<div id=”tabs”></div>
部分がタブの動きをします。
タブ部分は以下のように
記述します。
<ul>
<li><a href=”#タブID1″>タブ部分に表示する文字列1</a></li>
<li><a href=”#タブID2″>タブ部分に表示する文字列2</a></li>
</ul>
タブを増やしたい場合は<li></li>部分を同様に記述します。
また、タブの内容は以下のように記述します。
<div id=”タブID1″>ここに内容を記述します</div>
<div id=”タブID2″>ここに内容を記述します</div>
例5)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css”
href=”./css/custom-theme/jquery-ui-1.7.custom.css” />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”jquery-ui-1.7.custom.min.js”>
</script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
// Tabs
$(‘#tabs’).tabs();
});
</script>
</head>
<body>
<h2>タブ</h2>
<div id=”tabs”>
<ul>
<li><a href=”#tabs1″>初めに</a></li>
<li><a href=”#tabs2″>次に</a></li>
</ul>
<div id=”tabs1″>「初めに」の内容をここに記述します。</div>
<div id=”tabs2″>「次に」の内容をここに記述します。</div>
</div>
</body>
</html>
jQuery入門 No.9
- 2009 03月05日
- コメントは受け付けていません。
┼─────────────────────────────┼
■目次
┼─────────────────────────────┼
├ 要素の前後関係を指定する
├ 兄弟関係より要素を指定する
├ 先頭の要素を指定する
├ 最後の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素の前後関係を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
“前要素” + “次要素”
となります。
以下の例では、ラベルの次のinput部分に
“ラベルがあります”
を設定していますので、
名前とふりがなの入力部分の値に
“ラベルがあります”が設定されます。
例1)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“label + input”).css(“color”, “blue”).val(“ラベルがあります”)
});
</script>
</head>
<body>
<form>
<p><label>名前:</label>
<input name=”name” /></p>
<p><label>ふりがな:</label>
<input name=”name_kana” /></p>
<p><input name=”comment” /></p>
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■兄弟関係より要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
“基準要素” ~ “兄弟要素”
となります。
$(“#test1 ~ div”)
の場合、idがtest1の要素のあとの兄弟要素(div)が
対象になります。
以下の例では、prev以降の兄弟位置にあるdiv要素に枠線が付きます。
（姪や親子関係にあたるdivには付きませんし、div以外には付きません。)
例2)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“#prev ~ div”).css(“border”, “3px groove blue”);
});
</script>
<style>
div,span {
width: 150px;
height: 150px;
margin:5px;
background:#bbffaa;
float:left;
font-size:14px;
}
div#small {
width: 100px;
height: 100px;
font-size:12px;
background:#fab;
}
</style>
</head>
<body>
<div>div (ここはprevの前)</div>
<span id=”prev”>spanでidがprev</span>
<div>兄弟位置のdiv</div>
<div>兄弟位置のdiv<div id=”small”>姪にあたるdiv</div></div>
<span>兄弟位置だがspanなのでdivではない</span>
<div>兄弟位置のdiv</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■先頭の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:first
となります。
以下の例では1行目のみ斜体文字になります。
例3)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“tr:first”).css(“font-style”, “italic”);
});
</script>
<style>
td { color:blue; font-weight:bold; }
</style>
</head>
<body>
<table>
<tr><td>１行目</td></tr>
<tr><td>２行目</td></tr>
<tr><td>３行目</td></tr>
</table>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最後の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:last
となります。
以下の例では3行目のみ斜体文字になります。
例4)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“tr:last”).css(“font-style”, “italic”);
});
</script>
<style>
td { color:blue; font-weight:bold; }
</style>
</head>
<body>
<table>
<tr><td>１行目</td></tr>
<tr><td>２行目</td></tr>
<tr><td>３行目</td></tr>
</table>
</body>
</html>
- アーカイブ
- 最近の投稿
- タグ
- カテゴリー