使い方：メソッド

メソッド

  • セレクタで指定した箇所（要素 / 属性）に対して「何をさせる」と指示を与えること

jQueryでCSSスタイルを追加・変更する

１つの指示を出す場合
<script>
//1つの指示を出す（記述方法1）
$('セレクタ').css('color', '#f00');  //文字を赤色に
</script>

<script>
//1つの指示を出す（記述方法2）
$('セレクタ').css({
  'color' : '#f00'   //文字を赤色に
});
</script>


《例》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド：１つの指示を出す場合</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

  //1つの指示を出す（記述方法1）
  $('#first').css('color', '#f00');  //文字を赤色に

  //1つの指示を出す（記述方法2）
  $('#second').css({
    'color' : '#f00'  //文字を赤色に
  });

});
</script>
</head>
<body>
<div id="first">吾輩（わがはい）は猫である。</div>
<div id="second">名前はまだ無い。</div>
</body>
</html>


複数指示を出す場合
<script>
//複数指示を出す
$('セレクタ').css('color', '#f00');
$('セレクタ').css('background-color', '#fff');
$('セレクタ').css('border', '1px solid #555');
</script>

<script>
//共通セレクタに複数指示を出す
$('セレクタ').css({
  'color' : '#f00',
  'background-color' : '#fff',
  'border' : '1px solid #555'
});
</script>


《例》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド：複数指示を出す場合</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

  //1つのセレクタに対して複数のスタイルを指定（記述方法1）
  $('#first').css('color', '#f00');
  $('#first').css('background-color', '#fff');
  $('#first').css('border', '1px solid #555');

  //1つのセレクタに対して複数のスタイルを指定（記述方法2）
  $('#second').css({
    'color' : '#f00',
    'background-color' : '#fff',
    'border' : '1px solid #555'
  });

});
</script>
</head>
<body>
<div id="first">国境の長いトンネルを抜けると雪国であった。</div>
<div id="second">夜の底が白くなった。信号所に汽車が止まった。</div>
</body>
</html>


HTMLを操作するメソッド

《よく使われるHTML要素の操作メソッド一覧》

メソッド 概要
$('セレクタ').html();

HTML要素内文字列を取得または書き換える（文字列内にHTMLを記述した場合はHTML処理して表示される）
$('セレクタ').text(); HTML要素内文字列を取得または書き換える（文字列内にHTMLを記述した場合は文字列で表示される）
$('セレクタ').val(); input要素から値を取得または書き換える
$('セレクタ').attr(); HTML要素の属性名を指定して値を取得または書き換える
$('セレクタ').prepend(); 要素の先頭にHTML要素を追加
$('セレクタ').append(); 要素の最後にHTML要素を追加
$('セレクタ').before(); 要素の前にHTML要素を挿入
$('セレクタ').after(); 要素の後にHTML要素を挿入
$('セレクタ').empty(); 子要素をすべて削除
$('セレクタ').remove(); 要素をすべて削除

文字列の取得と書き換え

  • htmlメソッド
  • HTML要素に対して、文字列を書き換えたり文字列を取得したりできます
  • HTMLタグを記述した際にHTMLとして扱うのが特徴です
文字列を取得する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド：文字列を取得する</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

  alert($('#first').html());

});
</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.0.min.js"></script>
<script>
$(document).ready(function(){

  $('#first').html('<small>文字列を要素に追加</small>');

});
</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.0.min.js"></script>
<script>
$(document).ready(function(){

　　$('#first').html('');	//空だと文字列を消します。

});
</script>
</head>
<body>
<p id="first">石炭をば早や積み果てつ。</p>
</body>
</html>

テキストを操作する

  • textメソッド
文字列を取得
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド：文字列を取得する</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

  alert($('#first').text());

});
</script>
</head>
<body>
<p id="first">一人の下人が、<small>羅生門</small>の下で雨やみを待っていた。</p>
</body>
</html>


文字列を上書き変更
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド：文字列を上書き変更</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

  $('#first').text('<small>文字列を要素に追加</small>');

});
</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.0.min.js"></script>
<script>
$(document).ready(function(){

	$('#first').text('');	//空だと文字列を消します。

});
</script>
</head>
<body>
<p id="first">石炭をば早や積み果てつ。</p>
</body>
</html>