jquery에는 어떤 기능이 있나요?

jquery 함수에는 다음이 포함됩니다. 1. "지연(기간,[queueName])" 함수 2. "jQuery live(type, fn)" 함수 3. ".live()" 함수; 함수 5. "stop()" 함수 등

권장: "jquery tutorial"

• 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
  

일반적인 jquery 함수 및 메서드 요약

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

아직 지원되지 않습니다.blur, focus, mouseenter, mouseleave,change, submit

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

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

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

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

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

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

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

사용 예:

<p class=”myp”></p>

jquery:

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

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

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

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

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

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

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

Jquery에서 이벤트를 바인딩하려면 live를 사용하세요.

예:

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

이렇게 하면 바운드 클릭 이벤트가 제거됩니다.

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

페이지 요소의 절대 X, Y 좌표를 얻으려면 offset() 메서드를 사용할 수 있습니다. 여백 설정: 0 ;패딩:0;)

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

예:

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

상대(상위 요소) 위치 가져오기:

var X = $('#pID').position().top; 
var Y = $('#pID').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는 요소에는 특정 클래스, 특정 속성이 존재하는지 여부 및 특정 속성을 제거하는 방법이 포함되어 있습니다.

JQuery 코딩에서는 요소에 특정 속성이 있는지 여부를 판단합니다. 예를 들어 class="new" 스타일이 포함되어 있는지 여부는 hasClass 메소드 $("input[name)가 있기 때문에 매우 간단합니다. =new ]").hasClass("new") 를 사용하여 결정할 수 있습니다.

현재 기성 메서드는 없습니다. 속성이 있는 경우 $("#aid").attr("rel" )는 rel 값을 반환합니다. rel 속성이 존재하지 않으면 "undefine"이 반환됩니다.
undefine은 정의되지 않은 유형입니다. ) 이 판단은 사실이 아닐 수도 있습니다.
유형이 다르기 때문입니다.

if(typeof($("#aid").attr("rel"))=="undefine")을 사용하는 것이 좋습니다.

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("p").stop(false,true);
  $(this).children("p").slideDown(400).end();              
},function(){
  $(this).children("a").removeClass("curr");
  $(".nav li.has_list").children("p").stop(false,true);
  $(this).children("p").slideUp(400).end();
  }
);

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

위 내용은 jquery에는 어떤 기능이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!