2013-03-24から1日間の記事一覧

jQuery04

実行するタイミングの問題 $(function(){}) ページの読み込みが完了してから中に書かれたコードを実行する 複数の命令をひとまとめにした関数を使う 記述内容 $(function(){ $('#sample').hide(); }); $(function(){}) は省略形 文書が準備状態になったとい…

jQuery05

練習用空のテンプレート ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryテンプレート</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <script> $(function(){ }); </script> </body> </html> PA…

ID セレクタ

$('#idValue') ピンポイントでページ内の要素が欲しいときに最適なセレクタ ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <ul> <li>fox</li> </ul></body></html>

CLASSセレクタ

$('.className') 2つ以上の要素に何かしたいときに最適なセレクタ ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CLASSセレクタ</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <ul> <li class="man">Paul</li>…</ul></body></html>

タイプセレクタ(element)

$('div') 指定した要素名の要素すべてをとってくる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイプセレクタ(element)</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <h1>Heading</h1> <p>The quick brow…</p></body></html>

タイプセレクタ(element)02

body要素を取得 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイプセレクタ(element)</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <h1>Heading</h1> <p>The quick brown fox jumps over th…</p></body></html>

子孫セレクタ(ancestor descendant)

$('p strong') ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <div> <p>I have a <strong>pen</strong>.</p> </div> <ul> <…</ul></body></html>

より高度なセレクタ

より高度なセレクタ id が div な要素の直下にある p要素のうち、クラスboxに属さない要素を取得 書式 $('#div > p:not(.box)') CSSのセレクタとjQueryのセレクタ 「:first-child」は、InternetExplorer 6 はサポートしていない jQueryではInternetExplorer …