HTML・CSSの操作

HTMLの操作

  • 要素内のテキストの設定・変更やHTML要素の設定・変更など
テキストの設定
  • 要素内のテキストを設定する場合は、text( )メソッドを使用します
$(function(){
  $( '#txt' ).text( 'テキストが変更されました' );
});


《テキスト内容を取得する場合》

var text =  $( '#txt' ).text( );
HTML要素の設定
  • HTML要素を設定したい場合は、html( )メソッドを使用します
  • html( )メソッドの引数にHTML要素を入れることで、そのセレクタ要素の中にHTML要素が追加されます
$(function(){
  $( ‘#content' ).text( ‘<p id=“txt”>p要素が追加されました</p>' );
});


《HTML要素を取得する場合》

var html =  $( ‘#content' ).html( );
要素の削除
  • 要素を削除したい場合は、remove( )メソッドを使用します
  • remove( )メソッドを実行すると、そのセレクタの要素は削除されます
  • そのため画面上には、何も表示されなくなります
$(function(){
  $( '#txt' ).remove( );
});

CSSの操作

CSSの設定
  • CSSを設定する場合は、CSSメソッドを使用します
$(function(){
  $( '#txt' ).css( ‘color’, ‘#f00' );
});


《定義》

$(function(){
  $( セレクタ ).css( ‘プロパティ名’, ‘値' );
});


《CSSを取得する場合》

  • 取得したい属性を第一引数に指定します
$(function(){
  alert( $( ‘#txt' ).css( ‘color’ ) );
});
幅と高さの設定・取得
  • CSSメソッドを使用せずに、幅と高さを設定・取得できるメソッドが用意されています
  • 単位を指定していない場合は「px」になります
$(function(){
  $( ‘#box' ).width( 100 ).height( 100 );
});


px以外の単位を入れたい場合は、

$( セレクタ ).width( ‘100%’ );
$( セレクタ ).height( ‘100%' );


これらのメソッドも、引数なしで実行すると値を取得することができます。

var w =  $( ‘#box' ).width( );
var h =  $( ‘#box' ). height( );

メソッドとイベント演習問題

複数プロパティ指定
  • 以下のように表示するようjQueryを記述しなさい
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="third">jQuery</li>
<li>PHP</li>
</ul>
</body>


要素の追加
  • 以下のように表示するようjQueryを記述しなさい
<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
</body>




  • ol要素を、id名「wrapper」でdiv要素で囲みなさい
<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>jQuery</li>
</ol>
</body>

clickイベント

  • ある要素がクリックされたら、「クリックされました」と警告ボックスに表示させるjQueryを記述しなさい


以下の写真を使いjQueryで記述しなさい



  • テキストリンクをクリックすると画像が換わるようjQueryを記述しなさい
<body>
<p id="photo">
<img src="img/natsu.png" alt="夏の風景">
</p>
<p>
<a id="trigger" href="img/surf.png" title="サーフィン">このテキストリンクをクリックするとサーフィンの写真に置き換わる</a>
</p>
</body>
  • 画像をクリックすると画像が換わるようjQueryを記述しなさい
<body>
<p id="photo">
<a id="trigger" href="img/surf.png" title="サーフィン"><img src="img/natsu.png" alt="夏の風景"></a>
</p>
</body>
  • 画像にマウスカーソルが乗ると画像が換わり、離れるともとの画像に戻るようjQueryを記述しなさい
<body>
<p id="photo">
<a id="trigger" href="img/surf.png" title="サーフィン"><img src="img/natsu.png" alt="夏の風景"></a>
</p>
</body>

フェードアウト

  • クリックしたら画像が消えるようjQueryを記述しなさい
  • 画像は適宜

アコーディオンメニュー

<body>
<div id="container">
<dl>
<dt>項目 1</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>項目 2</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>項目 3</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
</div>
</body>

解答例

<script>
$(function(){
  $( '#third' ).css( {
    'color': 'white',
    'background': 'yellowgreen',
    'padding': '10px',
    'font-size': '30px'
  })
  .width( 250 );
});
</script>

<script>
$(function(){
  $( '#list' ).append( '<li>jQuery</li>' );
});
</script>

<script>
$(function(){
  $( '#list' ).before( '<h1>Web制作に必須のjQueryを勉強します。</h1>' );
});
</script>

<script>
$(function(){
  $( '#list' ).after( '<p>Web制作に必須のjQueryを勉強します。</p>' );
});
</script>

<script>
$(function(){
  $( '#list' ).wrap( '<div id="wrapper"></div>' );
});
</script>

<script>
$(function(){
  $( '#list li:last-child' ).remove();
});
</script>

<style>
#div1 {
  width: 100px;
  height: 100px;
  background: #FC0;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
$(function(){
  $( '#div1' ).click(function() {
    alert ( 'クリックされました' );
  });
});
</script>
</body>

<body>
<p id="photo">
<img src="img/summer.png" alt="夏の風景">
</p>
<p>
<a id="trigger" href="img/surf.png" title="サーフィン">テキストリンクをクリックするとサーフィンの写真に置き換える。</a>
</p>
<script>
$(function(){
  $( '#trigger' ).click(function() {
    $( '#photo img' ).attr({
      'src': 'img/surf.png',
      'alt': 'サーフィン'
    });
    return false;
  });
});
</script>
</body>

<body>
<p id="photo">
<a id="trigger" href="img/surf.png" title="サーフィン"><img src="img/summer.png" alt="夏の風景"></a>
</p>
<p>
画像ををクリックするとサーフィンの写真に置き換える。
</p>
<script>
$(function(){
  $( '#trigger' ).click(function() {
    $( '#photo img' ).attr({
    'src': 'img/surf.png',
    'alt': 'サーフィン'
    });
  return false;
  });
});
</script>
</body>

<body>
<p><img src="img/summer.png" alt="夏の風景"></p>
<script>
$(function(){
  $( 'img' ).mouseover(function(){
    $(this).attr( 'src', 'img/surf.png' ).attr( 'alt', 'サーフィン' );
  }).mouseout(function(){
    $(this).attr( 'src', 'img/summer.png' ).attr( 'alt', '夏の風景' );
  });
});
</script>
</body>

<body>
<p><img src="img/halloween.jpg" alt="ハロウィン"></p>
<script>
$(function() {
  $('img').click(function() {$(this).fadeOut('slow');}); 
});
</script>
</body>

<script>
$(function(){
  $('dd:not(:first)').css('display','none');
  $('dl dt').click(function(){
    if($($(this).next()).css('display')=='none'){
      $('dd').slideUp('slow');
      $($(this).next()).slideDown('slow');
    }
  });
});
</script>