2014-12-04

2014-12-04

使い方：メソッドAdd Star

jQuery

 

 

メソッド

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

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

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

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

《例》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド：１つの指示を出す場合</title>
<scriptsrc="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>
<divid="first">吾輩（わがはい）は猫である。</div>
<divid="second">名前はまだ無い。</div>
</body>
</html>

f:id:web-0818:20141005214144p:image


複数指示を出す場合
<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>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド：複数指示を出す場合</title>
<scriptsrc="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>
<divid="first">国境の長いトンネルを抜けると雪国であった。</div>
<divid="second">夜の底が白くなった。信号所に汽車が止まった。</div>
</body>
</html>

f:id:web-0818:20141005215755p:image


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>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド：文字列を取得する</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

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

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

f:id:web-0818:20141005223321p:image


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

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

});
</script>
</head>
<body>
<pid="first"></p>
</body>
</html>

f:id:web-0818:20141005230430p:image


文字列を空にする
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド：文字列を空にする</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

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

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

テキストを操作する


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

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

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

f:id:web-0818:20141006000417p:image


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

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

});
</script>
</head>
<body>
<pid="first"></p>
</body>
</html>

f:id:web-0818:20141006000418p:image


文字列を空にする
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド：文字列を空にする</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

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

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