2010-01-08 01:09

jQuery技巧大放送 第二篇

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//
为索引分别为012p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//
实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})   
//
为每个p元素增加了click事件,单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.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));

7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

8、操作元素的样式
主要包括以下几种方式:
$("#msg").css("background");    //
返回元素的背景颜色
$("#msg").css("background","#ccc") //
设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //
设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg
").addClass("select"); //
为元素增加名称为selectclass
$("#msg").removeClass("select"); //
删除元素名称为selectclass
$("#msg").toggleClass("select"); //
如果存在(不存在)就删除(添加)名称为selectclass

你可能还喜欢...

添加新评论