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

2014-12-23

2014-12-23

HTML/CSSを操作するAdd Star

 

 

HTML/CSSを操作するjQueryの命令

  1. どのHTMLの要素を操作するか指定する(セレクター)
  2. 操作する内容(命令)

jQueryの命令
  1. テキストの変更と取得
  2. HTMLの変更と取得
  3. HTMLの挿入
  4. HTMLの移動
  5. 他の要素で包む
  6. 親要素を取り除く
  7. 要素の置き換え
  8. 要素の削除
  9. 属性値の変更の取得
  10. class属性の追加と削除
  11. CSSの制御

記述

<script>
$(document).ready(function(){
//この中に処理を記述
});
</script>

を、以下の短縮形で記述します。

<script>
$(function(){
//この中に処理を記述
});
</script>

テキストの変更と取得


 

テキストの変更

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:テキストの変更</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $("p#first").text('変更後');
});
</script>
</head>
<body>
<pid="first">変更前</p>
</body>
</html>

 

テキストの取得

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:テキストの取得</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('p#second').text($('p#first').text());
});
</script>
</head>
<body>
<pid="first">取得する文字列</p>
<pid="second">変更前</p>
</body>
</html>

HTMLの変更と取得


 

HTMLの変更

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:HTMLの変更</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('p#first').html('<strong>変更後</strong>');
});
</script>
</head>
<body>
<pid="first">変更前</p>
</body>
</html>

 

HTMLの取得

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:HTMLの取得</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('p#second').html($('p#first').html());
});
</script>
</head>
<body>
<pid="first"><strong>変更後</strong></p>
<pid="second">変更前</p>
</body>
</html>

HTMLの挿入

  • prepend()、append()、befor()、after()メソッドで命令

 

HTML要素内の先頭に挿入

 


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

 

HTML要素内の最後に挿入

 


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

 

HTML要素内の前に挿入

 


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:HTML要素内の前に挿入</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $ ('p#first').before('<h1>前に挿入</h1>');
});
</script>
</head>
<body>
<pid="first">テキストテキスト</p>
</body>
</html>

 

HTML要素内の後ろに挿入

 


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:HTML要素内の後ろに挿入</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $ ('p#first').after('<h1>前に挿入</h1>');
});
</script>
</head>
<body>
<pid="first">テキストテキスト</p>
</body>
</html>

HTMLの移動

  • HTMLの要素を文書内に新たに追加するのではなく、もともと存在していた要素の文書内の位置を変更する

 

HTML要素内の先頭に移動

 


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:HTML要素内の先頭に移動</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('strong').prependTo('p');
});
</script>
</head>
<body>
<pid="first">テキストテキスト</p>
<strong>先頭に移動</strong>
</body>
</html>

 

HTML要素内の最後に移動

 


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:HTML要素内の最後に移動</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('strong').appendTo('p');
});
</script>
</head>
<body>
<pid="first">テキストテキスト</p>
<strong>最後に移動</strong>
</body>
</html>

 

HTML要素内の前に移動

 


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:HTML要素内の前に移動</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('h1').insertBefore('p');
});
</script>
</head>
<body>
<p>テキストテキスト</p>
<h1>前に移動</h1>
</body>
</html>

 

HTML要素内の後ろに移動

 


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:HTML要素内の後ろに移動</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('h1').insertAfter('p');
});
</script>
</head>
<body>
<h1>後ろに移動</h1>
<p>テキストテキスト</p>
</body>
</html>

他の要素で包む

  • 指定した要素を追加するのではなく、特定の要素で包む

 

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

 


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

 

全要素を別の要素で包む

 


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

 

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

 


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

親要素を取り除く

  • 指定した要素の親要素を取り除く
  • unwrap()メソッド

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

要素の置き換え

  • 指定した要素を他の要素に置き換える
  • replaceWith()メソッド

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:要素の置き換え</title>
<scriptsrc="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>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:要素の削除</title>
<scriptsrc="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>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:属性値の変更</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('a').attr('href', 'http://google.co.jp/');
});
</script>
</head>
<body>
<p><ahref="http://yahoo.co.jp/">リンク先</a></p>
</body>
</html>

属性値の取得

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:属性値の取得</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('a').text( $('a').attr('href'));
});
</script>
</head>
<body>
<p><ahref="http://google.co.jp/">リンク先</a></p>
</body>
</html>

属性値の削除

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:属性値の削除</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('a').removeAttr('target');
});
</script>
</head>
<body>
<p><ahref="http://google.co.jp/"target="_blank">リンク先</a></p>
</body>
</html>

class属性値の追加と削除

class属性値の追加

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:class属性値の追加</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.red {
  color:red;
}
</style>
<script>
$(function(){
  $('p').addClass('red');
});
</script>
</head>
<body>
<p>テキストテキストテキストテキストテキスト</p>
</body>
</html>

class属性値の削除

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッド:class属性値の削除</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.red {
  color:red;
}
</style>
<script>
$(function(){
  $('p').removeClass('red');
});
</script>
</head>
<body>
<pclass="red">テキストテキストテキストテキストテキスト</p>
</body>
</html>

CSSの制御

  • jQueryでは簡単な記述でCSSのプロパティの値を設定したり、取得したりできる

CSSプロパティの設定

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッドCSSプロパティの設定</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $ ('p').css('color', 'red');
});
</script>
</head>
<body>
<p>テキストテキストテキストテキストテキスト</p>
</body>
</html>

《一括して設定する場合》

<script>
$(function(){
  $('p').css({
    backgroundColor: 'skyblue', 
    fontWeight: 'bold',
  color: 'yellow'
});
});
</script>

CSSプロパティの値の取得

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>メソッドCSSプロパティの値の取得</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('p').text( $('p').css('color'));
});
</script>
</head>
<body>
<p>テキストテキストテキストテキストテキスト</p>
</body>
</html>

メソッドチェーン

  • 命令と命令を、ドットでつなげて記述する
  • 1つのセレクターに対して、2つ以上の命令を連続して実行する