jQuery常用方法

整理一下比較常用到的jQuery API v.1.4

Selector

• 找tag的id, class
  $("a"); //找到a的tag
$("a#myId"); //找到id為myId的a tag
$(".classA"); //找到class為classA的a tag
  
• .eq(index) 取得第index個子節點
  $('ul').children.eq(3).text(); //即可取得第三個子節點
  
• 利用屬性內容找節點
  $("input[name='newsletter']"); //找出name為'newsletter'的input
$("input[name*='news']"); //找name的包含'news'字眼的input
$("input[name^='news']"); //找name的開頭字串包含'news'字眼的input

  
• .lt(index), .gt(index) 取得此index前(後)的所有節點
• 其他如:radio :even ...
  $("input:radio"); //找出input type為radio
$("tr:even"); //找出偶數的tr


Manipulation

• 新增一個tag
  var div = $('< div>Some text< /div>');//= js的createElement（'div'）
  

  *****注意*****
  jQuery('div'); //找div tag，不是新建div tag

• append(), prepend(), appendTo(), prependTo()
  
$(div).append("last"); //將span加到此node的最後
$(div).prepend("first"); //將span加到此node的最前
$(div).appendTo(document.body); //將div加到body最後
$(div).prependTo(document.body); //將div加到body最前
  其他after(), before(), clone()自己看囉
• .css() 如同寫html裡的style
  $("span").css("color","red");
  
• addClass(), removeClass() class的新增、移除
  $("#test").addClass("aaa");
$("#test").removeClass("aaa");
$("#test").removeClass("aaa bbb"); //一次移除多個class,利用whitespace即可


Events

• .click(), .change(). focus(). blur()
  $('p').click(function() {
$(this).css('background-color', 'red'); }); //Set up paragraphs so that when you click them they turn red.
jQuery('p:first').click(); //觸發click事件
• keyup(), .mouseup() 多了鍵值
  ('#target').keyup(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
• hover()
  $("li").hover(
function () {
$(this).append($(" ***"));
},
function () {
$(this).find("span:last").remove();
}
);

Effects

• .show(), .hide(), toggle()
  $('.target').show(); //顯示target
$('.target').hide(); //隱藏target

//動畫效果
$('.target').show("slow"); //顯示target

Traversing

• .children()
  找該node下的children
  $(clubs).children.each(function(){
//所有子節點
});

  
• .siblings() 與此node屬一個parent的其他nodes
  <ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
--
$('li.third-item').siblings().css('background-color', 'red'); //全都會變紅
  
• .first(),.last() 集合中的first(last)節點
  <ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
--
$('li').first().css('background-color', 'red'); //第一個變紅
$('li').last().css('background-color', 'red'); //最一個變紅
  

Ajax

• $.ajax()
  $.ajax({
type: "GET", //指定method
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
  
• 讀html, xml, txt
  //讀html
$("#htmDoc").load("test.html");

//讀XML
$.get("test.xml",function(xml){
var text = $("title",xml).text();
$("#xmlDoc").html(text);
});

//讀txt
$.get("test.txt",function(txt){
alert(txt);
});