jQuery的常用操作

一、隱藏顯示對象

?id為test的元素的display修改成了“none”，即隱藏了id為test的元素：

$('#test').css('display','none')

或

$('#test').style.display="none"

?我們經常用到的是切換一個元素的隱藏與現實，下面給出代碼：

var?show?=?$('#test').css('display');//獲取id為test的元素的display的值
$('#test').css('display',show?=='block'?'none':show);//通過三目運算

二、點擊事件 - click() 方法

$("button").click(function(){
});

三、操作元素的樣式

$("#msg").width("300");?//將id為msg的元素的寬度設為300?
$("#msg").height("300");?//將id為msg的元素的高度設為300
$("#msg").css("background");?//返回元素的背景顏色?
$("#msg").css("background","#ccc")?//設定元素背景為灰色?
$("#msg").height(300);?$("#msg").width("200");?//設定寬高?
$("#msg").css({?color:?"red",?background:?"blue"?});//以名值對的形式設定樣式?
$("#msg").addClass("select");?//為元素增加名稱為select的class?
$("#msg").removeClass("select");?//刪除元素名稱為select的class?
$("#msg").toggleClass("select");?//如果存在（不存在）就刪除（添加）名稱為select的class

四、操作元素的VALUE

$("input").val();?//返回表單輸入框的value值?
$("input").val("test");?//將表單輸入框的value值設為test
$("input").val("");?//將表單輸入框的value清空

五、集合處理功能?

對于jquery返回的集合內容無需我們自己循環遍歷并對每個對象分別做處理，jquery已經為我們提供的很方便的方法進行集合的處理。?

包括兩種形式：?

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})?
//為索引分別為0，1，2的p元素分別設定不同的字體顏色。?
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})?
//實現表格的隔行換色效果?
$("p").click(function(){alert($(this).html())})

//為每個p元素增加了click事件，單擊某個p元素則彈出其內容

六、擴展我們需要的功能?

擴展自己想要的功能，如擴展輸入兩個參數，獲取它們的最大值和最小值

$.extend({?
min:?function(a,?b){return?a?<?b?a:b;?},?
max:?function(a,?b){return?a?>?b?a:b;?}?
});?//為jquery擴展了min,max兩個方法?，通過“$.方法名”調用：?
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

七、支持方法的連寫?

所謂連寫，即可以對一個jquery對象連續調用各種不同的方法。?

例如：?

$("#test").click(function(){alert($(this).html())})?
.mouseover(function(){alert('mouse?over?event')})?
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

為元素id為test的添加三個方法，分別是click()、mouseover()、each()