メソッド　その2

jQuery

○複数のプロパティの記述

$( 'セレクタ' ).メソッド( { 'プロパティ'：'値', 'プロパティ'：'値' } );

・コロン（:）で値をつなぐ
・ふたつ目以降は、カンマ（,）で区切る
・全体は、「{ }」で囲む
HTML

<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="third">jQuery</li>
<li">PHP</li>
</ul>
<script>
$(function(){
$('#third').css({
	'color':'white',
	'background':'yellowgreen',
	'padding':'10px',
	'font-size':'30px'
})
.width(250);
});
</script>
</body>

↓


○パラメータを記述しない
・値を取得することが目的
HTML

<style>
.left,.right{
  width:200px;
  margin:30px;
  padding:16px;
  background:#F2F2F2;
  float:left;
}
</style>
</head>

<body>
<p class="left">
height()メソッドにパラメータの数値を記述すれば、要素の高さを変更することができます。height()メソッドにパラメータの数値を記述すれば、要素の高さを変更することができます。</p>
<p class="right">
ここに本文が入る。</p>
<script>
$(function(){
$('.right').height($('.left').height());
});
</script>
</body>

↓


○text()メソッド
・テキストを丸ごと入れ替える
・HTMLソースと表示されるテキスト内容が違う
HTML

<body>
<h1 id="headline">最も優先順位の高い見出し</h1>
<script>
$(function(){
	$('#headline').text('テキストを置き換えます。');
});
</script>
</body>

↓


○htmlメソッド
・HTMLのマークアップごと入れ替える
HTML

<body>
<h1 id="headline">最も優先順位の高い見出し</h1>
<script>
$(function(){
	$('#headline').html('<a href="#">HTMLのマークアップごと置き換えます。</a>');
});
</script>
</body>

↓


○prepend()メソッド
・指定した要素の先頭に挿入する
HTML

<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<script>
$(function(){
	$('#list').prepend('<li>jQuery</li>');
});
</script>
</body>

↓


○append()メソッド
・指定した要素の最後に挿入する
HTML

<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<script>
$(function(){
	$('#list').append('<li>jQuery</li>');
});
</script>
</body>

↓


○before()メソッド
・指定した要素の前に挿入する
HTML

<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<script>
$(function(){
	$('#list').before('<h1>Web制作に必須のjQueryを勉強します。</h1>');
});
</script>
</body>

↓


○after()メソッド
・指定した要素の後ろに挿入する
HTML

<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<script>
$(function(){
	$('#list').after('<p>Web制作に必須のjQueryを勉強します。</p>');
});
</script>
</body>

↓


○wrap()メソッド
・指定した要素をラッピング（包む）する
HTML

<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<script>
$(function(){
	$('#list').wrap('<div id="wrapper"></div>');
});
</script>
</body>

↓


○remove()メソッド
・指定した要素を削除する
HTML

<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>jQuery</li>
</ol>
<script>
$(function(){
	$('#list li:last-child').remove();
});
</script>
</body>

↓