1. jQuery (제이쿼리)

2017. 4. 13. 17:40

1. Jquery Test

<!DOCTYPE html>

<html>

<head>

<title>Jquery Test</title>

span {font-size: 30pt }

.redtext {color: #f00 }

.italictext{font-style: italic;}

</style>

$('span').addClass('italictext');

</script>

<!-- Head 에 기술한 jquery 가 적용되지 않은 이유는

브라우저내의 HTML 인터프리터에 의해서 DOM 트리가

생성되기 이전에 span 엘리먼트를 검색하려고 시도하였기

때문이다.

jQuery 를 HEAD 태그에서 사용하려면 브라우저에

HTML 문서가 로드되어 준비된 상태(ready) 가 되었을때

적용 되어야 한다

이를 위해 document 객체를

jQuery 메소드('$')로 둘러싼(wrapped) 후에

ready() 메소드를 호출하여야 한다 -->

</head>

<body>

<span> korea simple </span>

$('span').addClass('redtext');

</script>

</body>

</html>

2. 준비된 헨들러 사용하기

<!DOCTYPE html>

<html>

<head>

span{font-size: 30pt}

.redtext {color: #f00}

.italictext{font-style: italic ;}

</style>

$(document).ready(myFun);

function myFun()

{

$('span').addClass('italictext');

}

$(document).ready(function(){

$('span').addClass('redtext');

});

$(function(){

$('span').addClass('redtext');

});

</script>

</head>

<body>

<span>korea seoul simple</span>

$('span').addClass('spotlight');

</script>

</body>

</html>

3. 엘리먼트에 접근해서 스타일 지정 - "element", "#id", ".class"

<!DOCTYPE html>

<html>

<head>

<title>엘리먼트에 접근해서 스타일 지정 - "element", "#id", ".class"</title>

.spotlight{background-color: #dd8}

.redtext{color: #f00}

.largetext{font-size: 30pt}

.italictext{font-style: italic ;}

</style>

</script>

$(document).ready(function(){

$('span').addClass('redtext');

$('div').addClass('spotlight');

$('#simpletext1').addClass('largetext');

$('.simpletext1').addClass('italictext');

$('.a').addClass('italictext');

});

</script>

</head>

<body>

<span id="simpletext1">simple korea</span>

<div class="simpletext1">jquert test</div>

<span id="simpletext2">basic korea</span>

<div class="simpletext2">example test</div>

</body>

</html>

4. 한번에 다양한 엘리먼트에 접근하여 갯수와 텍스트 얻기

- "selector1, selector2, selectorN"

<!DOCTYPE html>

<html>

<head>

<title>한번에 다양한 엘리먼트에 접근하여 갯수와 텍스트 얻기

- "selector1, selector2, selectorN"</title>

$(document).ready(function(){

var resultText = "";

var $searchEles = $('p,span,div,simpletext1');

var resultText : 일반 자바 스크립트 변수

흔히 사용하는 방식으로 스크립트만 사용 가능

var $searchEles : jQuery 변수, Jquery 에서 사용하는

내장 함수를 모두 사용 할 수 있음

resultText +="검색된 엘리먼트 갯수 : " + $searchEles.length+ "\n";

$searchEles.each(function(){

resultText += $(this).text() + "\t";

});

alert($.trim(resultText));

});

</script>

</head>

<body>

<span> test korea</span>

<div class="simpletext1">jquery text</div>

<div>basic1</div>

<div>basic2</div>

<div>basic3</div>

<div>basic4</div>

<p> 2017 korea seoul</p>

</body>

</html>

5. 선택된 jQuery 확장 객체 집합에서

자손 엘리먼트에 스타일 시트 적용하기

<!DOCTYPE html>

<html>

<head>

<title>선택된 jQuery 확장 객체 집합에서

자손 엘리먼트에 스타일 시트 적용하기</title>

em {font-size: 12pt; line-height: 40pt;}

</style>

$(document).ready(function(){

$('div em').css('border','3pt solid #f00')

.css('padding','7pt 7pt 7pt 7pt');

$('span em').css('border','10pt dotted #00f')

.css('padding','7pt 7pt 7pt 7pt');

console.log("검색된 엘리먼트 갯수1 : "+$('div em').length);

console.log("검색된 엘리먼트 갯수2 : "+$('span em').length);

});

</script>

<!--

selector(셀렉터) :

셀렉터는 문서 내에서 원하는 엘리먼트를 쉽게 식별하고

이를 추출하기 위해서 jQuery 에서 제공하는 기술이다.

기본 셀렉터 의미

* 모든 엘리먼트와 일치

E 태그명이 E인 모든 엘리먼트와 일치

E F E 의 자손이면서 엘리먼트이름이 F인 모든 엘리먼트

E > F E바로 아래 F 엘리먼트

E + F E의 형제 엘리먼트로 바로 다음 형제 F 엘리먼트

E ~ F E의 형제 엘리먼트로 다음에 나오는 모든 F 엘리먼트

E:has(F) 엘리먼트 F 의 자손을 한개 이상가지고 있는 모든 E 엘리먼트

E.C 클래스명 C를 가지고 있는 모든 E 엘리먼트

*.C 클래스명 C를 가지고 있는 모든 엘리먼트

E#i 아이디가 i 인 모든 E 엘리먼트

*#I 아이디가 i 인 모든 엘리먼트

E[A] 어트리뷰트 A 를 가지고 모든 E 엘리먼트

E[A=V] 어트리뷰트 A 의 값인 V인 모든 E 엘리먼트

E[A^=V] 어트리뷰트 A 의 값이 V로 시작하는 모든 E 엘리먼트

E[A$=V] 값이 V 로 끝나는 어트리뷰트 A 를 가지고 있는 모든 E 엘리먼트

E[A*=V] 값이 V를 포함하는 어트리뷰트 A를 가지고 있는 모든 E 엘리먼트

-->

</head>

<body>

<div>

<em>Hello!!</em>

<em>forever</em>

</div>

<span>

<em>javascript ~~~~</em>

</span>

</body>

</html>

6. 인접한 자손 엘리먼트를 노드로 추가하기

<!DOCTYPE html>

<html>

<head>

<title>인접한 자손 엘리먼트를 노드로 추가하기</title>

em{

font-size: 20pt; line-height: 20pt;

margin: 20px; color: blue;

}

</style>

$(document).ready(function() {

$('p em').css('background-color','yellow').each(function() {

$('.result1').append($(this).text() + "\n");

});

$('div > em').css('background-color','pink').each(function() {

$('.result2').append($(this).text() + "\n");

})

console.log("검색된 엘리먼트 갯수 : " + $(' p em').length);

console.log("검색된 엘리먼트 갯수 : " + $('div > em').length);

});

</script>

</head>

<body>

<p>

<span><em>three</em></span>

</p>

<div>

</div>

<div>

<span>ancestor descendant 로 검색된 엘리먼트</span>

</div>

<div>

<span>parent > child 로 검색된 엘리먼트</span>

</div>

</body>

</html>

7. 모든 엘리먼트에 스타일 적용하고

인접한 형제를 노드로 추가하기 -"prev + next"

<!DOCTYPE html>

<html>

<head>

<title>모든 엘리먼트에 스타일 적용하고

인접한 형제를 노드로 추가하기 -"prev + next"</title>

.textstyle{

font-size: 24pt;

font-style:bold;

line-height: 20pt;

margin: 10px;

}

</style>

$(document).ready(function() {

$('*').addClass('textstyle')

$('em + a').css('background-color','yellow').each(function() {

$(this).appendTo('.result1');

});

console.log("검색된 엘리먼트 갯수 : " +$('em + a').length);

});

</script>

</head>

<body>

<a>three</a>

<div>

</div>

</body>

</html>

8. 조건에 만족하는 첫번째와 마지막

엘리먼트에 스타일 적용하기 -":first, :last"

<!DOCTYPE html>

<html>

<head>

<title>조건에 만족하는 첫번째와 마지막

엘리먼트에 스타일 적용하기 -":first, :last"</title>

table {table-layout: auto; width: 80%;}

td {color: blue; font-weight: bold;}

.selectedstyle {color: red; font-size: 20pt; background-color: pink;}

</style>

$(document).ready(function() {

$('tr:first').addClass('selectedstyle');

$('tr:last').addClass('selectedstyle');

console.log("조건에 만족하는 첫번째 엘리먼트 : " + $('tr:first').text());

console.log("조건에 만족하는 마지막 엘리먼트 : " + $('tr:last').html());

});

</script>

</head>

<body>

<table>

<tr><td>three</td></tr>

</table>

</body>

</html>

9. 조건에 만족하는 짝수와 홀수에 위치한 엘리먼트에

스타일 적용하기 =":odd, :even"

<!DOCTYPE html>

<html>

<head>

<title>조건에 만족하는 짝수와 홀수에 위치한 엘리먼트에

스타일 적용하기 =":odd, :even"</title>

table{table-layout: auto; width: 80%;}

</style>

$(document).ready(function() {

$('tr:even').css('background-color','#dd3333');

$('tr:odd').css('background-color','green');

});

</script>

</head>

<body>

<table>

<tr><td>three</td></tr>

</table>

</body>

</html>

10. n 번째로 일치하는 엘리먼트 스타일 적용하기 - "eq(n)"

<!DOCTYPE html>

<html>

<head>

table {table-layout: auto; width: 75%;}

</style>

$(document).ready(function() {

$('td:eq(2)').css('background-color','#00ff00');

$('td:eq(4)').css('background-color','#33dddd');

});

</script>

</head>

<body>

<table>

<tr><td>three</td></tr>

</table>

</body>

</html>

11. n 번째 엘리먼트 이후 혹은 이전에

위치한 엘리먼트에 스타일 해제하기- ":gt(n), lt(n) "

<!DOCTYPE html>

<html>

<head>

<title>n 번째 엘리먼트 이후 혹은 이전에

위치한 엘리먼트에 스타일 해제하기- ":gt(n), lt(n) "</title>

table {table-layout: auto; width: 75%;}

.textstyle {color: blue; font-weight: bold; background-color: #cccc66;}

</style>

$(document).ready(function() {

$('td').addClass('textstyle');

$('td:lt(2)').removeClass('textstyle');

$('td:gt(4)').removeClass('textstyle');

});

</script>

</head>

<body>

<table>

<tr><td>three</td></tr>

</table>

</body>

</html>

저작자표시 비영리 변경금지

'제이쿼리(jQuery)' 카테고리의 다른 글

5. jQuery (제이쿼리) 마지막 (0)	2017.04.20
4. jQuery (제이쿼리) (0)	2017.04.19
3. jQuery (제이쿼리) (0)	2017.04.18
2. jQuery (제이쿼리) (0)	2017.04.17

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

테스토리