'WEB' 카테고리의 글 목록 (12 Page)

WEB

2. jQuery 선택자(자식/후손/속성/필터)

2013. 4. 17. 14:03

<body>

<div>

<ul>

</ul>

</div>

</body>

1. body태그를 기준으로 바로 아래 div를 자식. body 아래 모든 태그를 후손

2. 자식선택자

- 형태 : '부모 > 자식'

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

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

});

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

자식에게만 적용된것을 확인할수 있다.

3. 후손선택자

- 형태 : '요소 A 요소 B'

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

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

});

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

;body 밑으로 모두 속성이 적용된다.

$('body ul').css('color','red');

; ul만 적용됨.

4. 속성선택자

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

$('input[type=text]').val("이름을 입력하세요!");

});

</script>

</head>

<body>

</body>

</html>

; input 태그 중 type이 text인 것만 적용.

; id를 주면 복잡할수 있으므로.

5. 입력양식 필터 선택자

- 형태 : '요소:값'

요소:button	input태그 중 type속성이button인 문서객체와 button태그를 선택
요소: checkbox
요소:file
요소:image
요소:password
요소:radio
요소:reset
요소:submit
요소:text

요소:checked	check된 입력양식을 선택
요소:disabled	비활성화된 입력양식을 선택
요소:enabled	활성화된 입력양식을 선택
요소:focus	포커스가 된 입력양식을 선택
요소:input	모든 입력양식을 선택
요소:selected	option중 선택된 입력양식을 선택

예) 5초 후 선택된 값을 보여주는 예제

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

//5초후 실행

setTimeout(function(){

//변수 선언

var value = $('select > option:selected').val();

alert(value);

}, 5000);

});

</script>

</head>

<body>

</select>

</body>

</html>

;

6. 필터 선택자

- 위치 관련 필터 선택자 : 테이블에 색상

요소:odd 홀수번재 위치한 문서객체 선택

요소:even 짝수번재 위치한 문서객체 선택

요소:first 첫번재 위치한 문서객체 선택

요소:last 마지막 번재 위치한 문서객체 선택

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

$('tr:odd').css('background','red');

$('tr:even').css('background','blue');

$('tr:first').css('background','orange');

});

</script>

</head>

<body>

<table>

</table>

</body>

</html>

저작자표시

'WEB > jQuery' 카테고리의 다른 글

1. jQuery 시작 (0)	2013.04.17

1. jQuery 시작

2013. 4. 17. 11:53

1. http://jquery.com 에서 다운받기.

2. **.min.js 파일은 minified버전. 파일용량을 최소화한 버전임.

이클립스에 포함시키면 빨간표시가 나는데 실행하는데는 상관없음.이클립스상에 체크에 걸려서 표시 되는것이므로 문법상 오류는 아님.

3. 기본형식

$(document).ready(function(){

});

1) window.onload = function(){} 와 동일한 기능.

2) 이벤트에 여러개 함수 연결 가능.

$(document).ready(function(){

...

});

$(document).ready(function(){

,,,

});

...

3) 간단한 형식

$(function(){

...

});

4. 기본 선택자

- css와 유사함.

1) 전체 선택자

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

2) 태그 선택자

: 태그명을 사용한다.

$('h1').css('color','Orange');
$('h1','p').css('color','blue');

3) 아이디 선택자

: id를 가지는 문서객체 선택

: id는 페이지내 단하나만 존재해야 한다.

$('#header').css('color','orange');

4) 클래스 선택자

$('.class').css('color','blue');

$('h1.item').css('background','red');

ex>

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

$(document).ready(function(){

$('.item').css('color','orange');

$('.item.select').css('color','red');

});

</script>

</head>

<body>

<h1 class="item">header 1</h1>

<h1 class="item select">header 2</h1>

<h1 class="item">header 3</h1>

</body>

</html>

; class에 item과 select 를 찾을려면 .item.select 붙여서 찾는다.

저작자표시

'WEB > jQuery' 카테고리의 다른 글

2. jQuery 선택자(자식/후손/속성/필터) (0)	2013.04.17

15. 이벤트 발생/ 제거

2013. 4. 17. 10:44

** 기본 이벤트 제거

- 일부 htm 태그는 이미 이벤트 핸들러가 존재한다.

- a태그는 다른페이지로 이동하는 이벤트가 존재. a태그의 기본 이벤트.

예) 입력 폼양식에서 유효성 검사에서 submit 기본 이벤트 제거

고전모델

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload = function(){

document.getElementById('my_form').onsubmit = function(){

//변수 선언

var pass = document.getElementById('pass').value;

var pass_check = document.getElementById('pass_check').value;

//비교

if(pass == pass_check){

alert("성공");

}else{

alert("다시 입력하세요.");

return false;

}

</script>

</head>

<body>

<label for="pass_check">비밀번호확인</label><br>

</form>

</body>

</html>

인라인 모델인 경우는

function check(){

//검사

return false;

}

</script>

...

</form>

*** 이벤트 발생

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

border: 1px solid black;

}

#outer_div{ background-color: red;}

#inner_div{ background-color: orange;}

#h1{ background-color: yellow;}

#paragraph{ background-color: green;}

</style>

</head>

<body>

<p onclick="alert('paragraph')" id="paragraph">paragraph</p>

</h1>

</div>

</body>

</html>

; 안에서 밖으로 경고창이 발생한다.

이벤트 버블링 : 자식노드에서 부모노드순으로 이벤트가 발생

* 이벤트가 전달되는것을 막는 기능

예)

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload = function(){

//이벤트 연결

document.getElementById('header').onclick = function(){

alert("header clicked!");

}

document.getElementById('paragraph').onclick = function(){

alert("<p> tag is clicked!");

}

</script>

</head>

<body>

<p id="paragraph">paragraph</p>

</h1>

</body>

</html>

; <p> 태그를 클릭하면 버블링이 발생해서 경고창이 두번 뜬다.(p, h1)

이벤트 버블링을 막는 방법

익스플로러 : 이벤트 객체의 cancelBubble속성을 true

그외 : 이벤트 객체의 stopPropagation()사용.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload = function(){

//이벤트 연결

document.getElementById('header').onclick = function(){

alert("header clicked!");

}

document.getElementById('paragraph').onclick = function(e){

//이벤트 객체 처리

var event = e || window.event;

alert("<p> tag is clicked!");

//이벤트 전달 제거

event.cancelBubble = true;

if ( event.stopPropagation ){

event.stopPropagation();

}

</script>

</head>

<body>

<p id="paragraph">paragraph</p>

</h1>

</body>

</html>

; 경고창이 한번만 발생한다.

; var event = e || window.event

- e가 존재하면 event에 넣고, e가 undefined이면 window.event속성을 event에 넣어라.

- 익스플로러8이하 버전은 이벤트가 발생하면 이벤트객체를 window.event속성으로 전달하지만 , 그외는 이벤트 핸들러의 매개변수로 전달한다.

저작자표시

'WEB > Javascript' 카테고리의 다른 글

14. 이벤트 (0)	2013.04.16
13.DOM - 문서객체 스타일 조작 및 제거 (0)	2013.04.16
12. DOM - 문서 객체 가져오기 (0)	2013.04.16
11. DOM - 객체생성 (0)	2013.04.15
10.브라우저 객체 모델과 html페이지 실행순서 (0)	2013.04.15

14. 이벤트

2013. 4. 16. 14:49

1. 이벤트 종류

- 마우스 이벤트

- 키보드 이벤트

- HTML 프레임 이벤트

- HTML 입력양식 이벤트

- 유저 인터페이스 이벤트

- 구조 변화 이벤트

- 터치 이벤트

2. 이벤트 용어

window.onload = function() {

}

</script>

load : 이벤트 이름, 이벤트 타입

onload : 이벤트 속성

이벤트 핸들러 : 이벤트 속성에 할당된 함수

3. 이벤트 모델

- 문서객체에 이벤트를 연결하는 방법

- DOM Level0 : 고전 이벤트 모델, 인라인 이벤트 모델

- DOM Level2 : ms인터넷 익스플로러 이벤트 모델, 표준 이벤트 모델

1) 고전 이벤트 모델

- 이벤트 하나에 이벤트 핸들러 하나만 연결

- 이벤트 핸들러 제거는 문서객체의 이벤트 속성에 null을 넣어준다.

예)

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//변수선언

var header = document.getElementById('header');

//이벤트를 연결한다.

function whenClick(){

alert('click!!');

//이벤트 제거

header.onclick = null;

}

header.onclick = whenClick;

};

</script>

</head>

<body>

<h1 id="header">when Click...</h1>

</body>

</html>

- 이벤트 제거 시 한번 클릭하고 다음 클릭시에는 발생하지 않음.

예) 이벤트 발생 객체

: this 는 발생 객체

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

document.getElementById('header').onclick = function(){

alert(this);

}

};

</script>

</head>

<body>

<h1 id="header">when Click...</h1>

</body>

</html>

객체의 style을 바꿔보면 글자색이 바뀐다.

window.onload = function(){

document.getElementById('header').onclick = function(){

this.style.color = 'blue';

}

};

** 이벤트 강제 발생

예) 버튼을 클릭하면 숫자가 증가한다.

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

var buttonA = document.getElementById('a');

var buttonB = document.getElementById('b');

var counter_a = document.getElementById('btn_a_cnt');

var counter_b = document.getElementById('btn_b_cnt');

buttonA.onclick = function(){

counter_a.innerHTML = Number(counter_a.innerHTML) + 1;

}

buttonB.onclick = function(){

counter_b.innerHTML = Number(counter_b.innerHTML) + 1;

}

};

</script>

</head>

<body>

<h1 id="btn_a">Button A is <span id="btn_a_cnt">0</span></h1>

<h1 id="btn_b">Button B is <span id="btn_b_cnt">0</span></h1>

</body>

</html>

버튼 a를 클릭하면 b도 중가 하게 할려면

buttonA.onclick = function(){

counter_a.innerHTML = Number(counter_a.innerHTML) + 1;

buttonB.onclick();

}

하면 된다.

2) 인라인 이벤트 모델

<body>

<h1 onclick="alert('click!')">Click</h1>

</body>

- 인라인 모델 함수 호출

function aClick(e){

alert('click!');

}

</script>

<body>

<h1 onclick="aClick(event)">Click</h1>

</body>

3) 인터넷 익스플로러 이벤트 모델

- 인라인 이벤트 모델, 고전이벤트 모델은 한번에 하나의 이벤트핸들러만 가짐.

- 보완하기 위한 DOM Level2 모델

여러 번 이벤트를 추가할수 있다.

- attachEvent( eventProperty, eventHandler);

detachEvent( eventProperty, eventHandler);

window.attach( 'onload', function(){

});

예) 익스플로러에서 실행해보면 (다른 브라우저는 안됨)

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.attachEvent('onload',function(){

var haeder = document.getElementById('header');

//이벤트 연결

header.attachEvent('onclick',function(){

alert('click1');

});

header.attachEvent('onclick',function(){

alert('click2');

});

header.attachEvent('onclick',function(){

alert('click3');

});

</script>

</head>

<body>

<h1 id="header">Click</h1>

</body>

</html>

; 한번 클릭했는데 경고창이 3번 뜬다.

** 이벤트 제거

제거 할때는 정확한 이벤트 핸들러 명을 명시해야 제거가 된다.

window.onload = funciton(){

var header = document.getElementById('header');

// 핸들러 생성

var handler = function(){ alert('click') };

//이벤트 연결

header.attachEvent('onclick', handler );

//이벤트 제거

header.detachEvent('onclick',handler );

};

</script>

; 인터넷 익스플로러 이벤트 모델에서 이벤트 핸들러의 this는 발생객체를 의미하지 않고, window객체를 의미한다.

이벤트 발생객체를 사용할려면 srcElement속성을 사용해야 한다.

window.event.srcElement.style.color ='red';

이런싟으로.

4) 표준이벤트 모델

- 익스플로러 이외의 브라우저에서 한번에 여러 이벤트 핸들러 추가할때

- 익스플로러 9버전부터는 지원함.

addEventListener( eventName, handler, useCapture ) : 입력하지 않으면 자동으로false

removeEventListener( eventName, handler )

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload = function(){

var header = document.getElementById('header');

header.addEventListener('click', function(){

this.innerHTML += '+';

});

}

</script>

</head>

<body>

<h1 id="header">Click</h1>

</body>

</html>

;

- 인터넷 익스플로러 이벤트 모델과 차이점은 event명, 발생객체를 this를 사용한것

- 그러나 ie9부터 지원하므로 ..

사용예)

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload = function(){

var header = document.getElementById('header');

if(header.attachEvent){

//익스플로러 이면

//이벤트 핸들러 생성

var handler = function(){

//속성변경

window.event.srcElement.style.color = 'red';

//이벤트 제거

window.event.srcElement.detachEvent('onclick', handler);

};

// 이벤트 연결

header.attachEvent('onclick', handler);

}else{

//그외 브라우저

var handler = function(){

this.style.color ='red';

this.removeEventListener('click',handler);

}

header.addEventListener('click', handler);

}

</script>

</head>

<body>

<h1 id="header">Click</h1>

</body>

</html>

; 클릭하면 색이 변경되고 이벤트가 제거된다.

저작자표시

'WEB > Javascript' 카테고리의 다른 글

15. 이벤트 발생/ 제거 (0)	2013.04.17
13.DOM - 문서객체 스타일 조작 및 제거 (0)	2013.04.16
12. DOM - 문서 객체 가져오기 (0)	2013.04.16
11. DOM - 객체생성 (0)	2013.04.15
10.브라우저 객체 모델과 html페이지 실행순서 (0)	2013.04.15

13.DOM - 문서객체 스타일 조작 및 제거

2013. 4. 16. 10:59

1. style 속성을 사용하면 문서객체의 스타일을 변경할수 있다.

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//문서객체가져오기

var header = document.getElementById('header');

header.style.border = '2px solid black';

header.style.color ='red';

};

</script>

</head>

<body>

<h1 id="header">Header1</h1>

</body>

</html>

* css와 속성이름이 다름.

자바스크립트 식별자에는 '-'를 사용할수 없으므로, css의 background-color 는 backgroundColor 속성으로 .

2. 문서 객체 제거

- removeChild(child) : 문서객체의 자식노드를 제거

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//문서객체가져오기

var hd_remove = document.getElementById('hd_remove');

document.body.removeChild(hd_remove);

};

</script>

</head>

<body>

<h1 id="hd_remove">Header1</h1>

</body>

</html>

일반적으로

hd_remove.parentNode.removeChild(hd_remove); 로 사용한다.

h1태그에서 부모노드로 이동한 후 부모노드에서 자식노드를 삭제한다.

저작자표시

'WEB > Javascript' 카테고리의 다른 글

15. 이벤트 발생/ 제거 (0)	2013.04.17
14. 이벤트 (0)	2013.04.16
12. DOM - 문서 객체 가져오기 (0)	2013.04.16
11. DOM - 객체생성 (0)	2013.04.15
10.브라우저 객체 모델과 html페이지 실행순서 (0)	2013.04.15

PREV 1 ···9 10 11 12 13 14 15 ···19 NEXT

New

WEB

2. jQuery 선택자(자식/후손/속성/필터)

'WEB > jQuery' 카테고리의 다른 글

1. jQuery 시작

'WEB > jQuery' 카테고리의 다른 글

15. 이벤트 발생/ 제거

'WEB > Javascript' 카테고리의 다른 글

14. 이벤트

'WEB > Javascript' 카테고리의 다른 글

13.DOM - 문서객체 스타일 조작 및 제거

'WEB > Javascript' 카테고리의 다른 글

+ Recent posts

티스토리툴바