.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” });// 以 名 值 对 的 形 式 设 定 样 式
www.52mvc.com
$(
“#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=['#f00','#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”)})