[TIL.21.1.7 ~ 21.1.14] JQuery 연습
[21.1.11]
Jquery는 오픈소스 기반의 자바스크립트(JavaScript) 라이브러리이다. 그에 따라 이를 활용하기 위해서는 자바스크립트 언어의 기초지식을 필요로 하고 HTML과 CSS 활용과도 많은 연관이 있다.
제이쿼리는 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있도록 해준다.
또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있다.
JQuery 사용준비
- 공식 웹사이트 : jquery.com/
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
위 링크를 통해 공식 웹사이트에 접속하여 파일을 다운로드 하여 사용한다.
- JQuery CDN 활용
CDN 이란 Content Delivery Network의 약자로 CDN 선언 시 특정 서버에 트래픽이 집중되지 않고, 컨텐츠를 자동으로 가장 가까운 서버에서 다운로드하도록 하여 직접 파일을 다운로드 받지 않고도 사용할 수 있게 된다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>해당 코드를 아래의 코드를 CDN으로 선언해주면 제이쿼리(jQuery)를 항상 최신 버전으로 사용할 수 있다.
연습하기
$(function(){
// html 문서가 웹브라우저에 로드 되면 여기부터 실행된다.
}- alert : 경고창 출력
<script>
$(function(){
data = "hello" ;
alert(data) ;
})
</script>data를 입력받아 사용자에게 보여주며 경고창을 출력한다.
- alert에 confirm 입력시
<script>
$(function(){
var result = confirm("확인 또는 취소");
alert(result);
if(result==true) {
$('#target').text("확인 선택함")
}
})
</script>
</head>
<body>
<h1 id = 'target'> 확인 선택하면 여기바뀜 </h1>
</body></html>
사용자가 확인버튼 클릭시 true반환
사용자가 취소버튼 클릭시 false반환
id = target 인곳을 "확인선택함" 이라는 텍스트로 변경
- JQuery 기본
| id Selector | $("#target_id") | id가 target_id인 element |
| class Selector | $(".target_item") | class가 target_class인 element |
| element(tag) Selector | $("h1,h2,h3...") | tag_name이 (h1,h2,h3...)인 element |
| 전체 Selector | $("*") | 모든 element |
<script>
$(function(){
$('#target').css('color','orange'); // id = target 인 element 색변경
$('#change').click( //id = change 인 element 클릭시
function(){
$('h1,p').css('color','Orange') //h1태그, p테그 색변경
}
)
});
</script>$('[xxxx]') : xxxx 속성을 가진 모든 엘리먼트 , 예를들어 $('[name]') : name 속성을 가진 모든 엘리먼트
$('[xxxx="yyyy"]') : xxxx속성이 yyyy인 모든 엘리먼트, 예를들어 $('[type = "text"]') : type = "text"인 모든 엘리먼트
$('zzzz[xxxx="yyyy"]') : zzzz태그이면서 xxxx속성이 yyyy인 모든 엘리먼트,
예를들어 $('input[type = "button"]') : 태그명이 input이면서 type = "button"인 모든 엘리먼트
$('.aaaa[xxxx="yyyy"]') : aaaa클래스 이면서 xxxx속성이 yyyy인 모든 엘리먼트,
*실습문제4*
<!-- 버튼이 더블클릭되면 p태그를 hide 되도록하세요. 단 hide(1000)을 호출하여 천천히 사라지게 합니다. -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>$(function(){
$('#hide').dblclick(function(){
$('p').hide(1000);
});
});
</script>
<title></title>
</head>
<body>
<button id ="hide">Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
</body>
</html>*실습문제5*
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
div {color :red;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>$(function(){
$('input[type=button]').click(function(){
name = $('#name').val();
address = $('#address').val();
phone = $('#phone').val();
alert("입력하신 정보는 다음과 같습니다.\n"+"이름 :"+ name+" 주소 :"+ address+" 전화번호 :"+ phone);
$('#result').html(name+"님 회원가입이 완료되었습니다");
});
});
</script>
</head>
<body>
<fieldset>
<legend>회원가입</legend>
<table>
<tr><td>이름</td><td><input type="text" id="name"></td></tr>
<tr><td>주소</td><td><input type="text" id="address"></td></tr>
<tr><td>전화번호</td><td><input type="text" id="phone"></td></tr>
</table>
</fieldset>
<input type="button" value="화원가입" >
<div id="result" > </div>
</body>
</html>
*실습문제 6*
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
div{color:red;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>$(function(){
$('#plus').click(function(){
var a = $('#f1').val();
var b = $('#f2').val();
a = Number(a);
b = Number(b);
var result = a+b;
$('#f3').val(result);
})
$('#minus').click(function(){
var a = $('#f1').val();
var b = $('#f2').val();
a = Number(a);
b = Number(b);
var result = a-b;
$('#f3').val(result);
})
$('#multiply').click(function(){
var a = $('#f1').val();
var b = $('#f2').val();
a = Number(a);
b = Number(b);
var result = a*b;
$('#f3').val(result);
})
$('#divide').click(function(){
var a = $('#f1').val();
var b = $('#f2').val();
a = Number(a);
b = Number(b);
var result = a/b;
$('#f3').val(result);
});
});
</script>
<title></title>
</head>
<body>
<table>
<h1> 연산 시스템 </h1>
<b> 아래 항목을 채워주세요 </b>
<form name="theForm" >
<tr>
<td> 피연산자 1 </td>
<td > <input type="text" id="f1" /> </td>
</tr>
<tr>
<td> 피연산자 2 </td>
<td> <input type="text" id="f2" /> </td>
</tr>
<tr>
<td> 결과 값 </td>
<td> <input type="text" id="f3" /> </td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="+" id="plus" />
<input type="button" value="-" id="minus" />
<input type="button" value="*" id="multiply" />
<input type="button" value="/" id="divide" />
</td></tr>
</table>
</body>
</html>