My Web道

WEB制作科　受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

※ 当サイトはアフィリエイト広告を利用しています

トップ > 受講ノート > 4/14　[jQuery] 記述練習 （セレクタ） / クロスフェード

4/14　[jQuery] 記述練習 （セレクタ） / クロスフェード

受講ノート 受講ノート-jQuery プログラミング プログラミング-JavaScript プログラミング-JavaScript-jQuery


使用テキスト：

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)
Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)
posted with amazlet
西畑一馬（著）
アスキー・メディアワークス
Amazon.co.jpで詳細を見る

同内容掲載のサイトはこちらです。↓
http://ascii.jp/elem/000/000/438/438206/

【解説】jQueryとは？

jQueryとは、JavaScriptのライブラリなのだそう。
（ライブラリとは、頻繁に使用される機能などを部品化してまとめたプログラムのこと）

  • ブラウザに依存せず、外部のソースリンクなどを使用しながら便利な機能を手軽に実現できるのが利点です。
  • jQueryのCSSメソッドにより、HTML/CSSに変更を加えることなく、手軽にスタイルを変更することが可能になります。

[jQuery] 記述練習（セレクタ）

【演習1】jQueryの練習（CSSメソッド）--- セレクタでテキストの表示を操作する
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<script src="js/jquery-1.11.0.min.js">
</script>
<script>
  //jQueryの命令をここに記述
  $(function(){
    $('h1').css('color','red');  
    $('li').css('color','blue');  
    $('#first').css('color','red'); //IDセレクター
    $('.second').css('color','green'); //Classセレクター
    //$('#first strong').css('color','orange'); //子孫セレクター
    $('#first strong,#third strong').css('color','orange'); //グループセレクター
    $('li *').css('color','red'); //ユニバーサルセレクターの例（liの中の要素にのみ作用）
    $('li > strong').css('color','yellowgreen'); //子セレクター
    $('#third + li').css('color','pink'); //隣接セレクター
    $('li:first-child').css('color','blue');//first-child擬似セレクター
    $('.second ~ li').css('color','red');//間接セレクター
    //否定擬似クラス
  })
</script>
</head>
<body>
<h1>jQueryの練習</h1>
<ul>
<li id="first">みかんみかん<strong>みかん</strong>みかん</li>
<li class="second">りんご<span>りんご</span>りんごりんご</li>
<li id="third"><strong>バナナ</strong>バナナバナナバナナ</li>
<li id="fourth">すいかすいかすいかすいか</li>
</ul>
</body>
</html>


[実行結果]

上記プログラムを実行すると、以下のような実行結果となります。


【演習2】jQueryの練習（CSSメソッド）--- セレクタでテキストの表示を操作する
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<script src="js/jquery-1.11.0.min.js">
</script>
<script>
  //CSS3のセレクター
  $(function(){
    $('.second ~ li').css('color','red');//間接セレクター　※1
    $('li:not(:first-child)').css('color','red');//否定擬似クラス　※2
    $('li:empty').css('color','green'); //empty擬似クラス　※3
    $('li:nth-child(4)').css('color','blue'); //nth-child擬似クラス　※4
    $('li:nth-child(odd)').css('color','purple'); ※5
    $('li:last-child').css('color','red');//last-child擬似クラス ※6　
  })
</script>
</head>
<body>
<h1>jQueryの練習</h1>
<ul>
<li id="first">みかんみかん<strong>みかん</strong>みかん</li>
<li class="second">りんご<span>りんご</span>りんごりんご</li>
<li></li>
<li id="third"><strong>バナナ</strong>バナナバナナバナナ</li>
<li id="fourth">すいかすいかすいかすいか</li>
<li></li>
</ul>
</body>
</html>

[実行結果]

上記プログラムを実行すると、以下のような実行結果となります。

[解説]
※1. 2番目以降（3番目のli要素から）文字色を赤に変更
※2. 2番目のli要素から文字色を赤に変更
※3. 空のli要素の文字色を緑色に変更
※4. ()で指定した（この場合4番目）li要素の文字色を青色に変更
※5. 奇数番目のli要素の文字色を紫色に変更
※6. 最後のli要素の文字色を赤に変更
ただし、処理は上から順次実行され、後の処理に上書きされるため、結果的には上図のような状態となります。


【演習3】jQueryの練習（CSSメソッド）--- セレクタでテキストの表示を操作する（attribute属性）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習（attribute属性）</title>
<script src="js/jquery-1.11.0.min.js">
</script>
<script>
  //CSS3のセレクター
  $(function(){
  $('[id]').css('color','red');//attribute属性
  $("[title='fourth']").css('color','green'); //
  $("li[title!='first']").css('color','orange');
  $("[title^='f']").css('color','red');
  $("[title$='d']").css('color','blue');
  $("[title*='ir']").css('color','pink');
  $("[title^='f'] [title*='th']").css('color','green');
  })
</script>
</head>
<body>
<h1>jQueryの練習</h1>
<ul>
<li id="fruits">みかんみかん<strong>みかん</strong>
<li title="first">みかんみかん<strong>みかん</strong>みかん</li>
<li title="second">りんご<span>りんご</span>りんごりんご</li>
<li></li>
<li title="third"><strong>バナナ</strong>バナナバナナバナナ</li>
<li title="fourth">すいかすいかすいかすいか</li>
<li></li>
</ul>
</body>
</html>

[解説]


■ attribute属性

id属性のli要素を赤字に変更

  $('[id]').css('color','red');//attribute属性
<li id="fruits">みかんみかん<strong>みかん</strong>

[実行結果]


■ [attribute='value']

titleに"fourth"が設定されたli要素を緑字に変更

  $("[title='fourth']").css('color','green');
<li title="fourth">すいかすいかすいかすいか</li>

[実行結果]

参考：http://ascii.jp/elem/000/000/440/440882/


■ [attribute!='value']

title属性に"first"以外のli要素の文字をオレンジ色に変更

  $("li[title!='first']").css('color','orange');

[実行結果]

参考：http://ascii.jp/elem/000/000/440/440882/


■ [attribute^='value']

title属性が"f"で始まるli要素の文字を赤字に変更

  $("[title^='f']").css('color','red');

[実行結果]

参考：http://ascii.jp/elem/000/000/440/440882/index-2.html


■ [attribute$='value']

title属性が"d"で終わるli要素の文字を青字に変更

  $("[title$='d']").css('color','blue');

[実行結果]

参考：http://ascii.jp/elem/000/000/440/440882/index-2.html


■ [attribute*='value']

title属性に"ir"が含まれるli要素の文字をピンク色に変更

  $("[title*='ir']").css('color','pink');

[実行結果]

参考：http://ascii.jp/elem/000/000/440/440882/index-2.html


■ [attribute*='value']

title属性が"f"で始まり"th"で終わるli要素の文字を緑色に変更

  $("[title^='f'][title*='th']").css('color','green')

[実行結果]

参考：http://ascii.jp/elem/000/000/440/440882/index-2.html


【演習4】jQueryの練習
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<style>
p {
  cursor:pointer;
}
</style>
<script src="js/jquery-1.11.0.min.js">
</script>
<script>
  /*私の好きなもの1つを当ててください。
  スポーツ、旅行、音楽、映画*/
  $(function(){
  $('input').click(function() {
    if($(this).val() ==3) alert('正解！');
    else alert('不正解！');  
  });
  $('p').click(function() {
      alert('クリックされました。');
  });
  });
//【書き換え例】JavaScript的な書き方
/*  $(function(){
  $('input').click(function() {  
  if($(this).val() ==3) {
    alert('正解!');  
  } else { 
  alert('不正解！')
  };
  });
  }); */
</script>
</head>
<body>
<p>私の好きなものを当ててください</p>
<form>
<label><input type="radio" name="favorite" value="1">スポーツ</label>
<label><input type="radio" name="favorite" value="2">旅行</label>
<label><input type="radio" name="favorite" value="3">音楽</label>
<label><input type="radio" name="favorite" value="4">映画</label>
</form>
</body>
</html>

[実行結果]
上記プログラムを実行すると、以下のような実行結果となります。
（正解に設定されている選択肢を選ぶと、「正解！」のダイアログボックスが表示されます）


【演習5】jQueryの練習（CSSメソッド）--- IDセレクタでli要素の背景色を変更
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<!--<link rel="styleshieet" href="css/style.css">-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script>
  //IDセレクタ
  $(function() {
  $('#cat').css('background','pink');
  $('#dog').css('background','yellowgreen');
});
</script>
</head>
<body>
<ul>
<li>fox</li>
<li id="cat">cat</li>
<li>fish</li>
<li id="dog">dog</li>
<li>bird</li>
</ul>
</body>
</html>

[実行結果]

上記プログラムを実行すると、以下のような実行結果(cat と dogにそえぞれ指定の色が設定された状態)となります。

参考：http://ascii.jp/elem/000/000/439/439414/index-2.html




【演習6】jQueryの練習（CSSメソッド）--- 子孫セレクター背景色を変更
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<!--<link rel="styleshieet" href="css/style.css">-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script>
  //CLASSセレクタ
  $(function() {
  $('.man').css('background','lightblue');
  $('.woman').css('background','pink');
});
</script>
</head>
<body>
<ul>
<li class="man">Paul</li>
<li class="man">Billy</li>
<li class="woman">Alice</li>
<li class="man">Taro</li>
<li class="woman">Hanako</li>
</ul>
<!--<ul>
    <li>fox</li>
    <li id="cat">cat</li>
    <li>fish</li>
    <li id="dog">dog</li>
    <li>bird</li>
</ul>-->
</body>
</html>

[実行結果]

上記プログラムを実行すると、以下のような実行結果となります。

（女性名の背景色にはピンクが、男性名の背景色には水色が設定されます。）

参考：　http://ascii.jp/elem/000/000/439/439414/index-3.html




【演習7】jQueryの練習（CSSメソッド）--- 要素セレクターで背景色を変更
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<!--<link rel="styleshieet" href="css/style.css">-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script>
  //TYPEセレクタ
  $(function() {
  $('p').css('background','pink');
  $('li').css('background','yellowgreen');
});
</script>
</head>
<body>
<h1>Heading</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
<ul>
<li>The quick brown fox jumps over the lazy dog.</li>
<li>The quick brown fox jumps over the lazy dog.</li>
</ul>
</body>
</html>


[実行結果]

上記プログラムを実行すると、以下のような実行結果となります。

（p要素にピンク色が、li要素に黄緑色が設定されます。）

参考：http://ascii.jp/elem/000/000/439/439414/index-2.html




【演習8】jQueryの練習（CSSメソッド）--- 子孫セレクターで背景色を変更
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<!--<link rel="styleshieet" href="css/style.css">-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script>
  //TYPEセレクタ
  $(function() {
  $('div strong').css('background','lightblue');
  $('ul strong').css('background','pink');
  });
</script>
</head>
<body>
<div>
<p>I have a <strong>pen.</strong></p>
</div>
<ul>
<li>His <strong>pen</strong> is red.</li>
<li>I need his <strong>pen.</strong></li>
</ul>
<p>She doesn't need a <strong>pen.</strong></p>
</body>
</html>

[実行結果]

上記プログラムを実行すると、以下のような実行結果となります。

（div要素下のstrong要素だけが水色に、li要素下のstrong要素だけがピンク色に設定されます。）



参考：http://ascii.jp/elem/000/000/439/439414/index-3.html


クロスフェード

参考：
Webデザインの勉強｜Webサイト制作科補足と初心者の勉強法
http://d.hatena.ne.jp/web-0127/
講師ブログより

※以前のURLに参照ページが存在しないため、以下画像にて内容を紹介させていただきます。
http://yahoo.jp/box/tFHyea

Crossfader

プラグイン入手先：
Javascript / CSS Crossfader : CSS . XHTML . Javascript . DOM : Brand Spanking New
http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.html


[ソースコード]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Crossfader</title>
<!--<link rel="styleshieet" href="css/style.css">-->
<style>
html, body, div, ul, img {
  margin: 0;
  padding: 0;
}
ul {
  list-style:none;
}

img {
  border:none;
  vertical-align:bottom;
}
#container {
  width:960px;
  margin: 0 auto;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script src="js/bsn.Crossfader.js"></script>
<script>
/*  $(function(){
  $('#cat').css('background','pink');
  $('#dog').css('background','yellowgreen');
  });*/
  //TYPEセレクタ
  $(function() {
  $('div strong').css('background','lightblue');
  $('ul strong').css('background','pink');
  //$('body').css('background','black');
});
</script>
</head>
<body>
<div id="container">
<ul id="img_fader">
<li id="img1"><img src="js/img/ph01.jpg" alt=""></li>
<li id="img2"><img src="js/img/ph02.jpg" alt=""></li>
<li id="img3"><img src="js/img/ph03.jpg" alt=""></li>
<li id="img4"><img src="js/img/ph04.jpg" alt=""></li>
</ul>
<script>
var cf = new Crossfader(new Array('img1', 'img2','img3','img4'), 2000, 3000);
</script>
</div><!--container-->
</body>
</html>


[実行結果]

以下の画像が交代で繰り返し表示されます。





Slide and cross-fade

先ほどの画像の一部が小窓から覗くようにスライド表示されます。


[ソースコード]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptでスライド(1)</title>
<!--<link rel="styleshieet" href="css/style.css">-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script src="js/jquery.cross-slide.js">
</script>
<style>
body {
  text-align: center;
}
#slideshow {
  width: 400px;
  height: 300px;
  margin: 100px auto 0 auto;
}
</style>
</head>
<body>
<div id="slideshow"></div>
<!--script>
$(function() {
$('#slideshow').crossSlide({
 sleep: 3,
 fade: 2	
}, [
{src: 'img/ph01.jpg'},
{src: 'img/ph02.jpg'},
{src: 'img/ph03.jpg'},
{src: 'img/ph04.jpg'},
])
});
</script-->
<script>
  $(function() {
    $('#slideshow').crossSlide({
      sleep: 3,
      fade: 2
    }, [
      { src: 'js/img/ph01.jpg' },
      { src: 'js/img/ph02.jpg' },
      { src: 'js/img/ph03.jpg' },
      { src: 'js/img/ph04.jpg' }
    ])
  });
</script>
</body>
</html>

sntkk3 読者になる

広告を非表示にする
関連記事
コメントを書く

※ 当サイトはアフィリエイト広告を利用しています