jQuery基礎用法

jQuery 最基本的中心思想就是以「選取 DOM 元素為開始」，接著就是對它們作一些事。

選擇元素

只要記得在CSS學過的選擇器，jQuery就超級簡單哦 ^_^

$(selectors);

例如：

$("#menu");
$("ul li");

jQuery事件

• $(document).ready()

有些時候，我們必須在網頁下載完成之後立即執行一些程式，可能是想要馬上顯示一些歡迎訊息等等。

$(document).ready(function() {  
    alert('您好，歡迎光臨');  
});

• click() 滑鼠點擊物件時

 $("button").click(function() {  
    alert('您好');  
});

• dblclick() 滑鼠連點二下物件時

• mouseenter() 滑鼠進入時

• mouseleave() 滑鼠移開時

• mousedown() 按下滑鼠時

• mouseup() 按下滑鼠並放開時

• hover()

• focus()

• change() 元素內容改變時，e.g.input中輸入了文字。

常用jQuery方法

• show() / hide()

將指定元素顯示/消失。

$("#A").show();
$("#B").hide();

• css()

加入或改變 css style的內容。

 $("#Demo").css("color", "red");

若要改變多項css style則必須使用以下的方法。

$("#Demo").css({
    "color":"block",
    "text-align":"center"
});

• addClass() / removeClass()

將指定元素的Html加入/移除class。

 $("div").addClass("important");

• append()

在指定元素之後插入元素

  $("p").append("Some appended text.");
  $("p").append("<a href="#">hello</a>");

• attr()

此方法乃是 jQuery 對於 Html Tag 屬性的操作。

例如有個Html為：

  <a href="/test" title="測試">測試</a>

則可以使用jQuery拿到與更改其屬性值。

  $("a").attr("href");   //拿到"/test"
  $("a").attr("href","/admin") //更改此元素的href為"/admin"

• 遍歷

函數	說明
parent()	得到指定元素的上一層父元素
children()	得到指定元素的下一層子元素
next()	得到指定元素的同層級的下一元素
first()	得到的所有元素中的第一個元素
last()	得到的所有元素中的最後一個元素
eq(n)	得到的所有元素中的第n個元素
find()	得到指定元素的所有子元素

• .each()

  元素的遍歷

  <ul>
      <li>Coffee</li>
      <li>Milk</li>
      <li>Soda</li>
  </ul>

  $(document).ready(function(){
      $("li").each(function(){
        console.log($(this).text())
      });
  });

  陣列、Object資料的遍歷

   var arr1 = [ "aaa", "bbb", "ccc" ];      
    $.each(arr1, function(i,val){      
        console.log(i);   
        console.log(val);
    });   

• val()

用來取得或改變元素的值。

 $("input").val()  //取得input的值
 $("input").val("hello")  //改變input的值

• text()

用來取得或改變元素的文字。

  $("span").text()  //取得span的值
  $("span").text("hello")  //改變span的值

使用 $(this) 簡化程式碼複雜度

$(this) 是把當前指定的元素轉換為jQuery對象。

例如：

  $("input").click(function () {
    var text = $(this).val();
  })

e.x. 練習