<![CDATA[史考特部落格園地 - Ajax]]> http://www.pro-soho.com/Blog/ zh-cn PBlog2 v2.4 史考特部落格園地 http://www.pro-soho.com/Blog/images/logos.gif http://www.pro-soho.com/Blog/ 史考特部落格園地 http://www.pro-soho.com/Blog/default.asp?id=273 <![CDATA[JQuery 筆記]]> scooter.tw@gmail.com(admin) Sat,12 Jan 2008 15:52:10 +0800 http://www.pro-soho.com/Blog/default.asp?id=273 http://docs.jquery.com/Main_Page

程序代碼 程序代碼
<style>  
.red { color:red; }  
.bg_green {background-color:green;}  
.bg_red {background-color:red;}  
.bg_yellow {background-color:yellow;}  
</style>  

<div id="div01">測試 TEST  
<p>第一行 <a href="#" name="a1">a1</a></p>
<p>第二行 <a href="#" id="a2">a2</a></p>
<p>第三行 <a href="#">a3</a></p>  </div>


選擇器(Selectors) (more:http://docs.jquery.com/Attributes)

$("#div01"); /* document.getElementById("div01"); */
$("a[@name]").addClass("bg_green");
尋找有name屬性的 <a />。
$('#div01 > p:first').addClass('red');
尋找<div id='div01'>下的第一個<p />，first, last, 空就是全部的

屬性(Attributes) (more:http://docs.jquery.com/Attributes)

$("#div01").addClass('red'); /* document.getElementById('div01').className='red'; */
$("#div01").css("border", "1px solid black");

其它

在每一行後面加上文字
程序代碼 程序代碼
$("#div01 ").find("p").each(function(i) {
  $(this).html( $(this).html() + " 加註(" + i + ")" );
});


事件(Evnets) (more:http://docs.jquery.com/Events)

當mouse移過第一行時底色會變。
程序代碼 程序代碼
$(document).ready(function() {
$('#div01 > p:first').hover(
  function() {$(this).addClass("bg_green");},
  function() {$(this).removeClass("bg_green");}
);


當mouse移過每一行的<a/>時底色會變。
程序代碼 程序代碼
$("a").hover(
  function() {$(this).parents("p").addClass("bg_red");},
  function() {$(this).parents("p").removeClass("bg_red");
});


參考：http://www.k99k.com/jQuery_getting_started.html ]]>