热门搜索:

您的位置: 首页 -> 编程开发 -> jQuery事件大全

jQuery事件大全
发表于:2013-09-05 14:47:55 阅读次数:0
Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),如今,jQuery已经成为最流行的javascript框架,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。今天软件盒子整理出jQuery事件大全,希望对网站开发人员有所帮助。

一、attribute事件

$("p").addclass(css中定义的样式类型)给某个元素添加样式
$("img").attr({src:"test.jpg"alt:"testimage"})给某个元素添加属性/值参数是map
$("img").attr("src""test.jpg")给某个元素添加属性/值
$("img").attr("title"function(){returnthis.src})给某个元素添加属性/值
$("元素名称").html()获得该元素内的内容(元素文本等)
$("元素名称").html("newstuff")给某元素设置内容
$("元素名称").removeattr("属性名称")给某元素删除指定的属性以及该属性的值
$("元素名称").removeclass("class")给某元素删除指定的样式
$("元素名称").text()获得该元素的文本
$("元素名称").text(value)设置该元素的文本值为value
$("元素名称").toggleclass(class)当元素存在参数中的样式的时候取消如果不存在就设置此样式
$("input元素名称").val()获取input元素的值
$("input元素名称").val(value)设置input元素的值为value

二、manipulation事件 

$("元素名称").after(content)在匹配元素后面添加内容
$("元素名称").append(content)将content作为元素的内容插入到该元素的后面
$("元素名称").appendto(content)在content后接元素
$("元素名称").before(content)与after方法相反
$("元素名称").clone(布尔表达式)当布尔表达式为真时克隆元素(无参时当作true处理)
$("元素名称").empty()将该元素的内容设置为空
$("元素名称").insertafter(content)将该元素插入到content之后
$("元素名称").insertbefore(content)将该元素插入到content之前
$("元素").prepend(content)将content作为该元素的一部分放到该元素的最前面
$("元素").prependto(content)将该元素作为content的一部分放content的最前面
$("元素").remove()删除所有的指定元素
$("元素").remove("exp")删除所有含有exp的元素
$("元素").wrap("html")用html来包围该元素
$("元素").wrap(element)用element来包围该元素

三、traversing事件

add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)

三、core事件

$(html).appendto("body")相当于在body中写了一段html代码
$(elems)获得dom上的某个元素
$(function(){……..})执行一个函数
$("div>p").css("border""1pxsolidgray")查找所有div的子节点p添加样式
$("input:radio"document.forms[0])在当前页面的第一个表单中查找所有的单选按钮
$.extend(prop)prop是一个jquery对象
举例:
jquery.extend({
min:function(ab){returna max:function(ab){returna>b?a:b}
})
jquery(expression[context])---$(expression[context])在默认情况下$()查询的是当前html文档中的dom元素。
each(callback)以每一个匹配的元素作为上下文来执行一个函数

举例:1
$("span").click(function){
$("li").each(function(){
$(this).toggleclass("example")
})
})
举例:2
$("button").click(function(){
$("div").each(function(indexdomele){
//domele==this
$(domele).css("backgroundcolor""yellow")
if($(this).is("#stop")){
$("span").text("stoppedatdivindex#"+index)
returnfalse
}
})
})

四、jqueryevent事件

ready(fn)$(document).ready()注意在body中没有onload事件否则该函数不能执行。在每个页面中可以
有很多个函数被加载执行按照fn的顺序来执行。
bind(type[data]fn)为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件属性有:blurfocusloadresizescrollunloadclickdblclickmousedownmouseupmousemove
mouseovermouseoutmouseentermouseleavechangeselectsubmitkeydownkeypress
keyuperror
one(type[data]fn)为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对
象上这个事件处理函数只会被执行一次。其他规则与bind()函数相同。

trigger(type[data])在每一个匹配的元素上触发某类事件。
triggerhandler(type[data])这一特定方法会触发一个元素上特定的事件(指定一个事件类型)同时取消浏览器对此事件的默认行动
unbind([type][data])反绑定从每一个匹配的元素中删除绑定的事件。
$("p").unbind()移除所有段落上的所有绑定的事件
$("p").unbind("click")移除所有段落上的click事件
hover(overout)overout都是方法当鼠标移动到一个匹配的元素上面时会触发指定的第一个函数。当鼠标移出这个元素时会触发指定的第二个函数。
$("p").hover(function(){
$(this).addclass("over")
}
function(){
$(this).addclass("out")
}
)
toggle(fnfn)如果点击了一个匹配的元素则触发指定的第一个函数当再次点击同一元素时则触发指定的第二个函数。
$("p").toggle(function(){
$(this).addclass("selected")
}
function(){
$(this).removeclass("selected")
}
)
元素事件列表说明
注:不带参数的函数其参数为可选的fn。jquery不支持form元素的reset事件。
事件描述支持元素或对象

blur()元素失去焦点ainputtextareabuttonselectlabelmaparea
change()用户改变域的内容inputtextareaselect
click()鼠标点击某个对象几乎所有元素
dblclick()鼠标双击某个对象几乎所有元素
error()当加载文档或图像时发生某个错误windowimg
focus()元素获得焦点ainputtextareabuttonselectlabelmaparea
keydown()某个键盘的键被按下几乎所有元素
keypress()某个键盘的键被按下或按住几乎所有元素
keyup()某个键盘的键被松开几乎所有元素
load(fn)某个页面或图像被完成加载windowimg
mousedown(fn)某个鼠标按键被按下几乎所有元素
mousemove(fn)鼠标被移动几乎所有元素
mouseout(fn)鼠标从某元素移开几乎所有元素
mouseover(fn)鼠标被移到某元素之上几乎所有元素
mouseup(fn)某个鼠标按键被松开几乎所有元素
resize(fn)窗口或框架被调整尺寸windowiframeframe
scroll(fn)滚动文档的可视部分时window
select()文本被选定documentinputtextarea
submit()提交按钮被点击form
unload(fn)用户退出页面window

jqueryajax方法说明:

load(url[data][callback])装入一个远程html内容到一个dom结点。
$("#feeds").load("feeds.html")将feeds.html文件载入到id为feeds的div中
$("#feeds").load("feeds.php"{limit:25}function(){
alert("thelast25entriesinthefeedhavebeenloaded")
})
jquery.get(url[data][callback])使用get请求一个页面。
$.get("test.cgi"{name:"john"time:"2pm"}function(data){
alert("dataloaded:"+data)
})
jquery.getjson(url[data][callback])使用get请求json数据。
$.getjson("test.js"{name:"john"time:"2pm"}function(json){
alert("jsondata:"+json.users[3].name)
})
jquery.getscript(url[callback])使用get请求javascript文件并执行。
$.getscript("test.js"function(){
alert("scriptloadedanduted.")
})
jquery.post(url[data][callback][type])使用post请求一个页面。
ajaxcomplete(callback)当一个ajax请求结束后执行一个函数。这是一个ajax事件
$("#msg").ajaxcomplete(function(requestsettings){
$(this).append("
  • requestcomplete.
  • ")
    })
    ajaxerror(callback)当一个ajax请求失败后执行一个函数。这是一个ajax事件
    $("#msg").ajaxerror(function(requestsettings){
    $(this).append("
  • errorrequestingpage"+settings.url+"
  • ")
    })

    ajaxsend(callback)在一个ajax请求发送时执行一个函数。这是一个ajax事件
    $("#msg").ajaxse