집 >웹 프론트엔드 >JS 튜토리얼 >Jquery data(), Jquery stop(), jquery Delay() 함수를 하나씩 소개합니다(자세히)_jquery

Jquery data(), Jquery stop(), jquery Delay() 함수를 하나씩 소개합니다(자세히)_jquery

WBOY원래의: 2016-05-16 15:33:561341검색

먼저 jquery data() 함수를 소개하겠습니다

jQuery의 data() 함수는 선택한 요소에 데이터를 추가하거나 선택한 요소에서 데이터를 가져오는 데 사용됩니다. data() 함수를 통해 접근한 데이터는 임시 데이터입니다. 페이지를 새로 고치면 이전에 저장된 데이터는 더 이상 존재하지 않습니다.

1. jquery 데이터()의 역할

data() 메서드는 선택한 요소에 데이터를 추가하거나 선택한 요소에서 데이터를 가져옵니다.
data() 함수를 통해 접근한 데이터는 임시 데이터입니다. 페이지를 새로 고치면 이전에 저장된 데이터는 더 이상 존재하지 않습니다.
이 함수는 jQuery 객체(인스턴스)에 속합니다. data() 함수를 통해 저장된 데이터를 제거해야 하는 경우에는 RemoveData() 함수를 사용하세요.

2.jquery 데이터 사용 방법

1. 첨부된 데이터의 값을 가져옵니다

$(선택기).data(이름)

매개변수 설명

이름:

선택사항. 검색할 데이터의 이름을 지정합니다.

이름을 지정하지 않으면 이 메소드는 요소에 저장된 모든 데이터를 객체로 반환합니다.

2. 이름과 값을 사용하여 개체에 데이터를 추가합니다

$(selector).data(이름,값)

매개변수 설명

선택기: 데이터를 추가하거나 획득해야 하는 개체입니다.
name: 매개변수는 데이터의 이름입니다.
value: 매개변수는 데이터의 값입니다.

3. 개체를 사용하여 요소에 데이터 추가

이름/값 쌍이 있는 개체를 사용하여 선택한 요소에 데이터를 추가합니다.
이름과 값을 제공하여 값을 할당하는 것 외에도 다른 객체("another")를 매개변수로 직접 전달할 수도 있습니다. 이 경우 "another"의 속성 이름과 속성 값은 여러 키-값 쌍으로 처리되며, 여기에서 추출된 "이름"과 "값"이 대상 개체의 캐시에 복사됩니다.

$(선택기).data(객체)

매개변수 설명

객체: 필수입니다. 이름/값 쌍을 포함하는 개체를 지정합니다.

예

<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
 testObj=new Object();
 testObj.greetingMorn="Good Morning!";
 testObj.greetingEve="Good Evening!";
 $("#btn1").click(function(){
  $("div").data(testObj);
 });
 $("#btn2").click(function(){
  alert($("div").data("greetingEve"));
 });
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>

그럼 jquery stop() 함수를 소개해드리겠습니다

jQuery의 stop() 함수는 현재 일치하는 요소에서 실행 중인 애니메이션을 중지하는 데 사용됩니다. 기본적으로 stop() 함수는 현재 실행 중인 애니메이션만 중지합니다. animate() 함수를 사용하여 현재 요소에 A, B, C 세 개의 애니메이션을 설정하는 경우, 현재 실행 중인 애니메이션이 A라면 A 애니메이션의 실행만 중지하고 B 애니메이션의 실행은 막지 않습니다. 그리고 씨. 물론 선택적 옵션 인수를 지정하여 모든 애니메이션을 중지할 수도 있습니다.
jQuery의 stop() 함수는 현재 일치하는 요소에서 실행 중인 애니메이션을 중지하는 데 사용됩니다.
애니메이션을 중지하면 애니메이션이 실행되기 전의 상태가 복원되지 않고 바로 중지됩니다. 애니메이션은 현재 상태를 그대로 유지합니다.
예를 들어 요소 높이가 100px에서 200px로 전환 애니메이션을 수행하고 높이가 150px일 때 애니메이션을 중지하면 현재 높이가 여전히 150px로 유지됩니다. 애니메이션 실행 후 콜백 함수를 설정하면 콜백 함수가 실행되지 않습니다.

1.jquery stop() 구문

$(selector).stop(stopAll,goToEnd)

매개변수 설명

1. 모두 중지

선택사항. 완료되지 않은 애니메이션 대기열을 지울지 여부를 나타냅니다.
즉, 매개변수 값이 true이면 이후의 모든 애니메이션이나 이벤트가 중지됩니다. 매개변수 값이 false인 경우 선택한 요소에서 현재 실행 중인 애니메이션만 중지되고 이후 애니메이션에는 영향을 미치지 않습니다. 따라서 이 매개변수는 일반적으로 false입니다.
stop() 메서드를 사용하면 현재 실행 중인 애니메이션이 즉시 중지됩니다. 실행 대기 중인 다른 애니메이션이 있으면 현재 상태로 다음 애니메이션이 시작됩니다.

2. 끝으로

선택사항. 현재 실행 중인 애니메이션을 현재 애니메이션의 끝으로 직접 이동할지 여부를 나타냅니다.
현재 애니메이션의 완료 여부를 지정합니다. 이 매개변수는 stopAll 매개변수가 설정된 경우에만 사용할 수 있습니다.

3. 비고

기본적으로 매개변수를 작성하지 않으면 두 매개변수 모두 거짓으로 간주됩니다.

2.jquery stop() 예시

HTML 코드 예시

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery stop()</title>
<script type="text/javascript">
$(function(){
  $("button:eq(0)").click(function(){
    $("#panel").animate({height:"150" }, 1000).animate({width:"300" },
      1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"},
      1000);
  });
  //stop([clearQueue][,gotoEnd]);
　　//语法结构
  $("button:eq(1)").click(function(){
    $("#panel").stop();//停止当前动画，继续下一个动画
  });
  $("button:eq(2)").click(function(){
    $("#panel").stop(true);//清除元素的所有动画
  });
  $("button:eq(3)").click(function(){
    $("#panel").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
  });
  $("button:eq(4)").click(function(){
    $("#panel").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态
  });
})
</script>
</head>
<body>
<button>开始一连串动画</button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<div id="panel">
  <h5 class="head">什么是jQuery&#63;</h5>
  <div class="content">
    jQuery。
  </div>
</div>
</body>
</html>

实例说明

1、点击按钮（stop()），由于两个参数都是false。所以点击发生时，animater没有跳到当前动画（动画1）的最终效果，而直接进入动画2，然后动画3，4，5.直至完成整个动画。

2、点击按钮（stop(true)），由于第一个是true，第二个是false，所以animater立刻全部停止了，动画不动了。

3、点击按钮（stop(false,true)），由于第一个是false，第二个是true，所以点击发生时，animater身处的当前动画（动画1）停止并且animater直接跳到当前动画（动画1）的最终末尾效果位置，接着正常执行下面的动画（动画2，3，4，5），直至完成整个动画。

3、点击按钮（stop(true，true)），由于两个都是true，所以点击发生时，animater跳到当前动画（动画1）的最终末尾效果位置，然后，全部动画停止。

三、jquery stop()在工作中的应用

一个下拉菜单，当鼠标移上去的时候就菜单显示，当鼠标离开的时候菜单隐藏，如果我快速不断地将鼠标移入移出菜单（即，当菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累"，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。

解决方法

在写动画效果的代码前加入stop(true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，完成当前的动画（跳至当前动画的最终效果位置）。

最后给大家介绍jquery delay()

jquery中delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：$(selector).delay(duration)其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执，delay与setTimeout函数还是有区别的，delay是更适合某些使用情况。

可以将队列中等待执行的下一个动画延迟指定的时间后才执行。它常用在队列中的两个jQuery效果函数之间，从而在上一个动画效果执行后延迟下一个动画效果的执行时间。

一、语法

$(selector).delay(speed,queueName)

1、参数说明

2、备注

延时时间（duration参数）是以毫秒为单位的，数值越大，动画越慢，不是越快。
字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。

二、delay()实例

HTML

<p>动画效果：
  <select id="animation">
    <option value="1">动画1</option>
    <option value="2">动画2</option>
    <option value="3">动画3</option>
    <option value="4">动画4</option>
  </select>
  <input id="exec" type="button" value="执行动画" >
</p>
<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>
<script>
$("#exec").click( function(){
  var v = $("#animation").val();
  var $myDiv = $("#myDiv");
  if(v == "1"){
    $myDiv.slideUp( 1000 )
    .delay( "slow" )
    .fadeIn( 1500 );
  }else if(v == "2"){
    $myDiv.fadeOut( "slow" )
    .delay( 2000 )
    .slideDown( 1000 )
    .animate( { height: "+=300" } );
  }else if(v == "3"){
    /*
    注意：只有动画才会被加入效果队列中
    以下代码实际上只有slideUp()、slideDown()会加入效果队列
    delay()的延迟只对slideDown()起作用
    show()在被调用时就立即执行了(此时slideUp的动画效果尚未执行结束)
    以下代码的执行顺序时：
    1、slideUp()被加入队列、开始执行，
    2、show()也开始执行，它立即执行完毕，此时slideUp()的动画尚未执行结束
    3、延迟2秒
    4、执行SlideDown()
    */
    $myDiv.slideUp( "slow" )
    .delay( 2000 ) 
    .show( ) // 它不是一个效果动画
    .slideDown( );
  }else if(v == "4"){
    $myDiv.show()
    .delay( 2000 )
    // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
    .animate( { height: "+=300px" }, 2000 ) 
    .animate( { width: "50%" }, 1000 )   
    .animate( { width: "200px", height: "100px" }, 1000 );   
  }
} );
</script>

实例二、让页面中的按钮在页面加载后500毫秒隐藏，然后再过1500毫秒显示出来

$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide().dequeue();}) 
.delay(1500) 
.queue(function(){$(this).show();}); 
});

三、jquery中使用delay()注意事项

1、delay适用在jQuery动画效果和类似队列中
2、如果下一项是动画效果，则会执行延迟调用
3、如果不是效果动画，则它不会被加入效果队列中，因此该函数不会对它进行延迟调用。
4、如果要将不是动画效果加入延迟，则需要将它加入到queue队列中去。

例如

$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide();}) 
.delay(1500) 
.show(1); 
//.queue(function(){$(this).show();}); 
});

备注：上面方法只隐藏，不会再显示，queue执行完后，也中止了动画队列的继续执行，需要调用dequeue使其执行下去

又如

$(function(){ 
var $inputs = $('input[type=button]') 
.delay(500) 
.queue(function(){$(this).hide().dequeue();}) 
.delay(1500) 
.show(); 
//.show(1); 
});

备注：上面方法也是只隐藏，而不会再显示！这里show不再指定显示动画时长，则show方法不再是一个动画。由此可知，dequeue只能使得动画队列中的后续方法执行下去，不能使非动画队列中的jquery方法继续执行！

성명：

이전 기사：ECMA5 배열 및 forEach() 모방 구현_javascript 기술의 새로운 방법은 무엇입니까?다음 기사：ECMA5 배열 및 forEach() 모방 구현_javascript 기술의 새로운 방법은 무엇입니까?

Jquery data(), Jquery stop(), jquery Delay() 함수를 하나씩 소개합니다(자세히)_jquery

관련 기사