Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

jQuery:基本6

51 addClass()
Class属性の追加:検証画面でみると変化がわかる
jQueryの練習 - p70~class属性の追加と削除:完成版にリンク

<script>
$(document).ready(function(){  //ページが開いたら
	$('button').on('click',function() {
		$('p').addClass('red');
	});
});
</script>
</head>

<body>
<p><button>テスト</button></p>
<p>テキストテキストテキストテキスト</p>
</body>

52 addClass()
Class属性の削除:検証でみてみる
jQueryの練習 - p70~class属性の追加と削除:完成版にリンク

<script>
$(document).ready(function(){  //ページが開いたら
	$('button').on('click',function() {
		$('p').removeClass('red');
		});
});
</script>
</head>

<body>
<p><button>テスト</button></p>
<p class="red">テキストテキストテキストテキスト</p>
</body>

53 css()
jQueryの練習 - p71~CSSの制御:完成版にリンク

<script>
$(document).ready(function(){  //ページが開いたら
	$('button').on('click',function() {
		$('p').css('color','red');
		});
});
</script>
</head>

<body>
<p id="b"><button>テスト</button></p>
<p>テキストテキストテキストテキスト</p>
</body>