【jQuery】基本セレクターのサンプル
■デモ
id=listの下にあるa要素のCSSを変更
class=itemの直下にあるa要素のCSSを変更
class=itemの次にある兄弟ノードのp要素のCSSを変更
class=itemの次以降にある兄弟ノードのp要素のCSSを変更
id=list配下すべての要素のstyleをリセット
■HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="list"> <p class="item"><a href="#">リンク1</a></p> <p><a href="#">リンク2</a></p> <p><a href="#">リンク3</a></p> </div> <br> <input type="button" id="button1" value="CSSを変更1"/> id=listの下にあるa要素のCSSを変更<br> <input type="button" id="button2" value="CSSを変更2"/> class=itemの直下にあるa要素のCSSを変更<br> <input type="button" id="button3" value="CSSを変更3"/> class=itemの次にある兄弟ノードのp要素のCSSを変更<br> <input type="button" id="button4" value="CSSを変更4"/> class=itemの次以降にある兄弟ノードのp要素のCSSを変更<br> <input type="button" id="button-reset" value="CSSをリセット"/>id=list配下すべての要素のstyleをリセット<br> |
■JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
jQuery(function($) { //id=listの下にあるa要素のCSSを変更 $('#button1').click(function(e) { $('#list a').css('border', 'solid 2px Lime'); }); //class=itemの直下にあるa要素のCSSを変更 $('#button2').click(function(e) { $('.item > a').css('background-color', 'red'); }); //class=itemの次にある兄弟ノードのp要素のCSSを変更 $('#button3').click(function(e) { $('.item + p').css('background-color', 'aqua'); }); //class=itemの次以降にある兄弟ノードのp要素のCSSを変更 $('#button4').click(function(e) { $('.item ~ p').css('background-color', 'green'); }); //id=list配下すべての要素のstyleをリセット $('#button-reset').click(function(e) { $('#list *').removeAttr('style'); }); }) |
タグ :
JavaScript, jQuery
