jquery常用函数与方法汇总


Posted in Javascript onSeptember 01, 2015

1.delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目。

jQuery 1.4新增。用于将队列中的函数延时执行。他既可以推迟动画队列的执行,也可以用于自定义队列。

duration:延时时间,单位:毫秒

queueName:队列名词,默认是Fx,动画队列。

例:

头部与底部延迟加载动画效果

$(document).ready(function() {
  $('#header') .css({ 'top':-50 }) .delay(1000).animate({'top': 0}, 800);
  $('#footer') .css({ 'bottom':-15 }) .delay(1000).animate({'bottom': 0}, 800); 
});

2.jQuery live( type, fn ) 委派事件实现

Query 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。

还不支持 blur, focus, mouseenter, mouseleave, change, submit

与bind()不同的是,live()一次只能绑定一个事件。

这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。

.live()与流行的liveQuery插件很像,但有以下几个主要区别:

.live 目前只支持所有事件的子集,支持列表参考上面的说明。

.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。

.live 没有”setup”和”cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。

要移除用live绑定的事件,请用die方法

用法示例:

<div class=”myDiv”></div>

jquery:

$(“.myDiv”).live(“click”, function(){
alert(“clicked!”);
});

如果使用javascript动态创建一个class为mydiv的元素,点击元素依然会有弹出。为什么使用live后就有了呢?这是因为jquery利用了事件的冒泡机制,直接把事件绑定在了document上,然后通过event.target找出事件的来源。这跟jquery.livequery插件不一样,jquery.livequery每20毫秒做一次检查,如有新生成则重新绑定一次事件。

使用live当然有利也有弊:

好处就是:元素更新时不用反复去定义事件。

坏处就是:把事件绑定在document上会在页面上每一个元素都呼叫一次,如使用不当会严重影响性能。

而且不支持blur, focus, mouseenter, mouseleave, change, submit。

2.移除live绑定的事件

在Jquery里,使用live来绑定事件,若想移除该事件,要使用die方法。

如:

$(“.myDiv”).die("click");

这样就好将绑定的click事件移除掉。

3.JQuery offset(),position()获得绝对,相对位置的坐标方法

获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;)

var X = $('#DivID').offset().top; 
var Y = $('#DivID').offset().left;

例如:

$(".produc a span").click(function(){
 $('body, html').animate({scrollTop:$('#buy').offset().top }, 'slow');
 });

获取相对(父元素)位置:

var X = $('#DivID').position().top; 
var Y = $('#DivID').position().left; 
var left = $("selector").offset().left;//元素相当于窗口的左边的偏移量
var top = $("selector").offset().top;//元素相对于窗口的上边的偏移量
var pleft = $("selector").scrollLeft();//元素相对于滚动条左边的偏移量
var pTop = $("selector").scrollTop();//元素相对于滚动条顶部的偏移量

4.jquery获取鼠标位置

$(function () {
      //e为事件名;
      $(document).mousemove(function (e) {
        $("p").text("X:" + e.pageX + "  Y:" + e.pageY);
      });

    });

5.jquery判断某个元素是否含有某个class,是否存在某些属性,怎样移除某些属性。

在JQuery编码中,我们会判断元素是否存在某个属性.比如是否包含 class="new" 的样式呢.JQuery判断就非常简单了,因为有 hasClass这个方法 $("input[name=new]").hasClass("new") 即可判断.

这时就没有现成的方法了. 如果存在某个属性 $("#aid").attr("rel") 会返回 rel的值,如果不存在 rel属性则会返回"undefined"
undefined 就是 undefined类型 , if($("#aid").attr("rel")=="undefined") 这个判断可能不成立.
因为类型不相同.

建议使用 if(typeof($("#aid").attr("rel"))=="undefined") 即可。

jquery移除某个jquery对象的某个属性: $(".main").removeAttr("style");

6.jquery stop()的用法(清除动画积累的有效方法)

1、stop([stopAll], [gotoEnd])方法有两个参数(当然可以不传或直传一个),其中stopAll的意思是清除之后的所有动画。gotoEnd的意思是,执行完当前动画。

2、stopAll == true时,停止队列中的所有动画, stopAll ==false时,只停止队列中的当前动画,后续动画继续执行。

3、gotoEnd == true时,立即跳到当前动画的末尾, gotoEnd ==false时,停在当前状态。且gotoEnd只有在设置了stopAll的时候才起作用

4、在项目中,如果不进行动画队列清理,就会产生动画积累的问题。因此在写入动画时,最好先清除队列中的重复动画。

在项目中,例如做下拉二级导航效果,用到jquery的slideDown()与slideUp()方法,当鼠标快速晃动后,如果不进行动画队列清理,就会产生动画积累,出现问题。

例如:

$(".nav li.has_list").hover(function(){
  $(this).children("a").addClass("curr");
  $(".nav li.has_list").children("div").stop(false,true);
  $(this).children("div").slideDown(400).end();              
},function(){
  $(this).children("a").removeClass("curr");
  $(".nav li.has_list").children("div").stop(false,true);
  $(this).children("div").slideUp(400).end();
  }
);

以上内容就是本文关于jquery常用函数与方法汇总,希望大家喜欢。

Javascript 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
Vue中props的使用详解
Jun 15 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
Vue详细的入门笔记
May 10 Vue.js
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 #Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 #Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 #Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 #Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 #Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 #Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
php设计模式小结
2013/02/15 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
js一组验证函数
2008/12/20 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python如何生成各种随机分布图
2018/08/27 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
护理毕业生自我鉴定
2014/02/11 职场文书
内衣营销方案
2014/03/15 职场文书
和谐社区口号
2014/06/19 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书