일반적인 jquery 함수 및 방법 요약_jquery

1.지연(기간,[queueName])

대기열에 있는 후속 항목의 실행을 지연시키려면 지연을 설정하세요.

jQuery 1.4의 새로운 기능입니다. 대기열에 있는 기능의 실행을 지연하는 데 사용됩니다. 애니메이션 대기열의 실행을 지연하거나 사용자 정의 대기열에서 사용할 수 있습니다.

기간: 지연 시간, 단위: 밀리초

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, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup을 지원합니다.

블러, 포커스, 마우스입력, 마우스리브, 변경, 제출

은 아직 지원되지 않습니다.

bind()와 달리 live()는 한 번에 하나의 이벤트만 바인딩할 수 있습니다.

이 방법은 기존 바인딩과 매우 유사합니다. 차이점은 라이브를 사용하여 이벤트를 바인딩하면 페이지의 모든 현재 및 미래 요소에 이벤트가 바인딩된다는 것입니다(위임 사용). 예를 들어 live를 사용하여 클릭 이벤트를 페이지의 모든 li에 바인딩하는 경우입니다. 그런 다음 나중에 이 페이지에 li가 추가되면 새로 추가된 li의 클릭 이벤트를 계속 사용할 수 있습니다. 새로 추가된 요소에 이벤트를 다시 바인딩할 필요가 없습니다.

.live()는 널리 사용되는 liveQuery 플러그인과 매우 유사하지만 다음과 같은 주요 차이점이 있습니다.

.live는 현재 모든 이벤트의 하위 집합만 지원합니다. 지원되는 목록은 위 설명을 참조하세요.

.live는 liveQuery에서 제공하는 "eventless" 스타일 콜백 함수를 지원하지 않습니다. .live는 이벤트 처리 기능만 바인딩할 수 있습니다.

.live에는 "설정" 및 "정리" 프로세스가 없습니다. 모든 이벤트는 요소에 직접 바인딩되지 않고 위임되기 때문입니다.

라이브와 연결된 이벤트를 제거하려면 die 메소드를 사용하세요

사용 예:

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

jquery:

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

javascript를 사용하여 mydiv 클래스로 요소를 동적으로 생성하는 경우 해당 요소를 클릭하면 팝업이 계속 나타납니다. 라이브 사용 후 왜 이런 현상이 발생하나요? 이는 jquery가 이벤트 버블링 메커니즘을 사용하여 이벤트를 문서에 직접 바인딩한 다음 event.target을 통해 이벤트 소스를 찾기 때문입니다. 이는 jquery.livequery 플러그인과 다릅니다. jquery.livequery는 20밀리초마다 이벤트를 확인하고 새 이벤트가 있으면 다시 바인딩합니다.

물론 라이브를 사용하면 장점과 단점이 있습니다.

장점은 요소가 업데이트될 때 이벤트를 반복적으로 정의할 필요가 없다는 것입니다.

단점은 이벤트를 문서에 바인딩하면 페이지의 모든 요소에 대해 한 번씩 호출된다는 점입니다. 부적절하게 사용하면 성능에 심각한 영향을 미칩니다.

그리고 흐림, 초점, mouseenter, mouseleave, 변경, 제출을 지원하지 않습니다.

2. 라이브 바인딩 이벤트 제거

Jquery에서는 live를 사용하여 이벤트를 바인딩합니다. 이벤트를 제거하려면 die 메서드를 사용하세요.

예:

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

바운드 클릭 이벤트가 제거됩니다.

3.절대 및 상대 위치 좌표를 얻기 위한 JQuery offset(), position() 메서드

페이지 요소의 절대 X, Y 좌표를 얻으려면 offset() 메서드를 사용할 수 있습니다. (본문 속성 설정 여백: 0; 패딩: 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常用函数与方法汇总，希望大家喜欢。