하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

7. jQuery 이벤트 처리(2)

페이지 정보

작성자 관리자 댓글 0건 조회 540회 작성일 22-01-09 18:06

본문

7. jQuery 이벤트 처리(2)

실습 : jquery01.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>


</head>

<body>

<input type="text" name="input1" value="아이디"/>

</body>

</html>


1.PNG



실습 : jquery01.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script> 

window.onload = function(){

var aa = document.getElementsByTagName('input')[0].getAttribute('value');

console.log(aa);

var bb = document.getElementsByTagName('input')[0].getAttribute('type');

console.log(bb);

document.getElementsByTagName('input')[0].setAttribute('value', '패스워드');

}

</script>


</head>

<body>

<input type="text" name="input1" value="아이디"/>

</body>

</html>



window.onload = function(){ }은 $(document).ready(function(){ });와 같은 기능이지만, $(document).ready(function(){ });이 먼저 실행된다. 


2.PNG



실습 : jquery01.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script> 

$(document).ready(function(){

var a = $('input').attr('value');

console.log(a);

$('input').attr('value', 'Hello Mobile webApp!!');

});

</script>


</head>

<body>

<input type="text" name="input1" value="아이디"/>

</body>

</html>



3.PNG



실습 : jquery02.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript"> 

window.onload = function(){

document.getElementById("btn1").onclick=function(){

document.getElementById('div1').innerHTML=

document.getElementById('input1').value;

}

}

</script>

</head>

<body>

<input type="text" id="input1"/><br/>

<input type="button" id="btn1" value="버튼1"/>

<input type="button" id="btn2" value="버튼2"/><br/>

<div id="div1"></div>

<ul>

<li>메뉴1</li>

<li>메뉴2</li>

<li>메뉴3</li>

</ul>

</body>

</html>


텍스트상자에 테스트를 입력하고 버튼1을 누른다.


4.PNG



$('#btn2').click(function(){는 $('#btn2').bind("click", function(){ 로 바꾸어 쓸수 있다. 


실습 : jquery02.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript"> 

window.onload = function(){

document.getElementById("btn1").onclick=function(){

document.getElementById('div1').innerHTML=

document.getElementById('input1').value;

}

}

$(document).ready(function(){

$('#btn2').bind("click", function(){

$('#div1').text($('#input1').val());

});

});

</script>

</head>

<body>

<input type="text" id="input1"/><br/>

<input type="button" id="btn1" value="버튼1"/>

<input type="button" id="btn2" value="버튼2"/><br/>

<div id="div1"></div>

<ul>

<li>메뉴1</li>

<li>메뉴2</li>

<li>메뉴3</li>

</ul>

</body>

</html>


텍스트상자에 테스트2를 입력하고 버튼2을 누른다. 


5.PNG



실습 : jquery02.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript"> 

window.onload = function(){

document.getElementById("btn1").onclick=function(){

document.getElementById('div1').innerHTML=

document.getElementById('input1').value;

}

}

$(document).ready(function(){

$('#btn2').bind("click", function(){

$('#div1').text($('#input1').val());

});

$(document).delegate('ul li', 'click', function(){

$('#div1').text($(this).text());

});

});

</script>

</head>

<body>

<input type="text" id="input1"/><br/>

<input type="button" id="btn1" value="버튼1"/>

<input type="button" id="btn2" value="버튼2"/><br/>

<div id="div1"></div>

<ul>

<li>메뉴1</li>

<li>메뉴2</li>

<li>메뉴3</li>

</ul>

</body>

</html>


메뉴1을 누르면 메뉴1이 div에 출력된다.


6.PNG


onchange 이벤트 처리하기


실습 : jquery03.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript"> 

//자바스크립트에서 onchange

window.onload = function(){

document.getElementById("sel1").onchange=function(){

document.getElementById('div1').innerHTML=

document.getElementById('sel1').value;

}

}

$(document).ready(function(){

//$('#sel2').change(function(){

//$('#sel2').bind("change", function(){

$('#sel2').on("change", function(){

$('#div1').text($('#sel2').val());

});

});

</script>

<style>

</style>

</head>

<body>

<select id="sel1">

<option value="1">선택1</option>

<option value="2">선택2</option>

</select>

<select id="sel2">

<option value="1">선택1</option>

<option value="2">선택2</option>

</select><br>

<div id="div1"></div>

</body>

</html>



7.PNG



trigger이벤트 : 이벤트를 강제로 발생시키는 명령 


실습 : jquery04.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){

$('#btn1').click(function(){

$('#test').html("<p>버튼1 click</p>");

$('#btn2').trigger('click');

});

$('#btn2').click(function(){

$('#test').html($('#test').html()+"<p>버튼2 click</p>");

});

});

</script>

<style>

</style>

</head>

<body>

<input type="button" id="btn1" value="버튼1">

<input type="button" id="btn2" value="버튼2">

<div id="test"></div>

</body>

</html>



8.PNG


9.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.