6. 애니메이션 효과

6.1 숨기기 표시

hide show toggle 세 가지 함수 방법


<html>
<head>
	<title> title>
head>
<body>
	<p>hellop>
    <button id="hide"> button>
    <button id="show"> button>
    <button id="toggle"> button>
body>
<script src="E:/ /1.4web /JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
	$(document).ready(function() {
    	$("#hide").click(function () {
        	$("p").hide(1000);
    	});
    	$("#show").click(function () {
        	$("p").show(1000);
    	});

//  hide()   show()  。
    	$("#toggle").click(function () {
        	$("p").toggle(1000);
    	});
	});

script>
html>

6.2 슬라이딩

slideDown slideUp slideToggle 세 가지 함수 방법


<html>
<head>
	<title> title>
	<style>
        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    style>
head>
<body>
	<div id="slideDown"> div>
    <div id="slideUp"> div>
    <div id="slideToggle">togglediv>
    <div id="content">helloworlddiv>
body>
<script src="E:/ /1.4web /JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
	$("#slideDown").click(function(){
        $("#content").slideDown(1000);
    });
    $("#slideUp").click(function(){
        $("#content").slideUp(1000);
    });
    $("#slideToggle").click(function(){
        $("#content").slideToggle(1000);
    });
script>
html>

6.3 페이드 인 페이드 아웃

fadeIn .fadeOutfadeToggle fadeTo 네 가지 함수


<html>
<head>
	<title> title>
head>
<body>
	<button id="in">fadeinbutton>
    <button id="out">fadeoutbutton>
    <button id="toggle">fadetogglebutton>
    <button id="fadeto">fadetobutton>
    <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet">div>
body>
<script src="E:/ /1.4web /JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
	$("#in").click(function(){
       $("#id1").fadeIn(1000);
   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);
   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);
   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);
   });
script>
html>

6.4 콜백 함수


<html>
<head>
	<title> title>
head>
<body>
	<button>hidebutton>
  	<p>helloworld helloworld helloworldp>
body>
<script src="E:/ /1.4web /JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
	$("button").click(function(){
       	$("p").hide(1000,function(){
           alert($(this).html());
       	});    	
    });
script>
html>

7. 확장 방법(플러그인 메커니즘)

7.1 JQuery로 플러그인을 쓸 때 가장 핵심적인 방법 두 가지

<script>    
$.extend(object)      // JQuery  。
$.fn.extend(object)   // JQuery 。
    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));
//-----------------------------------------------------------------------
$.fn.extend({
    "print":function(){
        for (var i=0;i<this.length;i++){
            console.log($(this)[i].innerHTML)
        }
    }
});
$("p").print();
</script>

7.2 역할 영역 정의

JQuery 플러그인을 정의하려면 먼저 이 플러그인의 코드를 외부의 방해를 받지 않는 곳에 두어야 합니다.전문적으로 말하자면 이 플러그인을 위해 개인 역할 영역을 정의하는 것이다.외부 코드는 플러그인 내부 코드에 직접 접근할 수 없습니다.플러그인 내부의 코드는 전역 변수를 오염시키지 않습니다.일정한 작용으로 플러그인과 운행 환경의 의존을 풀었다.

(function(a,b){return a+b})(3,5)

       (function ($) { })(jQuery);
// 
        var fn = function ($) { };
        fn(jQuery);

7.3 기본 매개변수

/step01  JQuery 
(function ($) {
    //step03-a  
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step06-a  
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }

    //step02  
    $.fn.easySlider = function (options) {
        //step03-b  ， 
        var options = $.extend(defaults, options);
        //step4  JQuery 
        //step5  
        return this.each(function () {
            //step06-b  
            showLink(this);
        });
    }
})(jQuery);

 ：

<html>
<head>
	<title>jquery title>
head>
<body>
	<p>111p>
	<p>222p>
	<p>333p>
	<p>444p>
	<p>555p>
	<p>666p>
body>
<script src="E:/ /1.4web /JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
	// MyPrint 
	// $.extend({
	// 	MyPrint:function(){
	// 		console.log("hello");
	// 	}
	// });
	// 
	// $.MyPrint();

	// 
	$.fn.extend({
		Get_text:function(){
			// 
			// for (var i=0;i
			// 	console.log(this[i].innerHTML);
			// }	

			// 
			// $.each($(this),function(x,y){
			// 	console.log(y.innerHTML)
			// })	
		}
	});
	$("p").Get_text();
script>
html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

JavaScript 페이지 표시 실현

저 는 페이지 디 스 플레이 를 구축 하 는 방법 을 공유 합 니 다. 1. 페이지 디 스 플레이 수 는 페이지 총수 보다 작 습 니 다.이 경우 현재 몇 페이지 든 모든 페이지 를 표시 해 야 합 니 다. 2. 페...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

웹 프런트엔드 학습 노트-Day11