javascript代码实例教程-jQuery事件大全(4)

发布时间:2019-02-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery事件大全(4)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 jQuery事件大全 

 

attribute: 

[htML

$(" p" ).addclass(css中定义的样式类型)   给某个元素添加样式   

$(" img" ).attr({src:" test.jpg"   alt:" test image" })   给某个元素添加属性/值 参数是map   

$(" img" ).attr(" src"   " test.jpg" )   给某个元素添加属性/值   

$(" img" ).attr(" tITle"    function() { return this.src })   给某个元素添加属性/值   

$(" 元素名称" ).html()   获得该元素内的内容(元素 文本等)   

$(" 元素名称" ).html(" < b> new stuff< /b> " )   给某元素设置内容   

$(" 元素名称" ).removeattr(" 属性名称" ) 给某元素删除指定的属性以及该属性的值   

$(" 元素名称" ).removeclass(" class" ) 给某元素删除指定的样式   

$(" 元素名称" ).text()   获得该元素的文本   

$(" 元素名称" ).text(value)   设置该元素的文本值为value   

$(" 元素名称" ).toggleclass(class) 当元素存在参数中的样式的时候取消 如果不存在就设置此样式   

$(" input元素名称" ).val()   获取input元素的值   

$(" input元素名称" ).val(value)   设置input元素的值为value   

 

 

manipulation: 

[html] 

$(" 元素名称" ).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:  

[html] 

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] 

$(html).appendto(" body" ) 相当于在body中写了一段html代码   

$(elems) 获得dom上的某个元素   

$(function(){……..})   执行一个函数   

$(" p >   p" ).css(" border"    " 1px solid gray" )   查找所有p的子节点p 添加样式   

$(" input:radio"    document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮   

$.extend(prop) prop是一个jquery对象    

举例:    

jquery.extend({   

min: function(a   b) { return a <   b ? a : b   }    

max: function(a   b) { return a >   b ? a : b   }   

})    

jquery( expression   [context] ) ---$( expression   [context])   在默认情况下 $()查询的是当前html文档中的dom元素。  

 

 

each( callback ) 以每一个匹配的元素作为上下文来执行一个函数 

[html]  

举例:1   

$(" span" ).click(function){   

$(" li" ).each(function(){   

$(this).toggleclass(" example" )    

})    

})    

举例:2    

$(" button" ).click(function () {   

$(" p" ).each(function (index   domele) {   

// domele == this   

$(domele).css(" backgroundcolor"    " yellow" )    

if ($(this).is(" #stop" )) {   

$(" span" ).text(" stopped at p index #"   + index)    

return false    

}   

})    

})    

 

 

jquery event:

ready(fn)   $(document).ready()注意在body中没有onload事件 否则该函数不能执行。在每个页面中可以 

有很多个函数被加载执行 按照fn的顺序来执行。 

bind( type   [data]   fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件属性有:blur   focus   load   resize   scroll   unload   click   dblclick   mousedown   mouseup   mouSEMove 

mouseover   mouseout   mouseenter   mouseleave   change   select   submit   keydown   keypress 

keyup   error 

one( type   [data]   fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对 

象上 这个事件处理函数只会被执行一次。其他规则与bind()函数相同。

[html]  

trigger( type   [data] ) 在每一个匹配的元素上触发某类事件。   

triggerhandler( type   [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型) 同时取消浏览器对此事件的默认行动   

unbind( [type]   [data] ) 反绑定 从每一个匹配的元素中删除绑定的事件。   

$(" p" ).unbind() 移除所有段落上的所有绑定的事件   

$(" p" ).unbind( " click"   ) 移除所有段落上的click事件   

hover( over   out ) over out都是方法   当鼠标移动到一个匹配的元素上面时 会触发指定的第一个函数。当鼠标移出这个元素时 会触发指定的第二个函数。   

$(" p" ).hover(function(){   

$(this).addclass(" over" )    

}    

function(){   

$(this).addclass(" out" )    

}   

)    

  

toggle( fn   fn ) 如果点击了一个匹配的元素 则触发指定的第一个函数 当再次点击同一元素时 则触发指定的第二个函数。   

$(" p" ).toggle(function(){   

$(this).addclass(" selected" )    

}    

function(){   

$(this).removeclass(" selected" )    

}   

)    

 

 

 

元素事件列表说明  

注:不带参数的函数 其参数为可选的 fn。jquery不支持form元素的reset事件。 

事件 描述 支持元素或对象 

[html]  

blur( ) 元素失去焦点 a   input   textarea   button   select   label   map   area   

change( ) 用户改变域的内容 input   textarea   select   

click( ) 鼠标点击某个对象 几乎所有元素   

dblclick( ) 鼠标双击某个对象 几乎所有元素   

error( ) 当加载文档或图像时发生某个错误 window   img   

focus( ) 元素获得焦点 a   input   textarea   button   select   label   map   area   

keydown( ) 某个键盘的键被按下 几乎所有元素   

keypress( ) 某个键盘的键被按下或按住 几乎所有元素   

keyup( ) 某个键盘的键被松开 几乎所有元素   

load( fn ) 某个页面或图像被完成加载 window   img   

mousedown( fn ) 某个鼠标按键被按下 几乎所有元素   

mousemove( fn ) 鼠标被移动 几乎所有元素   

mouseout( fn ) 鼠标从某元素移开 几乎所有元素   

mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素   

mouseup( fn ) 某个鼠标按键被松开 几乎所有元素   

resize( fn ) 窗口或框架被调整尺寸 window   iframe   frame   

scroll( fn ) 滚动文档的可视部分时 window   

select( ) 文本被选定 document   input   textarea   

submit( ) 提交按钮被点击 form   

unload( fn ) 用户退出页面 window  

 

 

 jquery ajax 方法说明:

[html]  

load( url   [data]   [callback] ) 装入一个远程html内容到一个dom结点。   

$(" #feeds" ).load(" feeds.html" )   将feeds.html文件载入到id为feeds的p中   

$(" #feeds" ).load(" feeds.php"    {limit: 25}   function(){   

alert(" the last 25 entries in the feed have been loaded" )    

})    

  

jquery.get( url   [data]   [callback] ) 使用get请求一个页面。   

$.get(" test.cgi"    { name: " john"    time: " 2pm"   }   function(data){   

alert(" data loaded: "   + data)    

})    

  

jquery.getjson( url   [data]   [callback] ) 使用get请求json数据。   

$.getjson(" test.js"    { name: " john"    time: " 2pm"   }   function(json){   

alert(" JSON data: "   + json.users[3].name)    

})    

  

jquery.getscript( url   [callback] ) 使用get请求javascript文件并执行。   

$.getscript(" test.js"    function(){   

alert(" script loaded and   uted." )    

})    

jquery.post( url   [data]   [callback]   [type] ) 使用post请求一个页面。  

  

ajaxcomplete( callback ) 当一个ajax请求结束后 执行一个函数。这是一个ajax事件   

$(" #msg" ).ajaxcomplete(function(request   settings){   

$(this).append(" < li> request complete.< /li> " )    

})    

ajaxerror( callback ) 当一个ajax请求失败后 执行一个函数。这是一个ajax事件   

$(" #msg" ).ajaxerror(function(request   settings){   

$(this).append(" < li> error requesting page "   + settings.url + " < /li> " )    

})    

  

ajaxsend( callback ) 在一个ajax请求发送时 执行一个函数。这是一个ajax事件   

$(" #msg" ).ajaxse  

  

...   

 

[html]  

方法 描述   

bind() 向匹配元素附加一个或更多事件处理器   

blur() 触发、或将函数绑定到指定元素的 blur 事件   

change() 触发、或将函数绑定到指定元素的 change 事件   

click() 触发、或将函数绑定到指定元素的 click 事件   

dblclick() 触发、或将函数绑定到指定元素的 double click 事件   

delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器   

die() 移除所有通过 live() 函数添加的事件处理程序。   

error() 触发、或将函数绑定到指定元素的 error 事件   

event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。   

event.pageX 相对于文档左边缘的鼠标位置。   

event.pageY 相对于文档上边缘的鼠标位置。   

event.preventDefault() 阻止事件的默认动作。   

event.result 包含由被指定事件触发的事件处理器返回的最后一个值。   

event.target 触发该事件的 DOM 元素。   

event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。   

event.type 描述事件的类型。   

event.which 指示按了哪个键或按钮。   

focus() 触发、或将函数绑定到指定元素的 focus 事件   

keydown() 触发、或将函数绑定到指定元素的 key down 事件   

keypress() 触发、或将函数绑定到指定元素的 key press 事件   

keyup() 触发、或将函数绑定到指定元素的 key up 事件   

live() 为当前或未来的匹配元素添加一个或多个事件处理器   

load() 触发、或将函数绑定到指定元素的 load 事件   

mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件   

mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件   

mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件   

mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件   

mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件   

mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件   

mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件   

one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。   

ready() 文档就绪事件(当 HTML 文档就绪可用时)   

resize() 触发、或将函数绑定到指定元素的 resize 事件   

scroll() 触发、或将函数绑定到指定元素的 scroll 事件   

select() 触发、或将函数绑定到指定元素的 select 事件   

submit() 触发、或将函数绑定到指定元素的 submit 事件   

toggle() 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。   

trigger() 所有匹配元素的指定事件   

triggerHandler() 第一个被匹配元素的指定事件   

unbind() 从匹配元素移除一个被添加的事件处理器   

undelegate() 从匹配元素移除一个被添加的事件处理器,现在或将来   

unload() 触发、或将函数绑定到指定元素的 unload 事件   

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery事件大全(4)全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery事件大全(4)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。