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>