jQuery技术

jquery学习总结(超级详细)(3)

字号+ 作者:H5之家 来源:H5之家 2016-08-10 17:01 我要评论( )

event.pageX 事件发生时,鼠标距离网页左上角的水平距离 event.pageY 事件发生时,鼠标距离网页左上角的垂直距离 event.type 事件的类型(比如click) event.which 按下了哪一个键 event.data在事件对象上绑定数据

 event.pageX 事件发生时,鼠标距离网页左上角的水平距离   
event.pageY 事件发生时,鼠标距离网页左上角的垂直距离
event.type 事件的类型(比如click)   
event.which 按下了哪一个键   
event.data在事件对象上绑定数据,然后传入事件处理函数   
event.target 事件针对的网页元素
event.preventDefault() 阻止事件的默认行为(比如点击链接,会自动打开新页面)
event.stopPropagation() 停止事件向上层元素冒泡

  在事件处理函数中,可以用this关键字,返回事件针对的DOM元素:

$('a').click(function(){ if ($(this).attr('href').match('evil')){//如果确认为有害链接 e.preventDefault(); //阻止打开 $(this).addClass('evil'); //加上表示有害的class } });

  有两种方法,可以自动触发一个事件。一种是直接使用事件函数,另一种是使用.trigger()或.triggerHandler()。

$('a').click(); $('a').trigger('click');

九、特殊效果

  jQuery允许对象呈现某些特殊效果。

$('h1').show(); //展现一个h1标题
常用的特殊效果如下:

.fadeIn() 淡入
.fadeOut() 淡出
.fadeTo() 调整透明度
.hide() 隐藏元素
.show() 显示元素
.slideDown() 向下展开
.slideUp() 向上卷起
.slideToggle() 依次展开或卷起某个元素
.toggle() 依次展示或隐藏某个元素

除了.show()和.hide(),所有其他特效的默认执行时间都是400ms(毫秒),但是你可以改变这个设置。

* $('h1').fadeIn(300); // 300毫秒内淡入 
* $('h1').fadeOut('slow'); //缓慢地淡出
  在特效结束后,可以指定执行某个函数。

$('p').fadeOut(300, function(){$(this).remove(); });

 更复杂的特效,可以用.animate()自定义。

$('div').animate( { left : "+=50",//不断右移 opacity : 0.25 //指定透明度 }, 300,// 持续时间 function(){ alert('done!'); }//回调函数 );


  .stop()和.delay()用来停止或延缓特效的执行。
  $.fx.off如果设置为true,则关闭所有网页特效。

几个常见的筛选选择器:

filter():筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
描述:保留子元素中不含有ol的元素。

HTML 代码:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代码:

$("p").filter(function(index) { return $("ol", this).length == 0; });

结果:

<p>How are you?</p>

silce():选取一个匹配的子集

描述:选择第一个p元素

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").slice(0, 1).wrapInner("<b></b>");

结果:

<p><b>Hello</b></p>

后续更新……


如何使用JQuery CDN?推荐使用官方的CDN节点,使用代码如下:

<script src="//code.jquery.com/jquery-1.11.0.min.js"> </script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jquery 添加新元素append(),appendTo()等用法详解 Linzl技术汇

    jquery 添加新元素append(),appendTo()等用法详解 Linzl技术汇

    2016-08-12 15:03

  • jQuery Mobile 和 JSON

    jQuery Mobile 和 JSON

    2016-08-07 17:01

  • jQuery操作checkbox选择(list/table)

    jQuery操作checkbox选择(list/table)

    2016-08-07 16:00

  • jquery源码学习笔记(一)jQuery的无new构建,jquery学习笔记

    jquery源码学习笔记(一)jQuery的无new构建,jquery学习笔记

    2016-08-07 10:00

网友点评
Q