WEBデザインの勉強

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

jQuery基礎2

文字列を取得する

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:文字列を取得する</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  alert($('#first').text());
});
</script>
</head>
<body>
<p id="first">一人の下人が、<small>羅生門</small>の下で雨やみを待っていた。</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>
</head>
<body>
<ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $('#first').html('');
});
</script>
</head>
<body>
<p id="first">石炭をば早や積み果てつ。</p>
</body>
</html>

HTML要素内の先頭に挿入

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:HTML要素内の先頭に挿入</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('p#first').prepend('<strong>先頭に挿入</strong>')
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
</body>
</html>

HTML要素内の先頭に挿入

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:HTML要素内の先頭に挿入</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('p#first').append('<strong>最後に挿入</strong>')
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
</body>
</html>

HTML要素内の先頭に移動

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:HTML要素内の先頭に移動</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').prependTo('p')
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
<strong>先頭に移動</strong>
</body>
</html>

HTML要素内の最後に移動

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メソッド:HTML要素内の最後に移動</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').appendTo('p')
});
</script>
</head>
<body>
<strong>最後に移動</strong>
<p id="first">テキストテキスト</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(){
  $('h1').insertBefore('p')
});
</script>
</head>
<body>
<p id="first">テキストテキスト</p>
<h1>前に移動</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(){
  $('h1').insertAfter('p')
});
</script>
</head>
<body>
<h1>後ろに移動</h1>
<p id="first">テキストテキスト</p>
</body>
</html>