読者です 読者をやめる 読者になる 読者になる

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

Webデザインの学習をはじめた初心者のブログです。

jQuery:基本4 HTML/CSSを操作する命令

32 テキストの変更と取得
jQueryの練習 - p56~テキストの変更と取得:完成版にリンク

<script>
$(function(){
$('#push').on('click',function(){
	$('p#first').text('変更後');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">変更前</p>
</body>

33 テキストの取得
jQueryの練習 - p56~テキストの変更と取得:完成版にリンク

<script>
$(function(){
$('#push').on('click',function(){
	$('p#second').text($('p#first').text());
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">取得する文字列</p>
<p id="second">変更前</p>
</body>

34  HTMLの変更
jQueryの練習 - p58~HTMLの変更と取得:完成版にリンク

<script>
$(function(){
$('#push').on('click',function(){
$('p#first').html('<strong>変更後</strong>');
});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">変更前</p>
</body>

35  HTMLの取得
jQueryの練習 - p58~HTMLの変更と取得:完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p#second').html($('p#first').html());
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first"><strong>変更後</strong></p>
<p id="second">変更前</p>
</body>

36 HTMLの挿入
要素の内容を残したままHTMLに追加したいときは
prepend() 指定した要素内部の先頭に挿入
append() 指定した要素内部の最後に挿入
before() 指定した要素の前に挿入
after() 指定した要素の後ろに挿入
jQueryの練習 - p59~HTMLの挿入:完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p#first').prepend('<strong>先頭に挿入</strong>');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">テキストテキスト</p>

37 append()
指定した要素内部の最後に挿入
jQueryの練習 - p59~HTMLの挿入:完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p#first').append('<strong>最後に挿入</strong>');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">テキストテキスト</p>
</body>

38 before()
指定した要素の前に挿入
jQueryの練習 - p59~HTMLの挿入:完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p#first').before('<h1>前に挿入</h1>');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">テキストテキスト</p>
</body>

39 after()
指定した要素の後ろに挿入
jQueryの練習 - p59~HTMLの挿入:完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p#first').after('<h1>後ろに挿入</h1>');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">テキストテキスト</p>
</body>

40 prependTo()
もともと存在していた要素の文書内の位置を変更する
prependTo() 指定した要素を、他の要素の内部の先頭に移動
appendTo() 指定した要素を、他の要素の内部の最後に移動
insertBefore() 指定した要素を、他の要素の前に移動
insertAfter() 指定した要素を、他の要素の後ろに移動
jQueryの練習 - p61~HTMLの移動:完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('strong').prependTo('p');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p>テキストテキスト</p>
<strong>先頭に移動</strong>
</body>