직무교육 16일차(jQuery)

봄봄이ㅤ 2017. 8. 3. 09:04

2017. 8. 3. 09:04

[TRAVERSING]

.end();

- 메소드 체인에서 이전요소로 돌아간다.

('ul').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');

- ul태그에서 foo를 찾아서 배경색을 red로 바꾼 후, end()를 만나 foo가 아닌 ul태그를 재선택한 후 bar를 찾아 배경색을 green을 바꾼다.

[MANIPULATION]

.append()

- selector의 child로 추가된다.

$('.container').append($('#myp'));

- id myp를 .container의 child로 이동시켜 추가한다.

.after() : selector 다음에 sibling(형제관계)로 추가된다.

.before() : selector 이전에 sibling(형제관계)로 추가된다.

* 동급으로 추가해주고 싶으면 .after() / .before() 사용

.insertBefore()

$('h2').insertBefore($('.container'));

- h2가 .container 앞쪽으로 재배치된다.

.insertAfter()

$('h2').insertAfter($('.container'));

- h2가 .container 뒤쪽으로 재배치된다.

.replaceAll()

$('<h1>replace data</h1>').replaceAll('.inner');

- .inner 내용이 <h1>replace data</h1>로 바뀐다.

- CSS에서 h1 스타일 지정되어있으면 적용된다.

.wrap()

$('p').wrap('<div class="new"></div>')

- p태그가 <div class="new"></div>로 감싸진다.

- p태그가 여러개이면 하나씩 개별적으로 각각 <div></div>로 감싸진다.

.wrapAll()

$('p').wrapAll('<div class="new"></div>')

- p태그가 <div class="new"></div>로 감싸진다.

- p태그가 여러개이면 한꺼번에 <div></div>로 감싸진다.

.wrapInner()

$('p').wrapInner('<div class="new"></div>');

- p태그 안쪽으로 <div class="new"></div>가 생긴다.

.addClass()

$('#mydiv').addClass('myclass');

- mydiv에 class="myclass" 속성을 추가한다.

.removeClass()

$('#mydiv').removeClass('myclass');

- mydiv에 class="myclass" 속성을 제거한다.

[EVENTS]

<!DOCTYPE html>

<head>

<title>Title</title>

function init() {

//방법1

/*mybtn.onclick = function () {

alert('a');

}*/

//방법2

/*mybtn.addEventListener("click", function () {

alert('b');

})*/

//방법3(btnClick 함수 필요)

//mybtn.onclick = btnClick;

//방법4(btnClick 함수 필요)

//mybtn.addEventListener("click", btnClick);

//방법5(btnClick 함수 필요)

//$('#mybtn').click(btnClick);

//방법6(btnClick 함수 필요)

//$('#mybtn').on('click', btnClick);

}

function btnClick() {

alert('c');

}

</script>

</head>

<button id="mybtn">button</button>

</body>

</html>

$(document).ready(init);

$(init);

- 세가지 방법 모두 결과는 같다.

$(document).ready(function () {

})

$(function () {

})

- 두가지 방법 모두 결과는 같다.

.click()

$(function () {

$('div').click(function () {

alert($(this).text()); //alert(this.innerText)

})

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

alert('call...');

})

- div 내용 click시 alert창에 div 내용이 뜬다.

- mybtn click시 alert창에 call....이 뜬다.

$(document).ready(init);

function init() {

$('#mydiv').mousedown(function (event) {

console.log(event.clientX, event.clientY);

})//1

$('#mydiv').mousemove(function (event) {

console.log(event.clientX, event.clientY);

})//2

$('#mydiv').on('mousemove', function (event) {

console.log(event.clientX, event.clientY);

})//3

$('#mydiv').hover(function () {

$(this).css('background-color', 'blue')

}, function () {

$(this).css('background-color', 'yellow')

})//4

}

#1> mydiv 클릭했을 경우 발생한다.

#2> mydiv 클릭했다 뗐을 경우 발생한다.

#3> 2번과 결과는 같다.

#4> 마우스 hover됐을 경우 발생한다.

<!DOCTYPE html>

<head>

<title>Title</title>

$(function () {

$('#mydiv').click(cfn)

})

function cfn() {

alert('call')

}

function rfn() {

$('#mydiv').off("click", cfn)

}

function afn() {

$('#mydiv').on("click", cfn)

}

</script>

</head>

<body>

<div id="mydiv">mydiv</div><br>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

$(function () {

//$('li').click(cfn)

$(document).on('click', 'li', cfn)

})

function cfn() {

alert('call')

}

function afn() {

$('ul').append('<li>추가</li>')

}

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

table{

width: 400px;

text-align: center;

}

</style>

$(function () {

$(document).on("click", ".bdel", function () {

$(this).parent().parent().remove();

})

$(document).on("click", ".bmodify", function () {

$(this).parent().prev().prev().attr('contenteditable', true);

$(this).parent().prev().attr('contenteditable', true);

$(this).text('완료');

})

function addFn() {

$('#mytable').append('<tr><td>테스트</td><td>20</td>' +

'<td><button class="bmodify">수정</button></td>' +

'<td><button class="bdel">삭제</button></td></tr>');

}

</script>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

$(function () {

$('[name="grade"]').click(function () {

alert($(this).val())

})

$('#mysel').change(function () {

alert($(this).val())

})

$('#myin').keyup(function () {

$('#myin1').val($(this).val());

})

</script>

</head>

<body>

이름 : <input id="myin" type="text"><br>

이름 : <input id="myin1" type="text"><br>

</select>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

img{

width: 150px;

height:150px;

}

</style>

$(function () {

$(document).on("click", "img", function () {

$('#wrap').prepend($(this));

})

/*$("img").click(function () {

$('#wrap').prepend($(this))

})*/

})

</script>

</head>

<body>

</div>

</body>

</html>

[EFFECTS]

.hide()

$('#myimg').hide(3000, function () {

console.log('end...')

$('#mydiv').text('hide~~~~')

})

- 나타난다.(3초동안 서서히).

.show()

$('#myimg').show(3000, function () {

console.log('end...')

$('#mydiv').text('hide~~~~')

})

- 나타난다.(3초동안 서서히).

.toggle()

$('#myimg').toggle(2000);

- 숨겨져있으면 보여지게되고, 보여지고 있으면 숨겨진다.

.slideDown()

$('#mydiv').slideDown(1000);`

.slideUp()

$('#mydiv').slideUp(1000);`

.animate()

imgattr = {width:"300px", height:"300px", left:"100px"}

$('#myimg').animate(imgattr, 2000);

- imgattr 속성값으로 움직인다.(2초동안 서서히)

내용보기 text 클릭시 아래 내용 나오는 예제

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

#title, #panel{

background-color: #ffd8c5;

color: white;

border-radius: 10px;

border:2px solid #ff9490;

text-align: center;

}

#panel{

display: none;

}

</style>

var isdown = false;

$(function () {

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

if(isdown){

$('#panel').slideUp(1000);

isdown=false;

}else{

$('#panel').slideDown(1000);

isdown=true;

}

})

</script>

</head>

<body>

<div id="panel">나는 자랑스런 태극기 앞에

조국과 민족의 무궁한 영광을 위하여

</div>

</body>

</html>

.removeAttr();

$(this).removeAttr('style');

- style 속성을 제거한다.

이미지 클릭시 이미지 확대되는 예제

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

img{

position: relative;

width: 150px;

height:150px;

}

</style>

var prevElm;

$(function () {

$('img').click(function () {

$(prevElm).removeAttr('style');

imgattr = {width:"300px", height:"300px", left:"100px"}

$(this).animate(imgattr, 1000, function () {

prevElm = this;

})

</script>

</head>

<body>

</div>

</body>

</html>

2017-08-02 과제

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

#wrap{

padding: 4%;

margin:auto;

text-align: center;

}

body{

background-color: gainsboro;

}

img{

position: relative;

width: 200px;

height:400px;

vertical-align: middle;

}

.story{

border: 1px solid;

padding: 2%;

}

div.m1,div.m2, div.m3, div.m4, div.m5{

margin: auto;

width: 80%;

display: none;

padding: 0 2% 2% 2%;

border: 1px solid;

}

.aaa{

width: 150px;

height:150px;

}

.one{

text-align: center;

}

</style>

var prevElm;

var cn;

$(function () {

$('[src^="image/m"]').click(function () {

$(prevElm).removeAttr('style');

/*$(#wrap).append($(this));

* $('img:eq(1)').after($(this));*/

$('img:eq(2)').before($(this));

if($('img:eq(0)')){

$('img:eq(3)').before($(this));

}

imgattr = {width:"250px", height:"500px"}

$(this).animate(imgattr, 500, function () {

prevElm = this;

cn = prevElm.className;

$("div."+cn).show();

})

$("div."+cn).hide();

})

</script>

</head>

<body>

</div><br>

택시운전사

<h2>영화이미지</h2>

</div>

<h2>영화줄거리</h2>

1980년 5월, 서울 택시운전사.<br>

“광주? 돈 워리, 돈 워리! 아이 베스트 드라이버”<br>

택시운전사 만섭(송강호)은 외국손님을 태우고 광주에 갔다 통금 전에 돌아오면<br>

밀린 월세를 갚을 수 있는 거금 10만원을 준다는 말에<br>

독일기자 피터(토마스 크레취만)를 태우고 영문도 모른 채 길을 나선다.<br>

광주 그리고 사람들. “모르겄어라, 우덜도 우덜한테 와 그라는지…”<br>

어떻게든 택시비를 받아야 하는 만섭의 기지로 검문을 뚫고 겨우 들어선 광주.<br>

위험하니 서울로 돌아가자는 만섭의 만류에도<br>

피터는 대학생 재식(류준열)과 황기사(유해진)의 도움 속에 촬영을 시작한다.<br>

그러나 상황은 점점 심각해지고 만섭은 집에 혼자 있을 딸 걱정에 점점 초조해지는데…<br>

</div>

군함도

<h2>영화이미지</h2>

</div>

<h2>영화줄거리</h2>

1945년 일제강점기.<br>

경성 반도호텔 악단장 ‘강옥’(황정민)과 그의 하나뿐인 딸 ‘소희’(김수안).<br>

그리고 종로 일대를 주름잡던 주먹 ‘칠성’(소지섭), 일제 치하에서 온갖 고초를 겪어온 ‘말년’(이정현) 등<br>

각기 다른 사연을 품은 조선인들이 일본에서 돈을 벌 수 있다는 말에 속아 군함도로 향한다.<br>

하지만 그들이 함께 탄 배가 도착한 곳은 조선인들을 강제 징용해 노동자로 착취하고 있던 ‘지옥섬’ 군함도였다.<br>

영문도 모른 채 끌려온 조선인들이 해저 1,000 미터 깊이의 막장 속에서<br>

매일 가스 폭발의 위험을 감수하며 노역해야 하는 군함도.<br>

강옥은 어떻게 하든 일본인 관리의 비위를 맞춰 딸 소희만이라도 지키기 위해 온갖 수를 다하고,<br>

칠성과 말년은 각자의 방식으로 고통스런 하루하루를 견뎌낸다.<br>

한편 전쟁이 막바지로 치닫자 광복군 소속 OSS 요원 ‘무영’(송중기)은<br>

독립운동의 주요인사 구출 작전을 지시 받고 군함도에 잠입한다.<br>

일본 전역에 미국의 폭격이 시작되고 일본의 패색이 짙어지자<br>

일본은 군함도에서 조선인에게 저지른 모든 만행을 은폐하기 위해 조선인들을 갱도에 가둔 채 폭파하려고 한다.<br>

이를 눈치 챈 무영은, 강옥, 칠성, 말년을 비롯한 조선인 모두와 군함도를 빠져나가기로 결심하는데...!<br>

지옥섬 군함도, 조선인들의 목숨을 건 탈출이 시작된다!<br>

</div>

슈퍼배드3

<h2>영화이미지</h2>

</div>

<h2>영화줄거리</h2>

전 세계를 점령할 놈들이 온다!<br>

최고의 악당만을 보스로 섬기는 ‘미니언’<br>

가족을 위해 악당 은퇴를 선언한 ‘그루’<br>

그루의 배신에 실망한 미니언들은<br>

스스로 악당이 되기 위해 그루를 떠난다.<br>

한편, 같은 얼굴 다른 스펙의 쌍둥이 동생 ‘드루’의 등장으로 인해<br>

그루는 자신이 역사상 가장 위대한 악당 가문의 후예임을 알게 되고,<br>

거부할 수 없는 슈퍼배드의 운명을 따르게 되는데…<br>

돌아온 그루와 미니언들은<br>

다시 함께할 수 있을까?<br>

</div>

명탐정코난:진흥의 연가

<h2>영화이미지</h2>

</div>

<h2>영화줄거리</h2>

오사카와 교토에서 발생한 의문의 사건들!<br>

헤이지와 카즈하, 그리고 모미지의 운명은 과연?!<br>

갑작스러운 폭발로 대혼란에 빠지고 만 오사카의 한 TV 방송국.<br>

마치 테러와도 같은 사건. 하지만 범인의 정체는 물론 범행 목적조차 파악되지 않는 상황이 계속되고,<br>

혼란 속에서 코난과 친구들은 헤이지의 약혼자임을 주장하며 당돌하게 대시하는 카루타(일본의 전통 카드 게임)<br>

대회 고교 챔피언 오오카 모미지를 만나 더욱 당황한다.<br>

한편, 방송국 폭발과 동시에 교토에서는 카루타 대회 2년 연속 우승자가 살해당하는 사건이 발생하고,<br>

현장의 TV에서는 다름 아닌 모미지의 경기 모습과 함께 한편의 시가 고요히 울려 퍼지고 있었는데......<br>

</div>

덩케르트

<h2>영화이미지</h2>

</div>

<h2>영화줄거리</h2>

"우린 끝까지 싸울 것이다"

살아남는 것이 승리다!

해변: 보이지 않는 적에게 포위된 채 어디서 총알이 날아올지 모르는 위기의 일주일<br>

바다: 군인들의 탈출을 돕기 위해 배를 몰고 덩케르크로 항해하는 하루<br>

하늘: 적의 전투기를 공격해 추락시키는 임무, 남은 연료로 비행이 가능한 한 시간<br>

“우리는 해변에서 싸울 것이다. 우리는 상륙지에서 싸울 것이다. 우리는 들판에서 싸우고 시가에서도 싸울 것이다. 우리는 끝까지 싸울 것이다”<br>

</div>

</body>

</html>

저작자표시

'SK고용디딤돌' 카테고리의 다른 글

직무교육 18일차(jQuery Mobile) (0)	2017.08.07
직무교육 17일차(jQuery) (0)	2017.08.04
직무교육 15일차(jQuery) (0)	2017.08.02
직무교육 14일차(HTML5 API) (0)	2017.08.01
직무교육 13일차(HTML5 API) (0)	2017.07.26

동그리동동닷컴

직무교육 16일차(jQuery)

'SK고용디딤돌' 카테고리의 다른 글

+ Recent posts

티스토리툴바