メソッド　その1

jQuery

・要素に命令を出す
[$( 'セレクタ' ).メソッド( パラメータ );]
・ドット（.）でつなぐ
・メソッド名には必ず（）をつける
・必要な場合は、パラメータを記述する

○CSS()メソッド
・要素のCSSを操作するためのメソッド
HTML

<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="third">jQuery</li>
<li>PHP</li>
</ul>
<script>
$(function(){
	$('#third').css('background','yellowgreen');
});
</script>
</body>

↓

※複数の選択
HTML

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

↓


○width()メソッド
・要素の幅を指定するメソッド

※メソッドチェーンの指定
複数のメソッドを、ドットでつなぐ
HTML

<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="third">jQuery</li>
<li>PHP</li>
</ul>
<script>
$(function(){
	$('#third').css('background','yellowgreen').width(250);
});
</script>
</body>

↓


addClass()メソッド
・要素にクラスを付け加える
HTML

<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
<script>
$(function(){
$('li:first-child').addClass('first');
});
</script>
</body>

↓


removeClassメソッド
・要素のクラス属性を削除する
HTML

<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li class="last">PHP</li>
</ul>
<script>
$(function(){
$('li:last-child').removeClass('last');
});
</script>
</body>

↓


実行結果、class名は削除される。（ただし、classという語句が残るので注意が必要）