WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

jQuery基礎3

各要素を指定した要素で包む

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:各要素を指定した要素で包む</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('strong').wrap('<h2></h2>');
});
</script>
</head>
<body>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
<p>テキストテキスト</p>
<strong>テキストテキスト</strong>
</body>
</html>

全要素を別の要素で包む

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:全要素を別の要素で包む</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('strong').wrapAll('<h2></h2>');
});
</script>
</head>
<body>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
<p>テキストテキスト</p>
<strong>テキストテキスト</strong>
</body>
</html>

指定した要素の子要素を別の要素で包む

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:指定した要素の子要素を別の要素で包む</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('strong').wrapInner('<h2></h2>');
});
</script>
</head>
<body>
<p><strong>テキストテキスト</strong></p>
<p>テキストテキスト</p>
<strong>テキストテキスト</strong>
<p><strong>テキストテキスト</strong></p>
</body>
</html>

親要素を取り除く

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:親要素を取り除く</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('strong').unwrap();
});
</script>
</head>
<body>
<h1><strong>テキストテキスト</strong></h1>
</body>
</html>

要素の置き換え

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:要素の置き換え</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('p').replaceWith('<h1>置き換え後</h1>');
});
</script>
</head>
<body>
<p>置き換え前</p>
</body>
</html>

要素の削除

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:要素の削除</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('p strong').remove();
});
</script>
</head>
<body>
<p><strong>削除する要素</strong></p>
</body>
</html>

属性値の取得

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:属性値の取得</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  //$('a').rext();
  console.log($('a').attr('target'));
});
</script>
</head>
<body>
<p><a href="http://google.co.jp/" target="_blank">リンク先</a></p>
</body>
</html>