Jquery選擇器的基礎入門案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link href="js/basicSelect.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="js/jquery-1.3.1.js"></script> </head> <body><br> <input type="button" value="設置p01背景粉色" id="b1"/><br> <input type="button" value=" 設置class為 mini元素背景紅色" id="b2"/><br> <input type="button" value=" 設置元素名為 <p> 元素背景黃色 " id="b3"/><br> <input type="button" value=" 設置所有元素的背景色綠色" id="b4"/><br> <input type="button" value=" 設置所有的<span>元素和id為 p01 的元素背景紫色" id="b5"/><br> <p id="p01" class="mini">p01</p> <p id="p02" class="mini">p02</p> <p id="p03">p03 </p> <span id="sp01" class="mini">sp01</span> <span id="sp02">sp02</span> <br> <p>段落1</p> <p>段落2</p> <p>段落3</p> <script type="text/javascript"> /*$('#b1'):獲取id為b1的控件($('#id選擇器')) *$('#b1').click();將控件id的點擊點擊事件 *function:響應事件的具體實現 */ //id選擇器 id $('#b1').click(function(){ $('#p01').css("background","pink"); }); //類選擇器class $('#b2').click( function (){ $('.mini').css("background"," red"); }); //元素選擇器element $('#b3').click( function(){ $('p').css("background","yellow"); }); //通配選擇器 * $('#b4').click(function(){ $('*').css("background","green"); }); //多重選擇器:篩選條件用,隔開 $('#b5').click(function(){ $('span,#p01').css("background","purple"); }); //元素和事件綁定 $('p').click(function(){ $('p').css('color','red'); //window.alert(this.innerHTML); //這裡的this還隻是dom對象,表示當前點擊的對象 window.alert($(this).html()); //$(this):表示將dom對象包裝成jquery對象,可以使用jquery對象的方法 }); </script> </body> </html>