2014-12-23
2014-12-23
HTML/CSSを操作する
HTML/CSSを操作するjQueryの命令
- どのHTMLの要素を操作するか指定する(セレクター)
- 操作する内容(命令)
jQueryの命令
- テキストの変更と取得
- HTMLの変更と取得
- HTMLの挿入
- HTMLの移動
- 他の要素で包む
- 親要素を取り除く
- 要素の置き換え
- 要素の削除
- 属性値の変更の取得
- class属性の追加と削除
- CSSの制御
記述
<script> $(document).ready(function(){ //この中に処理を記述 }); </script>
を、以下の短縮形で記述します。
<script> $(function(){ //この中に処理を記述 }); </script>
テキストの変更と取得
- text()メソッドで命令
テキストの変更
<!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()メソッドで命令
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要素内の先頭に挿入
- prepend()メソッド
<!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要素内の最後に挿入
- append()メソッド
<!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要素内の前に挿入
- before()メソッド
<!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要素内の後ろに挿入
- after()メソッド
<!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要素内の先頭に移動
- prependTo()メソッド
<!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要素内の最後に移動
- appendTo()メソッド
<!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要素内の前に移動
- insertBefore()メソッド
<!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要素内の後ろに移動
- insertAfter()メソッド
<!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>
他の要素で包む
- 指定した要素を追加するのではなく、特定の要素で包む
各要素を指定した要素で包む
- wrap()メソッド
<!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>
全要素を別の要素で包む
- wrapAll()メソッド
<!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>
指定した要素の子要素を別の要素で包む
- wrapInner()メソッド
<!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>
属性値の変更と取得
属性値の変更
- attr()メソッド
<!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>
属性値の取得
- attr()メソッド
<!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>
属性値の削除
- removeAttr()メソッド
<!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属性値の追加
- addClass()メソッド
<!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属性値の削除
- removeClass()メソッド
<!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の制御
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つ以上の命令を連続して実行する