読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

HTML/CSSを操作する

HTML/CSSを操作するjQueryの命令

  1. どのHTMLの要素を操作するか指定する(セレクター)
  2. 操作する内容(命令)
jQueryの命令
  1. テキストの変更と取得
  2. HTMLの変更と取得
  3. HTMLの挿入
  4. HTMLの移動
  5. 他の要素で包む
  6. 親要素を取り除く
  7. 要素の置き換え
  8. 要素の削除
  9. 属性値の変更の取得
  10. class属性の追加と削除
  11. CSSの制御

記述

<script>
$(document).ready(function(){
  //この中に処理を記述
});
</script>


を、以下の短縮形で記述します。

<script>
$(function(){
  //この中に処理を記述
});
</script>

テキストの変更と取得

  • text()メソッドで命令


テキストの変更

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:テキストの変更</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $("p#first").text( '変更後' );
});
</script>
</head>
<body>
<p id="first">変更前</p>
</body>
</html>


テキストの取得

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:テキストの取得</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'p#second' ).text($( 'p#first' ).text() );
});
</script>
</head>
<body>
<p id="first">取得する文字列</p>
<p id="second">変更前</p>
</body>
</html>

HTMLの変更と取得

  • html()メソッドで命令


HTMLの変更

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:HTMLの変更</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'p#first' ).html( '<strong>変更後</strong>' );
});
</script>
</head>
<body>
<p id="first">変更前</p>
</body>
</html>


HTMLの取得

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:HTMLの取得</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'p#second' ).html($( 'p#first' ).html() );
});
</script>
</head>
<body>
<p id="first"><strong>変更後</strong></p>
<p id="second">変更前</p>
</body>
</html>

HTMLの挿入

  • prepend()、append()、befor()、after()メソッドで命令


HTML要素内の先頭に挿入

  • prepend()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:HTML要素内の先頭に挿入</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'p#first' ).prepend( '<strong>先頭に挿入</strong>' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
</body>
</html>


HTML要素内の最後に挿入

  • append()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:HTML要素内の最後に挿入</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'p#first' ).append( '<strong>最後に挿入</strong>' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
</body>
</html>


HTML要素内の前に挿入

  • before()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:HTML要素内の前に挿入</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $ ('p#first' ).before( '<h1>前に挿入</h1>' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
</body>
</html>


HTML要素内の後ろに挿入

  • after()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:HTML要素内の後ろに挿入</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $ ('p#first' ).after( '<h1>前に挿入</h1>' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
</body>
</html>

HTMLの移動

  • HTMLの要素を文書内に新たに追加するのではなく、もともと存在していた要素の文書内の位置を変更する


HTML要素内の先頭に移動

  • prependTo()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:HTML要素内の先頭に移動</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'strong' ).prependTo( 'p' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
<strong>先頭に移動</strong>
</body>
</html>


HTML要素内の最後に移動

  • appendTo()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:HTML要素内の最後に移動</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'strong' ).appendTo( 'p' );
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
<strong>最後に移動</strong>
</body>
</html>


HTML要素内の前に移動

  • insertBefore()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:HTML要素内の前に移動</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'h1' ).insertBefore( 'p' );
});
</script>
</head>
<body>
<p>テキストテキスト</p>
<h1>前に移動</h1>
</body>
</html>


HTML要素内の後ろに移動

  • insertAfter()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:HTML要素内の後ろに移動</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'h1' ).insertAfter( 'p' );
});
</script>
</head>
<body>
<h1>後ろに移動</h1>
<p>テキストテキスト</p>
</body>
</html>

他の要素で包む

  • 指定した要素を追加するのではなく、特定の要素で包む


各要素を指定した要素で包む

  • wrap()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:各要素を指定した要素で包む</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'strong' ).wrap( '<h2></h2>' );
});
</script>
</head>
<body>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</body>
</html>


全要素を別の要素で包む

  • wrapAll()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:全要素を別の要素で包む</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'strong' ).wrapAll( '<h2></h2>' );
});
</script>
</head>
<body>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</body>
</html>


指定した要素の子要素を別の要素で包む

  • wrapInner()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:指定した要素の子要素を別の要素で包む</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'p' ).wrapInner( '<strong></strong>' );
});
</script>
</head>
<body>
<p>テキストテキスト</p>
<p>テキストテキスト</p>
</body>
</html>

親要素を取り除く

  • 指定した要素の親要素を取り除く
  • unwrap()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:親要素を取り除く</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'strong' ).unwrap();
});
</script>
</head>
<body>
<h1><strong>テキストテキスト</strong></h1>
</body>
</html>

要素の置き換え

  • 指定した要素を他の要素に置き換える
  • replaceWith()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:要素の置き換え</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'p' ).replaceWith( '<h1>置き換え後</h1>' );
});
</script>
</head>
<body>
<p>置き換え前</p>
</body>
</html>

要素の削除

  • セレクターで指定した要素を削除する
  • remove()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:要素の削除</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'p strong' ).remove();
});
</script>
</head>
<body>
<p><strong>削除する要素</strong>テキストテキストテキスト</p>
</body>
</html>

属性値の変更と取得

属性値の変更
  • attr()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:属性値の変更</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'a' ).attr( 'href', 'http://google.co.jp/' );
});
</script>
</head>
<body>
<p><a href="http://yahoo.co.jp/">リンク先</a></p>
</body>
</html>
属性値の取得
  • attr()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:属性値の取得</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'a' ).text( $( 'a' ).attr( 'href' ) );
});
</script>
</head>
<body>
<p><a href="http://google.co.jp/">リンク先</a></p>
</body>
</html>
属性値の削除
  • removeAttr()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:属性値の削除</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'a' ).removeAttr( 'target' );
});
</script>
</head>
<body>
<p><a href="http://google.co.jp/" target="_blank">リンク先</a></p>
</body>
</html>

class属性値の追加と削除

class属性値の追加
  • addClass()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:class属性値の追加</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.red {
  color:red;
}
</style>
<script>
$(function(){
  $( 'p' ).addClass( 'red' );
});
</script>
</head>
<body>
<p>テキストテキストテキストテキストテキスト</p>
</body>
</html>
class属性値の削除
  • removeClass()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:class属性値の削除</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.red {
  color:red;
}
</style>
<script>
$(function(){
  $( 'p' ).removeClass( 'red' );
});
</script>
</head>
<body>
<p class="red">テキストテキストテキストテキストテキスト</p>
</body>
</html>

CSSの制御

  • jQueryでは簡単な記述でCSSのプロパティの値を設定したり、取得したりできる
CSSプロパティの設定
  • css()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:CSSプロパティの設定</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $ ('p' ).css( 'color', 'red' );
});
</script>
</head>
<body>
<p>テキストテキストテキストテキストテキスト</p>
</body>
</html>


《一括して設定する場合》

<script>
$(function(){
  $('p').css({ 
    backgroundColor: 'skyblue', 
    fontWeight: 'bold',
  color: 'yellow' 
	});
});
</script>
CSSプロパティの値の取得
  • css()メソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド:CSSプロパティの値の取得</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $( 'p' ).text( $( 'p' ).css( 'color' ) );
});
</script>
</head>
<body>
<p>テキストテキストテキストテキストテキスト</p>
</body>
</html>

メソッドチェーン

  • 命令と命令を、ドットでつなげて記述する
  • 1つのセレクターに対して、2つ以上の命令を連続して実行する


広告を非表示にする