jQuery基础学习笔记二

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 = ['#foo','#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");//为元素增加名称为select的class

$("#msg").removeClass("select");//移除元素名称为select的class

$("#msg").toggleClass("select");//如果存在(不存在)就删除(添加)名称为select的class

9,完善的事件处理功能

jQuery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery

获取的对象添加事件.

$("#msg").click(function(){alert("good")});//为元素添加了单击事件

$("p").click(function(i){this.style.color=['#foo','#0f0','#00f'][i]});//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件

(1)hover(fn1,fn2);一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.当鼠标移动到一个匹配的元素上面时,

会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.

//当鼠标放在表格的某行上时将class置为over,离开时置为out.

$("tr").hover(function(){$(this).addClass("over");

},

function(){$(this).addClass("out");

});

(2)ready(fn):当dom载入就绪可以查询及操纵时绑定一个要执行的函数.

$(document).ready(function(){alert("Load Success")});

//页面加载完毕提示 "Load Success ",相当于onload事件.与$(fn)等价

(3)toggle(evenFn,oddFn):每次点击时切换要调用的函数.如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一个

元素时,则触发指定的第二个函数.随后的每次点击都重复对这两个函数的轮番调用.

//每次点击时轮换添加和删除名为selected的class.

$("p").toggle(function(){$(this).addClass("selected");},

function(){$(this).removeClass("selected")});

(4)trigger(eventtype):在每一个匹配的元素上触发某类事件

例如:

$("p").trigger("click");//触发所有p元素的click事件

(5)bind(eventtype,fn),unbind(eventtype):事件的绑定与反绑定

从每一个匹配的元素中(添加)删除绑定的事件.

例如:

$("p").bind("click",function(){alert($(this).text());});//为每个p元素添加单击事件

$("p").unbind();//删除所有p元素上的所有事件

$("p").unbind("click")//删除所有p元素上的事件