동그리동동닷컴

[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

[jQuery]

· 자바스크립트 라이브러리

- 자바스크립트를 사용하기 쉽게 포장해놓은 것이다.

- cross browser - 브라우저 종류 상관없이 자바스크립트를 지원하기 위한 목적이다.

- DOM을 쉽게 다루도록 포장해놓은 것이다.

- chane식 메소드 방식이다. (DOM객체(객체).함수.함수.함수)

· jQuery 사용 방법

1) cdm 방식

https://code.jquery.com/jquery-3.2.1.min.js

2) 설치 방식

http://jquery.com/download/

Download the compressed, production jQuery 3.2.1

<!DOCTYPE html>

<head>

<title>Title</title>

function $(sel) {

domObj = document.querySelector(sel);

return domObj;

}

function fn() {

$('#mydiv').innerText="korea";

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function $(sel) {

domObj = document.querySelector(sel);

domObj.text = function (txt) {

this.innerText=txt;

}

return domObj;

}

function fn() {

$('#mydiv').text('korea2');

}

</script>

</head>

<body>

</body>

</html>

· jQuery 문장의 구조

- $('선택자').메소드

- $(객체).메소드

- $('태그').메소드

· jQuery cheat sheet

https://oscarotero.com/jquery/

<!DOCTYPE html>

<head>

<title>Title</title>

function fn(){

$('#mydiv').text('korea');

s=$('#mydiv').text();//id가 mydiv인 div의 값을 받아온다.

alert(s);

$('#mydiv').css('color', 'blue').text('하하하').css('background-color', 'yellow');

//체인방식으로 여러가지 함수를 사용할 수 있다.

$('#mydiv').css({'color':'red', 'background-color':'yellow'})

//속성을 여러가지 주고 싶을 경우에는 JSON 형식으로!

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('*').css('color', 'red');

$('div').css('color', 'red');

$('.myp').text('korea');

$('p, div').css('color', 'red');

$('p.myp').css('color', 'red');

$('div li').css('color', 'red');

$('ul>li').text('korea');

}

</script>

</head>

<body>

<h1>Title</h1>

<div>

<ul>

</ul>

</div>

<ul>

</ul>

<button onclick="fn()">check</button>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('#myli + li').css('color', 'red');//id가 myli의 오른쪽 옆 형제만

$('#myli ~ li').css('color', 'red');//id가 myli의 오른쪽 형제 모두

$('[src]').css('border', '2px solid red');//src 속성이 있는 것

$('[src="image/a.jpg"]').css('border', '2px solid red');//src 속성이 image/a.jpg인 것

$('[src*="jpg"]').css('border', '2px solid red');//src 속성에 jpg가 있는 것

$('[src^="image"]').css('border', '2px solid red');//src 속성이 image로 시작하는 것

$('[src$="jpg"]').css('border', '2px solid red');//src 속성이 jpg로 끝나는 것

$('p[class]').css('color', 'red');//p태그에 class 속성이 있는 것

}

</script>

</head>

<body>

<ul>

</ul>

<button onclick="fn()">button</button>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('li:even').css('color', 'red');

$('li:odd').css('color', 'red');

$('li:first').css('color', 'red');

$('li:last').css('color', 'red');

$('li:eq(8)').css('color', 'red');

$('li:gt(2)').css('color', 'red');//inded2보다 큰 것->index3부터

$('li:lt(3)').css('color', 'red');//index3보다 작은 것 ->index0~2

$('li:not(:first)').css('color', 'red');//first가 아닌 것

$('li:not(:eq(2))').css('color', 'red');//index2가 아닌 것

$('li:contains("hello")').css('color', 'red');//li에 text가 hello인 것

$('div:has(span)').css('color', 'red');//div태그에서 span태그를 가지고 있는 것

$('li:nth-child(2n)').css('color', 'red');

}

</script>

</head>

<body>

<ul>

<li>fruit0</li>

<li>fruit1</li>

<li>hello</li>

<li>fruit3</li>

<li>fruit4</li>

<li>fruit5</li>

<li>fruit6</li>

<li>fruit7</li>

<li>fruit8</li>

<li>fruit9</li>

</ul>

<button onclick="fn()">check</button>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

num1=$('#num1').val();//id num1의 값 받아오기

num2=$('#num2').val();//id num2의 값 받아오기

result = Number(num1)+ Number(num2);//문자이기때문에 숫자로 변환 후 덧셈

$('#mya').text(result);//값 입력할 때 text

}

</script>

</head>

<body>

숫자1 : <input id="num1" type="number"><br>

숫자2 : <input id="num2" type="number"><br>

결과 : <a id="mya"></a><br>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

arr=[10,20,30,40];

arr.forEach(function (v, i) {

console.log(v, i);

})

$.each(arr,function (i, v) {

console.log(i, v);

})

j={'name':'홍길동', 'age':20}

$.each(j, function (i, v) {

console.log(i, v);

})

function fn() {

liarr = document.querySelectorAll('li')

for(n=0; n<liarr.length; n++){

console.log(liarr[n].innerText);

}

$('li').each(function (i, v) {

console.log(i, v);

console.log(v.innerText);

console.log($(v). text());

console.log($(this).text());

})

}

</script>

</head>

<body>

<ul>

</ul>

<button onclick="fn()">button</button>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn1() {

a = $('[name="hobby"]:checked').val();

$('#mydiv1').text(a);

}

function fn2() {

var s=""

s = $('[type="checkbox"]:checked').each(function (i, v) {

//console.log($(v).val());

s += $(v).val();

$('#mydiv2').text(s);

});

}

function fn3() {

b = $('[name="job"]>option:selected').val();

$('#mydiv3').text(b);

}

</script>

</head>

<body>

hobby1 : <a id="mydiv1"></a>

수영 : <input type="radio" value="수영" name="hobby"><br>

낚시 : <input type="radio" value="낚시" name="hobby"><br>

영화 : <input type="radio" value="영화" name="hobby"><br>

</fieldset>

<button onclick="fn1()">button1</button><br><br>

hobby2 : <a id="mydiv2"></a>

수영 : <input type="checkbox" value="수영"><br>

낚시 : <input type="checkbox" value="낚시"><br>

영화 : <input type="checkbox" value="영화"><br>

</fieldset>

<button onclick="fn2()">button2</button><br><br>

company : <a id="mydiv3"></a><br>

</select>

<button onclick="fn3()">button3</button><br><br>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('img').attr('src', 'image/b.jpg');

s = $('img').attr('src');//img태그의 src가 어떤 값인지 궁금할 때

alert(s);

s = $('#mycheck').attr('checked');

alert(s)

$('#mycheck').prop('checked', false);//버튼누르면 체크됨

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('#mydiv1').html('<h1>korea</h1>');//id mydiv1 내용을 korea로 변경

/*추가*/

$('#mydiv1').append('<h1>korea</h1>');//버튼 누를 때마다 id mydiv1 다음에 korea 추가

//$('<h1>korea</h1>').appendTo('#mydiv1');

/*h1 = document.createElement('h1');

h1.innerText='korea';

mydiv1.appendChild(h1);*/

$('#mydiv1').prepend('<h1>korea</h1>');//버튼 누를 때마다 id mydiv1 앞쪽에 korea 추가

/*삭제*/

$('<h1>korea</h1>').prependTo('#mydiv1');

$('#mydiv2').remove();//id mydiv2 DOM 삭제

$('div').remove();//div 전체 삭제

$('#mydiv2').empty();//id mydiv2의 내용 삭제

$('#mydiv2').hide();//style="display:none;" 다시 나타나게 하려면 $('#mydiv2').show();

}

</script>

</head>

<body>

<button onclick="fn()">button</button>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

name = $('[type = "text"]').val();

age = $('[type = "number"]').val();

if(name !="" && age != "") {//입력칸 공백 아닐 경우에만 테이블에 추가

$('#mytable').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>')

}else{

alert("입력해주세요.");

}

$('[type = "text"]').val("");

$('[type = "number"]').val("");

}

function rfn() {

$('tr:gt(0)').remove();//index 0보다 큰 row 삭제

}

</script>

</head>

<body>

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

나이 : <input type="number"><br>

<tr>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

$('li:first').css('color', 'red');

//$('li').first().css('color', 'red');

$('li:eq(1)').css('color', 'red');

//$('li').eq(1).css('color', 'red');

$('div.mydiv').css('color', 'red');

//$('div').filter('.mydiv').css('color', 'red');

$('div:not(.mydiv)').css('color', 'red')

//$('div').not('.mydiv').css('color', 'red')

}

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

function fn() {

/*id mydiv의 자식인 p*/

$('#mydiv > p').css('color', 'red');

//$('#mydiv').children('p').css('color', 'red');

/*id mydiv의 자식+후손인 p*/

$('#mydiv p').css('color', 'red');

//$('#mydiv').find('p').css('color', 'red');

/*id myp의 형제들*/

$('#myp').next().css('color', 'red');//id myp의 다음에 있는 것

$('#myp').next().next().css('color', 'red');//id myp의 다음다음에 있는 것

$('#myp').nextAll().css('color','red');//id myp의 다음에 있는 전부

$('#myp').prev().css('color', 'red');//id myp의 이전에 있는 것

/*id myp의 부모*/

$('#myp').parent().css('color', 'red');

}

</script>

</head>

<body>

test1

<div>

<p>KOREA</p>

</div>

<p>check1</p>

<p id="myp">check2</p>

<p>check3</p>

<p>check4</p>

</div>

</body>

</html>

저작자표시

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

직무교육 17일차(jQuery) (0)	2017.08.04
직무교육 16일차(jQuery) (0)	2017.08.03
직무교육 14일차(HTML5 API) (0)	2017.08.01
직무교육 13일차(HTML5 API) (0)	2017.07.26
직무교육 12일차(DB연동) (1)	2017.07.25

아파치서버

#1 context.xml <Context allowCasualMultipartParsing="true">

#2 server restart

BLOB : 이미지나 동영상 데이터 타입

이미지삽입(<form action="imageInsert.jsp" method="POST" enctype="multipart/form-data">) -> 서버(insert)

이미지보기 <- 서버(select)

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

function fn(){

xmlHttp = new XMLHttpRequest();

xmlHttp.onreadystatechange = on_ready;

xmlHttp.open("GET", "imageSelect.jsp");

xmlHttp.send();

}

function on_ready(){

if(xmlHttp.readyState==4 && xmlHttp.status==200){

data = xmlHttp.responseText;

data = JSON.parse(data);

data.forEach(function(v, i){

img = document.createElement("img");

img.style.width = "300px";

img.style.height = "300px";

img.src = v.img;

myimg.append(img);

})

}

</script>

</head>

<body>

</body>

</html>

Server-Sent Event

server쪽에서 client쪽으로 일방적으로 데이터 보내는 것이다.

저작자표시

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

직무교육 16일차(jQuery) (0)	2017.08.03
직무교육 15일차(jQuery) (0)	2017.08.02
직무교육 13일차(HTML5 API) (0)	2017.07.26
직무교육 12일차(DB연동) (1)	2017.07.25
직무교육 11일차(웹어플리케이션 & ajax) (0)	2017.07.24

동그리동동닷컴

직무교육 16일차(jQuery)

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

직무교육 15일차(jQuery)

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

직무교육 14일차(HTML5 API)

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

+ Recent posts

티스토리툴바