on()方法
说明:方法在被选元素及子元素上添加一个或多个事件处理程序。
语法:$(selector).on(event,childSelector,data,function)
event:必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值,也可以是数组。必须是有效的事件。
childSelector:可选。规定只能添加到指定的子元素上的事件处理程序,且不是选择器本身。
data:可选。规定传递到函数的额外数据。
function:可选。规定当事件发生时运行的函数。
trigger:方法触发被选元素的指定事件类型。
语法:$(selector).trigger(event,[param1,param2,…])
event:必需。规定指定元素要触发的事件。
[param1,param2,…]:可选。传递到事件处理程序的额外参数。
insertAfter():方法在被选元素后插入 HTML 元素。
如需在被选元素前插入 HTML 元素,请使用 insertBefore() 方法。
语法:$(content).insertAfter(selector)
content:必需。规定要插入的内容(必须包含 HTML 标签)。
selector:必需。规定在何处插入内容。
slideToggle():方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
slideUp()/slideDown():方法以滑动方式隐藏被选元素,向上/向下。
$(selector).slideToggle(时间,速度,执行的函数)
off():方法通常用于移除通过 on() 方法添加的事件处理程序。
语法:$(selector).off(event,selector,function(eventObj),map)
event:必需。规定要从被选元素移除的一个或多个事件或命名空间,由空格分隔多个事件值。
selector:可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function:可选。规定当事件发生时运行的函数。
map:规定事件映射 ({event:function, event:function, …}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
/*
on()
1.1 单个事件
*/
$('div').eq(0).on('click',function(){
$(this).css('color', 'blue');
})
$('div').eq(0).on('click',getName);
function getName()
{
alert("张三");
}
/*
1.2 指定的子元素上的事件处理程序,多个之间用逗号隔开
*/
$('div').eq(1).on('click','span,p',function(){
$(this).css('color', 'blue');
})
/*
1.3 多个事件
*/
$('div').eq(2).on('mouseover mouseout',function(){
$(this).toggleClass('dClass');
})
/*
1.4 事件映射 最后一个不加逗号
*/
$('div').eq(3).on({
click:function(){$(this).css('color', 'red');},
mouseover:function(){$(this).css({'width':"50px",'height':"50px",'border':"1px solid yellow"});},
mouseout:function(){$(this).attr("style","");}
})
/*
1.5 自定义事件
*/
$('div').eq(4).click(function(){
$('input').eq(0).trigger('addInput',{name:"张三"});
})
$('input').eq(0).on('addInput',function(a,b){
$(this).val(b.name);
})
/*
1.6 传递参数
*/
$("div").eq(5).on("click", {a: "张三",b:"李四",c:"小淘气"}, getMessage);
function getMessage(e)
{
console.log(e.data);
console.log(e.data.a);
console.log(e.data.b);
console.log(e.data.c);
}
/*
1.7 向元素后方添加内容
*/
$("div").eq(6).on('click',function()
{
if($(this).attr('index') == 0)
{
// $('<p>后面的内容</p>').insertAfter('.d7');
$(this).append('<p>后面的内容</p>');
$(this).attr('index','1');
}
else
{
$(".d7 p").slideToggle();
}
})
/*
1.8 移除事件
*/
$("div").eq(7).on('click',function(){
$(this).css('color','pink');
})
$("div").eq(7).children().on('click',function(){
$("div").eq(7).off();
})
bind()
说明:方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。
语法:$(selector).bind(event,data,function,map)
event:必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。
data:可选。规定传递到函数的额外数据。
function:必需。规定当事件发生时运行的函数。
map:规定事件映射 ({event:function, event:function, …}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
/*
bind()
1.1 单个事件
*/
$('div').eq(0).bind('click',function(){
$(this).css('color', 'blue');
})
$('div').eq(0).bind('click',getName);
function getName()
{
alert("张三");
}
/*
1.2 多个事件
*/
$('div').eq(0).bind('mouseover mouseout',function(){
$(this).toggleClass('dClass');
})
$('div').eq(1).bind('click mouseout',function(){
$(this).toggleClass('dClass');
})
/*
1.3 事件映射 最后一个不加逗号
*/
$('div').eq(2).bind({
click:function(){$(this).css('color', 'red');},
mouseover:function(){$(this).css({'width':"50px",'height':"50px",'border':"1px solid yellow"});},
mouseout:function(){$(this).attr("style","");}
})
/*
1.4 传递参数
*/
$("div").eq(3).bind("click", {a: "张三",b:"李四",c:"小淘气"}, getMessage);
function getMessage(e)
{
console.log(e.data);
console.log(e.data.a);
console.log(e.data.b);
console.log(e.data.c);
}