Be a groovy man by positive thinking

UI/UX_021 본문

IT/_HTML_CSS_JS

UI/UX_021

KhanSelf 2017. 8. 7. 14:08

간단정리


[자바스크립트] - 동적 기능 수행


1. 함수필터 선택자

1) :eq(n) : n 번째 위치하는 문서객체 0부터 시작

2) :gt(n) : n 번째 초과하는 문서객체

3) :lt(n) : n 번째 미만에 위치하는 문서객체

4) :header : <h1>, <h2> 문서 객체 모두

5) :hidden : hidden 문서객체 모두


2.events

1) $("선택자").이벤트명(function(){

  // action goes here!!

});

$(document).ready(function(){

  $("p").click(function(){

   $("p:first").css("background-color", "yellow");

  });

});


2)on() Method

: 선택한 요소에 한개 이상의 이벤트 연결

$("선택자").on({

    이벤트1: function(){

         // action goes here!!

    }, 

    이벤트2: function(){

         // action goes here!!

    }

});

 

3.effects

1) $(selector).hide(speed,callback);

2) $(selector).show(speed,callback);

3) $(selector).toggle(speed,callback);

4) $(selector).fadeIn(speed,callback);

5) $(selector).fadeOut(speed,callback);

6) $(selector).fadeToggle(speed,opacity,callback);

7) $(selector).slideDown(speed,callback);

8) $(selector).slideUp(speed,callback);

9) $(selector).slideToggle(speed,callback);


 - speed : 밀리초 단위, slow, fast

 - callback : 효과를 완료하고 실행할 함수

 $(document).ready(function(){

  $("#hide").click(function(){

   $("p").hide("slow", function(){

    alert("The paragraph is now hidden");

   });

  });

  $("#show").click(function(){

   $("p").show('fast');

  });

 });


4. jQuery - 애니메이션 효과

1) $(selector).animate({속성들},speed,callback);

 - 속성들 : CSS 속성들

 - speed :  "slow", "fast", or milliseconds

 - 효과를 실행시킬 객체의 속성 중 position:absolute, relative, fixed 중 하나로 설정 되어 있어야 함


 $("button").click(function(){

  $("div").animate({left: '250px'});

 })

 $("button").click(function(){

     $("div").animate({

  left: '250px',

  opacity: '0.5',

  height: '150px',

  width: '150px'

     });

 });

 

 

2) Queue

여러개의 애니메이션 구성 시 하나씩 차례대로 실행.

$("button").click(function(){

    var div = $("div");

    div.animate({left: '100px'}, "slow");

    div.animate({fontSize: '3em'}, "slow");

});


3) clearQueue() - 대기 하고 있는 큐 삭제

$("#start").click(function(){

        $("div").animate({height: 300}, 1500);

        $("div").animate({width: 300}, 1500);

        $("div").animate({height: 100}, 1500);

        $("div").animate({width: 100}, 1500);

    });

    $("#stop").click(function(){

        $("div").clearQueue();

    });




예문

Ex_01

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("p:eq(1)").css("background-color", "yellow");

$("li:eq(1)").css("background-color", "yellow");


});

</script>

</head>

<body>

<h1>Welcome to My Homepage</h1>


<p class="intro">My name is Donald.</p>

<p>I live in Duckburg.</p>

<p>My best friend is Mickey.</p>


<p>Who is your favourite:</p>

<ul id="choose">

<li>Goofy</li>

<li>Mickey</li>

<li>Pluto</li>

</ul>

</body>

</html>






Ex_02 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

table, th, td {

border: 1px solid black;

}

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("tr:gt(3)").css("background-color", "yellow");

// index는 0 부터 시작 3 초과 위치 = 4초과 위치 5번째 라인부터 


});

</script>

</head>

<body>

<table id="t1">

<tr>

<th>이름</th>

<th>혈액형</th>

<th>지역</th>

</tr>

<tr>

<td>강민수</td>

<td>AB형</td>

<td>서울특별시 송파구</td>

</tr>

<tr>

<td>구지연</td>

<td>B형</td>

<td>미국 캘리포니아</td>

</tr>

<tr>

<td>김미화</td>

<td>AB형</td>

<td>미국 메사추세츠</td>

</tr>

<tr>

<td>김선화</td>

<td>O형</td>

<td>서울 강서구</td>

</tr>

<tr>

<td>김선화</td>

<td>O형</td>

<td>서울 강서구</td>

</tr>

</table>


</body>

</html>





Ex_03

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

table, th, td {

border: 1px solid black;

}

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("tr:lt(2)").css("background-color", "yellow");


});

</script>

</head>

<body>

<table id="t1">

<tr>

<th>이름</th>

<th>혈액형</th>

<th>지역</th>

</tr>

<tr>

<td>강민수</td>

<td>AB형</td>

<td>서울특별시 송파구</td>

</tr>

<tr>

<td>구지연</td>

<td>B형</td>

<td>미국 캘리포니아</td>

</tr>

<tr>

<td>김미화</td>

<td>AB형</td>

<td>미국 메사추세츠</td>

</tr>

<tr>

<td>김선화</td>

<td>O형</td>

<td>서울 강서구</td>

</tr>

</table>


</body>

</html>








Ex_04

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

table, th, td {

border: 1px solid black;

}

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$(":header").css("color", "red");


});

</script>

</head>

<body>

<h1>Welcome to My Homepage</h1>


<p class="intro">My name is Donald.</p>

<p>I live in Duckburg.</p>

<p>My best friend is Mickey.</p>

<p>Who is your favourite:</p>



<h2>My Fantastic Homepage</h2>


<ul id="choose">

<li>Goofy</li>

<li>Mickey</li>

<li>Pluto</li>

</ul>


<h3>It´s amazing!</h3>


</body>

</html>








Ex_05

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("p").click(function() {

$("p:first").css("background-color", "yellow");

});


});

</script>

</head>

<body>

<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>

<p>Click me too!</p>


</body>

</html>








Ex_06 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("p").click(function() {

$(this).css("background-color", "yellow");

});


});

</script>

</head>

<body>

<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>

<p>Click me too!</p>

<a>Click me too!</a>


</body>

</html>








Ex_07

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

.outer {

width: 200px;

height: 200px;

background: orange;

padding: 50px;

margin: 10px;

}


.inner {

width: 100%;

height: 100%;

background: red;

}

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function(){


/*$('.outer').mouseenter(function () {

$('body').append('<h1>MOUSEOVER</h1>');

});*/

$('.outer').mouseover(function () {

$('body').append('<h1>MOUSEENTER</h1>');

});


});

</script>

</head>

<body>

<div class="outer">

<div class="inner"></div>

</div>

</body>

</html>









Ex_08

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("p").on({

mouseenter : function() {

$(this).css("background-color", "lightgray");

},

mouseleave : function() {

$(this).css("background-color", "lightblue");

},

click : function() {

$(this).css("background-color", "yellow");

}

});


});

</script>

</head>

<body>

<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>

<p>Click me too!</p>

<a>Click me too!</a>


</body>

</html>













Ex_09

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {

$("#hide").click(function() {

$("p").hide();

});

$("#show").click(function() {

$("p").show();

});

});

</script>

</head>

<body>


<p>숨기기 버튼을 클릭하면 사라지고 보이기 버튼을 클릭하면 보입니다.</p>


<button id="hide">숨기기</button>

<button id="show">보이기</button>


</body>

</html>


 

 






Ex_10

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script


src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {

$("button").click(function() {

$("p").toggle();

});

});

</script>

</head>

<body>


<p>보이고 숨기고</p>


<button>토글</button>


</body>

</html>









Ex_11

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {

$("#hide").click(function() {

$("p").hide("slow", function() {

alert("The paragraph is now hidden");

});

});

$("#show").click(function() {

$("p").show('fast');

});

});

</script>

</head>

<body>


<p>숨기기 버튼을 클릭하면 사라지고 보이기 버튼을 클릭하면 보입니다.</p>


<h1>제목</h1>

<button id="hide">숨기기</button>

<button id="show">보이기</button>


</body>

</html>








Ex_12

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {

$("#hide").click(function() {

/*$("p").hide("slow", function(){

alert("The paragraph is now hidden");

});*/

$("p").hide("slow");

alert("The paragraph is now hidden");


});

$("#show").click(function() {

$("p").show('fast');

});

});

</script>

</head>

<body>


<p>숨기기 버튼을 클릭하면 사라지고 보이기 버튼을 클릭하면 보입니다.</p>


<h1>제목</h1>

<button id="hide">숨기기</button>

<button id="show">보이기</button>


</body>

</html>








Ex_13

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("button").click(function() {

$("#div1").fadeIn(5000);

$("#div2").show(5000);

$("#div3").slideDown(5000);

});

});

</script>

</head>

<body>


<p>Demonstrate fadeIn() with different parameters.</p>


<button>Click to fade in boxes</button>

<br>

<br>


<div id="div1"

style="display: none; width: 80px; height: 80px; background-color: red;"></div>

<br>

<div id="div2"

style="display: none; width: 80px; height: 80px; background-color: green;"></div>

<br>

<div id="div3"

style="display: none; width: 80px; height: 80px; background-color: blue;"></div>


</body>

</html>








Ex_14

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("button").click(function() {

$("#div1").fadeToggle("fast");

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

});

});

</script>

</head>

<body>


<button>Click to boxes</button>

<br>

<br>


<div id="div1"

style="display: none; width: 80px; height: 80px; background-color: red;"></div>

<br>

<div id="div2"

style="display: none; width: 80px; height: 80px; background-color: green;"></div>

<br>

<div id="div3"

style="display: none; width: 80px; height: 80px; background-color: blue;"></div>


</body>

</html>








Ex_15

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("button").click(function() {

$("div").animate({

width : '250px'

}, 3000);

});


});

</script>

</head>

<body>

<button>Start Animation</button>


<p></p>


<div

style="background-color: #98bf21; height: 100px; width: 100px; position: absolute;"></div>


</body>

</html>







Ex_16

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("button").click(function() {


$("div").animate({

left : '250px',

opacity : '0.5',

height : '150px',

width : '150px'

}, 3000);


});


});

</script>

</head>

<body>

<button>Start Animation</button>


<p></p>


<div

style="background-color: #98bf21; height: 100px; width: 100px; position: absolute;"></div>


</body>

</html>







Ex_17

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("button").click(function() {


$("div").animate({

left : '+=250px',

height : '+=150px',

width : '+=150px'

});


});


});

</script>

</head>

<body>

<button>Start Animation</button>


<p></p>


<div

style="background-color: #98bf21; height: 100px; width: 100px; position: absolute;"></div>


</body>

</html>






Ex_18

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("button").click(function() {


$("div").animate({

height : 'toggle'

});


});


});

</script>

</head>

<body>

<button>Start Animation</button>


<p></p>


<div

style="background-color: #98bf21; height: 100px; width: 100px; position: absolute;"></div>


</body>

</html>







Ex_19

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("button").click(function() {


var div = $("div");

div.animate({

height : '300px'

}, 5000);

div.animate({

width : '300px'

}, 5000);

div.animate({

height : '100px'

}, 5000);

div.animate({

width : '100px'

}, 5000);


});


});

</script>

</head>

<body>

<button>Start Animation</button>


<p>By default, all HTML elements have a static position, and cannot

be moved. To manipulate the position, remember to first set the CSS

position property of the element to relative, fixed, or absolute!</p>


<div

style="background-color: #98bf21; height: 100px; width: 100px; position: absolute;"></div>


</body>

</html>








Ex_20

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<style>

#panel, #flip {

padding: 5px;

font-size: 18px;

text-align: center;

background-color: #555;

color: white;

border: solid 1px #666;

border-radius: 3px;

}


#panel {

padding: 50px;

display: none;

}

</style>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

</script>

<script>

$(document).ready(function() {


$("#start").click(function() {

$("div").animate({

height : 300

}, 1500);

$("div").animate({

width : 300

}, 1500);

$("div").animate({

height : 100

}, 1500);

$("div").animate({

width : 100

}, 1500);

});

$("#stop").click(function() {

$("div").clearQueue();

});


});

</script>

</head>

<body>

<button id="start">Start Animation</button>

<button id="stop">Stop Animation</button>

<br>

<br>


<div style="background: red; height: 100px; width: 100px;"></div>

</body>

</html>






저작자표시 (새창열림)

'IT > _HTML_CSS_JS' 카테고리의 다른 글

UI/UX_023  (0) 2017.08.09
UI/UX_022  (0) 2017.08.09
UI/UX_020(JQuery)  (0) 2017.08.03
Ui/UX_019(자바스크립트 평가)  (0) 2017.08.02
UI/UX_018  (0) 2017.08.02
'IT/_HTML_CSS_JS' Related Articles more