본문 바로가기
공부/Javascript + jQuery

jQuery Day4

by 취미취미 2021. 11. 30.
반응형
  • event 연결하기(1)
  • event 연결하기(2)
  • event 연결과 제거
  • 특정 태그값 받아오기
  • 번외 - canvas 사용해서 선 그리기

.bind()를 이용해서 이벤트 연결하기

<!DOCTYPE html>
<html lang="kor">
<head>
	<meta charset="UTF-8">
    <title></title>
    <style>
    	.reverse{background:#000; color:#fff;}
    </style>
    <script src="http://code.jquery.com/jquery-1.7.js"></script>
	<script>
	$(document).ready(function(){
    	//이벤트 연결
        $('h1').bind('click',function(){ // .bind()로 연결
        	$(this).html(function(index,html){
            	return html + '+'; // 클릭하면 +가 계속 추가됨
            })
        });
        $('h1').bind({
        mouseenter:function(){$(this).addClass('reverse');},
        // 마우스가 올라가면(hover) h1에 reverse 클래스가 생기면서 배경이 검정, 글씨가 흰색으로 바뀜
        mouseleave:function(){$(this).removeClass('reverse');}
        // 마우스가 떠나면 h1에 들어있던 reverse 클래스가 사라지면서 글씨와 배경색이 원래대로 돌아옴
        
        })
    });
	</script>
</head>
<body>
	<h1>Header-0</h1>
    <h1>Header-1</h1>
    <h1>Header-2</h1>
</body>
</html>​

.hover()와 toggle을 사용하여 이벤트 연결하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        .reverse{background: black; color:#fff;}
    </style>
    
    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function(){
            $('h1').hover(function(){
                $(this).addClass('reverse');
            },function(){
                $(this).removeClass('reverse');
            });
            // 이벤트 연결
            $('h1').toggle(function(){ // 2가지이상 상태를 반복함
                $(this).html(function(index,html){
                    return '★'+html;
                })
            }, function(){
                $(this).html(function(index,html){
                    return html+'★';
                })
            },function(){
                $(this).html(function(index,html){
                    return html.substring(1,html.length-1); 
                    // 1에서 html.length에서 -1뺀만큼 지우기)
                    // 첫 클릭에 앞에 별이생기고
                    // 두번째 클릭에서 뒤에 별이 생기고
                    // 3번째 클릭에선 앞과 맨뒤에 생긴 별들을 지움
                })
            })
        });

    </script>
</head>
<body>
    <h1>Header-0</h1>
    <h1>Header-1</h1>
    <h1>Header-2</h1>
</body>
</html>​

 

click(), unbind()를 사용해 이벤트 연결과 이벤트 제거하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function(){
           // 이벤트 연결
            $('h1').click(function(){
               $(this) .html('CLICK');
                alert('이벤트가 발생했습니다.');
                // 이벤트 제거
                $(this).unbind(); // 이벤트 발생 후 unbind 실행으로 더이상 클릭이 안됨.
            });
        });

    </script>
</head>
<body>
    <h1>Header-0</h1>
    <h1>Header-1</h1>
    <h1>Header-2</h1>
</body>
</html>​

특정 값을 가져와 출력하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        *{margin:0; padding:0;}
        div{margin:5px;padding 3px; border:3px solid black; border-radius: 10px;}
        
    </style>
    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function(){
           //이벤트 연결
            $('div').click(function(){
                var header = $('h1',this).text(); // h1의 텍스트를 가져옴
                var paragraph = $('p',this).text(); // p의 텍스트를 가져옴
                alert(header + '\n' + paragraph);// 경고창으로 첫줄엔 헤더, 둘째쭐엔 p 값을 출력함
            });
        });

    </script>
</head>
<body>
    <div>
        <h1>Header 1</h1>
        <p>Paragraph</p>
    </div>
    <div>
        <h1>Header 2</h1>
        <p>Paragraph</p>
    </div>
    <div>
        <h1>Header 3</h1>
        <p>Paragraph</p>
    </div>
    
</body>
</html>

번외) canvas 사용하여 선(path) 연결하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
    </style>
    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function(){
           //변수선언
            var canvas = document.getElementById('canvas')// 캔버스는 자바스크립트형식으로 가져와야 함
            var context = canvas.getContext('2d');
            // 이벤트 연결
            $(canvas).toggle(function(event){
                // 위치를 넣기
                var position = $(this).offset(); //this == 마우스 클릭한 곳 좌표 찍기(offset)
                var x = event.pageX - position.left;// x값 얻기
                var y = event.pageY - position.top; // y값 얻기
                // 선을 그린다.
                context.beginPath();// path를 그리겠다고 선언
                context.moveTo(x,y);// x,y 위치를 시작점으로 지정
            }, function(event){
                // 위치를 넣기
                var position = $(this).offset(); //this == 마우스 클릭한 곳
                var x = event.pageX - position.left;// x값 얻기
                var y = event.pageY - position.top; // y값 얻기
                context.lineTo(x,y); // 두번째 선 위치 지정
                context.stroke(); // 선을 그리기
            });
        });

    </script>
</head>
<body>
    <canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>

'공부 > Javascript + jQuery' 카테고리의 다른 글

자바스크립트 03.객체(Object)  (0) 2022.01.04
자바스크립트 02.배열(Array)  (0) 2022.01.04
자바스크립트 var와 let의 차이와 호이스팅  (0) 2022.01.04
Javascript 문제 : 변수문제  (0) 2022.01.02
Javascript - 01. 변수(variable)  (0) 2022.01.02

관련글

댓글

티스토리툴바