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

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

jQuery:基本5

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

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

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

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

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

<body>
<button id="push">押す</button>
<h1>後ろに移動</h1>
<p>テキストテキスト</p>
</body>

43 wrap()
セレクターで指定した要素を、別の要素で包む
包みたいHTMLタグを<要素名>のように、空の状態で()内に記述

jQueryの練習 - p64~他の要素で包む:完成版にリンク

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

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

44 wrapALL()
セレクターで指定した要素をまとめて、別の要素で包む

jQueryの練習 - p64~他の要素で包む:完成版にリンク

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

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

45 wrapInner()
セレクターで指定した要素の子要素やテキストを別の要素で包みたいとき

jQueryの練習 - p64~他の要素で包む:完成版にリンク

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

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

46 replaceWith()
セレクターで指定した要素の子要素やテキストを別の要素で包みたいとき

jQueryの練習 - p67~要素の置き換え:完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p').replaceWith('<h1>置き換え後</h1>');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p>置き換え前</p>
</body>

47 remove()
セレクターで指定した要素を削除できます。

jQueryの練習 - p67~要素の削除:完成版にリンク

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

<body>
<button id="push">押す</button>
<p><strong>削除する内容</strong>なんだなんだ</p>
</body>

48 attr()
属性値を変更できる
$(セレクター).attr('属性名','属性値');
jQueryの練習 - p68~属性値の変更と取得:完成版にリンク

<script>
$(document).ready(function(){  //ページが開いたら
	$('#push').on('click',function() {
		$('a').text($('a').attr('href'));
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<a href="http://cafemeal.muji.com/jp/recipe/">リンク先</a>
</body>

49 attr()
属性値の取得もできる
$(セレクター).text('属性名','属性値');
リンク先が変わっている
jQueryの練習 - p68~属性値の変更と取得:完成版にリンク

<script>
$(document).ready(function(){  //ページが開いたら
	$('#push').on('click',function(){
		$('a').attr('href','http://imaonline.jp');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<a href="http://cafemeal.muji.com/jp/recipe/">リンク</a>
</body>

50
targetを指定することで、別ウィンドウで開いたり、開かなかったりする
jQueryの練習 - p68~属性値の変更と取得:完成版にリンク

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

<body>
<p><button>テスト</button></p>
<a href="http://cafemeal.muji.com/jp/recipe/" target="_blank">リンク</a>
</body>