JQuery
- JavaScript를 편리하게 사용하기 위한 라이브러리
- 공식사이트 : JQuery
- 지식: HTML/CSS/JavaScript
- 도구: 크롬 브라우져. 텍스트 에디터
<!DOCUTYPE HTML>
<HTML LANG="KO">
<HEAD>
<META CHARSET="UTF-8">
<TITLE> JQUERY </TITLE>
</HEAD>
<BODY>
<P> JQUERY 연습 </P>
</BODY>
</HTML>
</body>
</html>
JQuery 를 사용해 보자.
- JQuery를 불러오자.
호출하는 방법.
<script>
$(document).ready(function() {
});
</script>
줄여서 호출하는 방법.
<script>
$(function() {
});
</script>
실습으로 p 태그 요소를 빨갛게 바꿔보자.
<!DOCUTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> JQuery </title>
</head>
<body>
<p> JQuery 연습 </p>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
// $(document).ready(function() {
$(function() {
$('p').css('color','red').hide('slow');
});
</script>
</body>
</html>
셀렉터: 처리대상이 되는 DOM요소를 지정하능 방법
- 메쏘드: 처리
- jq2-1에서는 'p' 가 셀렉터, .css이후가 메쏘드가 된다.
- 메쏘드체인 : 여러 처리를 함께 붙여서 처리하는 것
id나 class를 지정해보자.
- 셀렉터.메쏘드 형식으로 지정
- $(" "); 형식으로 지정
- html 요소
- $("p");
- $("h1");
- $("ul");
- id 요소: #을 붙임
- class 요소 : .을 붙임
- $(".item");
- $(".dan");
<!DOCUTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> JQuery </title>
</head>
<body>
<p> JQuery 연습 </p>
<ul>
<li>0</li>
<li class="dan">1</li>
<li class="dan">2</li>
<li>
3
<ul id="sub">
<li> 3-0 </li>
<li> 3-1 </li>
<li class="item"> 3-2 </li>
<li class="item"> 3-3 </li>
<li> 3-4 </li>
</ul>
</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
// 셀렉터.메쏘드
// $("")
// html 요소 p, h1, ul
// id 요소 #main
// class .item
$("#sub").css('color','red');
$(".item").css('color','green');
$(".dan").css('color','blue');
$("p").css('color',"yello").hide('slow');
});
</script>
</body>
</html>
셀렉터를 좀 더 사용해 보자.
- 셀렉터.메쏘드.
- '#' '.''
- < 바로 아래 자식 요소>
- ex) id (main)의 item만 빨갛게 바꾼다. $("#main > .item").css('color'.'red');
- 그다음 요소
- ex) 복수의 item을 빨갛게 바꾼다. $("#main .item").css('color','red');
- , 복수의 요소
- p 와 item을 빨갛게 바꾼다. $("p, .item").css('color','red');
- 인접한 요소
- item와 item으로 인접한 요소에서만 빨깧게 바꾼다. $(".item + .item").css('color','red');
필터를 사용해 보자.
- 셀렉터 기법에 필터를 사용해 보자.
- 셀렉터.메쏘드
- 필터
- :eq()
- :gt(), :lt()
$("#sub > li:eq(2)").css('color','red');
- :even, :odd
$("#sub > li:odd").css('color','red');
- :contains() 내용 중에 4가 들어 있는 것을 빨깧게 바꾼다.
$("#sub > li:contains('4')").css('color','red');
- :first, :last
$("#sub > li:last").css('color','red');
메쏘드를 사용해서 DOM요소를 지정
- parent(), children()
$("#sub").parent().css('color','red'); $("#sub").children().css('color','red');
- next(), prev()
$("#sub > li:eq(2)").prev().css('color','red');
- siblings()
$("#sub > li:eq(2)").siblings().css('color','red');
속성 셀렉터를 사용해 보자.
- a href라는 속성을 바꾸어 줄수 있다.
- = 같은 것 =
- != 같지 않은 것
- *= 포함하는 것
- ^= 처음 인것
- $= 마지막 인것
css, addClass/removeClass
attr, data를 사용해 보자.
- html속성이나, 사용자 속성을 메쏘드로 다룰때 사용.
- attr
- data
Google console.log($('a').data('sitename'));
태그의 내용을 조작해 보자.
요소를 추가해 보자.
<!DOCUTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> JQuery </title>
</head>
<body>
<p> JQuery 연습 </p>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
var li = $('<li>').text('list added');
// $('ul > li:eq(1)').before(li);
// li.insertBefore($('ul > li:eq(1)'));
// $('ul').prepend(li);
// $('ul').append(li);
li.appendTo($('ul'));
});
</script>
</body>
</html>
시각효과를 사용해 보자.
이벤트를 사용해 보자.
- click 시
- mouseover, mousemove
$(function() { $('#box').click(function() {
alert("hi");
}); $('#box')
// 박스안으로 마우스가 들어오면 녹색으로
.mouseover(function() {
$(this).css('backgroud','green');
})
// 박스안에 마우스가 나가면 빨간색으로
.mouseout(function() {
$(this).css('background','red');
})
// 박스안에 들어가면 마우스 위치가 숫자로 .mousemove(function(e) { $(this).text(e.pageX); }); });
focus, blur, change를 사용해보자.
- id에 해당하는 함수를 이벤트를 설정
- focus : 활성화 되었을 때
- blur : 비활성화 되었을 때
- change : 내용이 바뀌었을 때
<body>
<input type="text" id="name">
<select id="members" name="members">
<option>kim </option>
<option>lee </option>
<option>cho </option>
</select>
<script>
$(function() {
// focus, blur, change
$('#name')
.focus(function() {
$(this).css('background','red');
})
.blur(function() {
$(this).css('background','white');
});
$('#members').change(function(){
alert('changed !');
});
});
on 메소드를 사용해 보자.
- 버튼을 만들고 , 클릭하면 P요소가 생성되는것
$(function() {
$('button').click(function() {
var p = $('<p>').text('add!!').addClass('add');
$(this).before(p)
});
- 클릭하면 지워지는 것은 add 클래스가 없기 때문에 되지 않는다.
$('.add').click(function() {
$(this).remore();
});
});
- 따라서 body를 지정하고 on 메소드를 이용한다.
- 요소를 클릭하면 adder요소가 사라진다.
$('body').on('click','.adder',function() {
$(this).remove();
});
Ajax
비동기 통신을 해보자.
- Asynchronous 비동기
- 처리가 끝나기 전에 다른 처리를 시작함.
load
- 예시에서 result에 대한 load가 먼저 시작하지만,
- 비동기로 message에 대한 처리도 시작된다. 하지만
- 이때는 more.html이 없기 때문에 빨간색으로 바뀌지 않는다.
$('button').click(function() {
$('#result').load('more.html');
$('#message').css('color','red');
});
- 이것을 수정해서 message에 대한 function을 나중에 호출하도록 하면 된다.
$('button').click(function() {
$('#result').load('more.html', function());
$('#message').css('color','red');
});
// $('#message').css('color','red');
get
- $.post : 갱신할때
- $.get : 읽어올때
- JSON을 이용해서 브라우저 입력한 값을 서버에서 문자수를 헤아려
- 다시 브라우저에서 출력해보자.
- great.php
<?php
// echo htmlspecialchars("hi! " , $_GET['name'], ENT_QUOTE, "utf-8");
$rs = array(
"message" => echo htmlspecialchars("hi! " , $_GET['name'], ENT_QUOTE, "utf-8"),
"length" => stren($_GET['name'])
);
header('Content-type: Application/json; charset=utf-8');
댓글 없음:
댓글 쓰기