1、click 鼠标点击事件,append添加事件,hover鼠标移入移出事件
单击鼠标时,会添加一个“<li>4</li>“
鼠标移入字体大小为24px,移出时字体大小为14px;
hover(fu(){},fu(){});
$("#Button1").click(function () {
$("ul").append("<li>4</li>")
$("ul li").hover(function () {
$(this).css("font-size", 24)
}, function () {
$(this).css("font-size", 14)
});
});
2、添加事件 live(type, [data], fn)
jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。
这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。
可以给这个元素绑定一个简单的click事件:
$("ul li").live("click", function () {
alert($(this).text());
});
3、hover([over,]out)
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
$("ul li").hover(function () {
$(this).css("font-size", 24)
}, function () {
$(this).css("font-size", 14)
});
4、toggle([speed],[easing],[fn])
fn,fn2,[fn3,fn4,...]
fn:第一数次点击时要执行的函数。
fn2:第二数次点击时要执行的函数。
fn3,fn4,...:更多次点击时要执行的函数。
[speed] [,fn]
speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"
fn:在动画完成时执行的函数,每个元素执行一次。
[speed], [easing ], [fn ]
speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:在动画完成时执行的函数,每个元素执行一次。
$("#Button1").click(function () {
$("ul").toggle(1000, function () {
alert($(this).css("display"))
})
});
$("#Button1").toggle(function () { alert(1) },
function () { alert(2) },
function () { alert(3) });
5、one(type,[data],fn)
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
$("#Button1").one("mouseover", function () {
alert($("ul").text());
});
6、bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数。
$("#Button1").bind("click mouseover", function () {
alert($("ul").text());
});
7、on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。要附加一个事件,只运行一次,然后删除自己, 请参阅.one()
$("#Button1").on("click mouseover", function () {
alert($("ul").text());
});
鼠标移入第一个li时触发事件
$("ul").on("mouseover", "li:first", function () {
alert($("ul").text());
});