HTML/CSSを操作する - web-0127のブログ

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

どのHTMLの要素を操作するか指定する（セレクター）
操作する内容（命令）

jQueryの命令

テキストの変更と取得
HTMLの変更と取得
HTMLの挿入
HTMLの移動
他の要素で包む
親要素を取り除く
要素の置き換え
要素の削除
属性値の変更の取得
class属性の追加と削除
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>

メソッドチェーン

テキストP.73
命令と命令を、ドットでつなげて記述する
１つのセレクターに対して、２つ以上の命令を連続して実行する