jquery鼠标事件有哪些 常用的jquery鼠标事件
各位老铁们,大家好,今天由我来为大家分享jquery鼠标事件有哪些,以及常用的jquery鼠标事件的相关问题知识,希望对大家有所帮助。如果可以帮助到大家,还望关注收藏下本站,您的支持是我们最大的动力,谢谢大家了哈,下面我们开始吧!
jquery中有哪些基础事件方法
jquery基础事件,包括绑定事件、简写事件、复合事件;
一.绑定事件
jQuery通过.bind()方法来为元素绑定这些事件。
形式:
bind(type, [data], fn)
参数:
type表示一个或多个类型的事件名字符串;
[data]是可选的,作为 event.data属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;
fn表示绑定到指定元素的处理函数。
二、简写事件
为了使开发者更加方便的绑定事件,jQuery封装了常用的事件以便节约更多的代码。称之为简写事件。简写事件,绑定方法如下图,
三、复合事件
jQuery提供了许多最常用的事件效果,组合一些功能实现了一些复合事件,比如切换功能、智能加载等。
扩展资料
1、绑定事件fn函数
1)使用点击事件
$('input').bind('click', function(){//点击按钮后执行匿名函数
alert('点击!');
});
2)普通处理函数
$('input').bind('click', fn);//执行普通函数式无须圆括号
function fn(){
alert('点击!');
}
2、简写事件函数
1).mouseover()和.mouseout()表示鼠标移入和移出的时候触发。而.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。
2).keydown()、.keyup()返回的是键码,而.keypress()返回的是字符编码。
3).focus()和.blur()分别表示光标激活和丢失,事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失,但事件触发时机可以是子元素。
3、复合事件示例,背景移入移出切换效果
$('div').hover(function(){
$(this).css('background','black');//mouseenter效果
}, function(){
$(this).css('background','red');//mouseleave效果,可省略
});
参考资料
jQuery官方网站-事件
jquery中有哪些事件处理程序
bind()向元素添加事件处理程序
blur()添加/触发 blur事件
change()添加/触发 change事件
click()添加/触发 click事件
dblclick()添加/触发 double click事件
delegate()向匹配元素的当前或未来的子元素添加处理程序
die()在版本 1.9中被移除。移除所有通过 live()方法添加的事件处理程序
error()在版本 1.8中被废弃。添加/触发 error事件
event.currentTarget在事件冒泡阶段内的当前 DOM元素
event.data包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget返回当前调用的 jQuery事件处理程序所添加的元素
event.isDefaultPrevented()返回指定的 event对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()返回指定的 event对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()返回指定的 event对象上是否调用了 event.stopPropagation()
event.namespace返回当事件被触发时指定的命名空间
event.pageX返回相对于文档左边缘的鼠标位置
event.pageY返回相对于文档上边缘的鼠标位置
event.preventDefault()阻止事件的默认行为
event.relatedTarget返回当鼠标移动时哪个元素进入或退出
event.result包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()阻止其他事件处理程序被调用
event.stopPropagation()阻止事件向上冒泡到 DOM树,阻止任何父处理程序被事件通知
event.target返回哪个 DOM元素触发事件
event.timeStamp返回从 1970年 1月 1日到事件被触发时的毫秒数
event.type返回哪种事件类型被触发
event.which返回指定事件上哪个键盘键或鼠标按钮被按下
event.metaKey事件触发时 META键是否被按下
focus()添加/触发 focus事件
focusin()添加事件处理程序到 focusin事件
focusout()添加事件处理程序到 focusout事件
hover()添加两个事件处理程序到 hover事件
keydown()添加/触发 keydown事件
keypress()添加/触发 keypress事件
keyup()添加/触发 keyup事件
live()在版本 1.9中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load()在版本 1.8中被废弃。添加一个事件处理程序到 load事件
mousedown()添加/触发 mousedown事件
mouseenter()添加/触发 mouseenter事件
mouseleave()添加/触发 mouseleave事件
mousemove()添加/触发 mousemove事件
mouseout()添加/触发 mouseout事件
mouseover()添加/触发 mouseover事件
mouseup()添加/触发 mouseup事件
off()移除通过 on()方法添加的事件处理程序
on()向元素添加事件处理程序
one()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy()接受一个已有的函数,并返回一个带特定上下文的新的函数
ready()规定当 DOM完全加载时要执行的函数
resize()添加/触发 resize事件
scroll()添加/触发 scroll事件
select()添加/触发 select事件
submit()添加/触发 submit事件
toggle()在版本 1.9中被移除。添加 click事件之间要切换的两个或多个函数
trigger()触发绑定到被选元素的所有事件
triggerHandler()触发绑定到被选元素的指定事件上的所有函数
unbind()从被选元素上移除添加的事件处理程序
undelegate()从现在或未来的被选元素上移除事件处理程序
unload()在版本 1.8中被废弃。添加事件处理程序到 unload事件
contextmenu()添加事件处理程序到 contextmenu事件
$.holdReady()用于暂停或恢复.ready()事件的执行
jquery文档操作都有哪些函数
jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法。个人认为在在线排盘开发中会比较常用的,仅供大家学习和参考。
事件处理
ready(fn)
代码:
$(document).ready(function(){
// Your code here...
});
作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
bind(type,[data],fn)
代码:
$("p").bind("click", function(){
alert($(this).text());
});
作用:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。起到事件监听的作用。
toggle(fn,fn)代码:
$("td").toggle(
function(){
$(this).addClass("selected");
},
function(){
$(this).removeClass("selected");
}
);
作用:每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。挺有趣的一个函数,在动态实现某些功能的时候可能会用到。
(像click(),focus(),keydown()这样的事件这里就不提了,那些都是开发中比较常用到的。)
外观效果
addClass(class)和removeClass(class)
代码:
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
});
也可以写成:
$(".stripe tr").mouseover(function(){$(this).addClass("over")});
$(".stripe tr").mouseout(function(){$(this).removeClass("over")});
作用:为指定的元素添加或移除样式,从而实现动态的样式效果,上面的实例中实现鼠标移动双色表格的代码。
css(name,value)
代码:$("p").css("color","red");
作用:很简单,就是在匹配的元素中,设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。
slide(),hide(),fadeIn(), fadeout(), slideUp(),slideDown()
代码:
$("#btnShow").bind("click",function(event){$("#divMsg").show()});
$("#btnHide").bind("click",function(evnet){$("#divMsg").hide()});
作用:jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数:show(speed,[callback])以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
animate(params[,duration[,easing[,callback]]])
作用:制作动画效果用到的函数,功能非常的强大,可以连续使用此函数。
查找筛选
map(callback)HTML代码:
Values:
return$(this).val();
}).get().join(","));
结果:
[
John, password, ; ]
作用:将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。
find(expr)
HTML代码:
Hello, how are you?
jQuery代码:
$("p").find("span")
结果:
[ Hello ]
作用:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
文档处理
attr(key,value)HTML代码:
jQuery代码:
$("img").attr("src","test.jpg");
作用:取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined。在控制HTML标记上是必备的工具。
html()/html(val)HTML代码:
Hello
jQuery代码:
$("div").html();
结果:
Hello
作用:取得或设置匹配元素的html内容,同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。,后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。
wrap(html)HTML代码:
Test Paragraph.
jQuery代码:
$("p").wrap("
");
结果:
Test Paragraph.
作用:把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。可以灵活的修改我们的DOM。
empty()HTML代码:
Hello, Person
jQuery代码:
$("p").empty();
结果:
作用:删除匹配的元素集合中所有的子节点。
Ajax处理
load(url,[data],[callback])
url(String):待装入 HTML网页网址。
data(Map):(可选)发送至服务器的 key/value数据。
callback(Callback):(可选)载入成功时回调函数。
代码:
$("#feeds").load("feeds.aspx",{limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
作用:载入远程 HTML文件代码并插入至 DOM中。这也是Jquery操作Ajax最常用最有效的方法。
serialize()HTML代码:
Results:
check1
checked="checked"/> check2
checked="checked"/> radio1
radio2
jQuery代码:
$("#results").append(""+$("form").serialize()+"");
作用:序列化表格内容为字符串。用于 Ajax请求。
工具
jQuery.each(obj,callback)
代码:
$.each( [0,1,2], function(i, n){
alert("Item#"+ i+":"+ n);
});//遍历数组
$.each({ name:"John", lang:"JS"}, function(i, n){
alert("Name:"+ i+", Value:"+ n);//遍历对象
});
作用:通用例遍方法,可用于例遍对象和数组。
jQuery.makeArray(obj)
HTML代码:
First
Second
Third
Fourth
jQuery代码:
var arr= jQuery.makeArray(document.getElementsByTagName("div"));
结果:
Fourth
Third
Second
First
作用:将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。
jQuery.trim(str)
作用:这个大家应该很熟悉,就是去掉字符串起始和结尾的空格。
小结:在实际的开发中我们可能会发现21世纪开运网用到其他的方法和属性,以上只是个人认为新手初学jQuery时,必须掌握的一些方法。仅供大家学习的参考。
以上内容就是我们为大家提供的jQuery中常用的函数方法,希望可以帮助到大家。
关于本次jquery鼠标事件有哪些和常用的jquery鼠标事件的问题分享到这里就结束了,如果解决了您的问题,我们非常高兴。