jQuery - DOM API :: Gamcho's Blog

jQuery - DOM API

웹프로그래밍/jQuery 2018. 7. 27. 13:02

-jQuery
모든 브라우저에서 동작하는 자바스크립트 라이브러리

-장점
DOM과 관련된 처리
이벤트 연결
시각적 효과
Ajax 웹 개발

-사용법
CDN(Content Delivery Network) - HTML페이지에서 <script>태그로 URL 입력 - 인터넷이 안되면 사용 못함

직접 다운로드 - 오프라인
.js Uncompressed 버전
.min.js Minified 버전

.extend()
noConflict();
.filter()
.eq()
.add()
.is()
.parseXML()
.find()
.addClass()
.removeClass()
.attr()
.removeAttr()
.html() - 문서 객체 내부의 글자와 관련된 모든 기능 수행(HTML 태그 인식)
.text() - 문서 객체 내부의 글자와 관련된 모든 기능 수행
.first()
.remove()
.empty()
.appendTo()
.clone()


<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
//document: 문서전체
//$: 셀렉터
//.ready: 괄호 안 함수 실행
$(document).ready(function () {

});
</script>

<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
//13-1에서 생략된 기본틀
$(function () {

});
</script>

-body 태그 접근
<script>
$(document).ready(function () {
//*는 문서의 모든 태그 지칭
$('*').css('color', 'Red');
});
</script>

<script>
$(document).ready(function () {
//h1과 p태그 지칭
$('h1, p').css('color', 'Orange');
});
</script>

<body>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>

<script>
$(document).ready(function () {
//#은 body에서 id가 target을 지칭
$('#target').css('color', 'Orange');
});
</script>

<body>
<h1>Header-0</h1>
<h1 id="target">Header-1</h1>
<h1>Header-2</h1>
</body>

<script>
$(document).ready(function () {
//.은 클래스 지칭
$('.item').css('color', 'Orange');
$('h1.item').css('background', 'Red');
});
</script>
</head>
<body>
<h1 class="item">Header-0</h1>
<h1 class="item select">Header-1</h1>
<h1 class="item">Header-2</h1>
</body>

<script>
$(document).ready(function () {
$('.item.select').css('color', 'Orange');
});
</script>
</head>
<body>
<h1 class="item">Header-0</h1>
<h1 class="item select">Header-1</h1>
<h1 class="item">Header-2</h1>
</body>

-부모 > 자식
<script>
$(document).ready(function () {
//부모 > 자식 , *는 모든 자식 태그
//body 태그에 모든 자식 태그에 css적용
$('body > *').css('color', 'red');
});
</script>
</head>
<body>
<div>
<ul>
<li>Apple</li>
<li>Bag</li>
<li>Cat</li>
<li>Dog</li>
<li>Elephant</li>
</ul>
</div>
</body>

-input태그
<script>
$(document).ready(function () {
//input(타입) .val은 해당 태그에 값을 넣는다.
$('input[type=text]').val('Hello jQuery..!');
});
</script>
</head>
<body>
<input type="text" />
<input type="password" />
<input type="radio" />
<input type="checkbox" />
<input type="file" />
</body>

-select태그
<script>
$(document).ready(function () {
// 5초 후에 코드를 실행합니다.
setTimeout(function () {
// 변수를 선언합니다. 셀렉트 태그에서 선택된 값을 변수에 저장
var value = $('select > option:selected').val();
// 출력합니다.
alert(value);
}, 5000);
});
</script>
</head>
<body>
<select>
<option>Apple</option>
<option>Bag</option>
<option>Cat</option>
<option>Dog</option>
<option>Elephant</option>
</select>
</body>

<script>
$(document).ready(function () {
//홀수
$('tr:odd').css('background', '#F9F9F9');
//짝수
$('tr:even').css('background', '#9F9F9F');
//첫줄
$('tr:first').css('background', '#000000').css('color', '#FFFFFF');
});
</script>

<script>
$(document).ready(function () {
//첫줄
$('tr:eq(0)').css('background', '#000000').css('color', 'White');
//3의 배수
$('td:nth-child(3n+1)').css('background', '#565656');
$('td:nth-child(3n+2)').css('background', '#A9A9A9');
$('td:nth-child(3n)').css('background', '#F9F9F9');
});
</script>
</head>

<body>
<table>
<tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
<tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
<tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
<tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
</table>
</body>

-.each() 반복문
<script>
$(document).ready(function () {
// 변수를 선언합니다.
var array = [
{ name: 'Hanbit Media', link: 'http://hanb.co.kr' },
{ name: 'Naver', link: 'http://naver.com' },
{ name: 'Daum', link: 'http://daum.net' },
{ name: 'Paran', link: 'http://paran.com' }
];

// $.each() 메서드를 사용합니다.
$.each(array, function (index, item) {
// 변수를 선언합니다.
var output = '';
// 문자열을 만듭니다.
output += '<a href="' + item.link + '">';
output += ' <h1>' + item.name + '</h1>';
output += '</a>';
// 집어넣습니다.
document.body.innerHTML += output;
});
});
</script>

-addClass()
<head>
<style>
.high_light_0 { background:Yellow; }
.high_light_1 { background:Orange; }
.high_light_2 { background:Blue; }
.high_light_3 { background:Green; }
.high_light_4 { background:Red; }
</style>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('h1').each(function (index, item) {
//this는 h1 객체 중 하나
$(this).addClass('high_light_' + index);
});
});
</script>
</head>
<body>
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
</body>

-객체 생성 및 값 넣기
<script>
$(document).ready(function () {
var object = {};
object.name = 'RintIanTta';
object.gender = 'Male';
object.part = 'Second Guitar';

$.each(object, function (index) {

alert(object[index]);
})

});
</script>

<script>
$(document).ready(function () {
// 변수를 선언합니다.
var object = { name: 'RintIanTta' };

// $.extend() 메서드를 사용합니다.
//.extend로 Object 객체에 변수 저장
$.extend(object, {
gender: 'Male',
part: 'Second Guitar'
});

// 출력합니다.
var output = '';
$.each(object, function (key, item) {
output += key + ': ' + item + '\n';
});
alert(output);
});
</script>

-noConflict()
<script>
//EL태그와 충돌 막기 위해서 $대신 jQuery사용
$.noConflict();
jQuery(document).ready(function () {

});
</script>

<script>
// 플러그인간의 충돌을 제거합니다.
$.noConflict();
var J = jQuery;

// jQuery를 사용합니다.
J(document).ready(function () {
J('h1').removeClass('hight_light');
});
</script>

.filter()
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('h3').filter(':even').css({
backgroundColor: 'Black',
color: 'White'
});
});
</script>
</head>
<body>
<h3>Header-0</h3>
<h3>Header-1</h3>
<h3>Header-2</h3>
<h3>Header-3</h3>
<h3>Header-4</h3>
<h3>Header-5</h3>
</body>

<script>
$(document).ready(function () {
$('h1').css('background', 'Orange');
$('h1:even').css('color', 'White');
$('h1:odd').css('color', 'Red');

//첫번째
//$('h1').eq(0).css('background', 'Orange');
//마지막
//$('h1').eq(-1).css('background', 'Red');
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>

.is()
<script>
$(document).ready(function () {
$('h1').each(function () {
if ($(this).is('.select')) {
$(this).css('background', 'Orange');
}
});
});
</script>
</head>
<body>
<h1 class="select">Header-0</h1>
<h1>Header-1</h1>
<h1 class="select">Header-2</h1>
</body>

.parseXML - xml 파싱 및 출력
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
// 변수를 선언합니다.
var xml = '';
xml += '<friends>';
xml += ' <friend>';
xml += ' <name>연하진</name>';
xml += ' <language>Ruby</language>';
xml += ' </friend>';
xml += ' <friend>';
xml += ' <name>윤명월</name>';
xml += ' <language>Basic</language>';
xml += ' </friend>';
xml += ' <friend>';
xml += ' <name>윤하린</name>';
xml += ' <language>C#</language>';
xml += ' </friend>';
xml += '</friends>';

$(document).ready(function () {
// 변수를 선언합니다.
var xmlDoc = $.parseXML(xml);
$(xmlDoc).find('friend').each(function (index) {
// 변수를 선언합니다.
var output = '';
output += '<div>';
output += ' <h1>' + $(this).find('name').text() + '</h1>';
output += ' <p>' + $(this).find('language').text() + '</p>';
output += '</div>';

// 출력합니다.
document.body.innerHTML += output;
});
});
</script>

.attr() - 태그 속성 확인 및 추가
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
// 변수를 선언합니다.
var src = $('img').attr('src');

// 출력합니다.
alert(src);
});
</script>

<script>
$(document).ready(function () {
$('img').attr('width', 200);
});
</script>

<script>
$(document).ready(function () {
$('img').attr('width', function (index) {
return (index + 1) * 100;
});
});
</script>

</head>
<body>
<img src="Chrysanthemum.jpg"/>
<img src="Desert.jpg"/>
<img src="Hydrangeas.jpg"/>
</body>

.removeAttr() - 속성 제거
<script>
$(document).ready(function () {
$('h1').removeAttr('data-index');
});
</script>
</head>
<body>
<h1 data-index="0">Header-0</h1>
<h1 data-index="1">Header-1</h1>
<h1 data-index="2">Header-2</h1>
</body>

.css()
<head>
<style>
.first { color:Red; }
.second { color:Pink; }
.third { color:Orange; }
</style>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
// 변수를 선언합니다.
var color = $('h1').css('color');

// 출력합니다.
alert(color);
});
</script>
</head>
<body>
<h1 class="first">Header-0</h1>
<h1 class="second">Header-1</h1>
<h1 class="third">Header-2</h1>
</body>

<script>
$(document).ready(function () {
// 변수를 선언합니다.
var color = ['Red', 'White', 'Purple'];

// 문서 객체의 스타일을 변경합니다.
$('h1').css({
color: function (index) {
return color[index];
},
backgroundColor: 'Black'
});
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>

.html() - 입출력
<script>
$(document).ready(function () {
// body태그에 h1태그 값을 가져옵니다.
var html = $('h1').html();

// 출력합니다.
alert(html);
});
</script>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>

<script>
$(document).ready(function () {
//div 태그 안에 값을 입력합니다.
$('div').html('<h1>$().html() Method</h1>');
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>

<script>
$(document).ready(function () {
$('div').html(function (index) {
return '<h1>Header-' + index + '</h1>';
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>

.text() - 입출력
<script>
$(document).ready(function () {
// 변수를 선언합니다.
var text = $('h1').text();

// 출력합니다.
alert(text);
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>

<head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('div').text('<h1>$().html() Method</h1>');
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>

.first() / .remove() - 제거,삭제
<head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('h1').first().remove();
});
</script>
</head>
<body>
<div>
<h1>Header-0</h1>
<h1>Header-1</h1>
</div>
</body>

.empty() - 제거,삭제
<head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('div').empty();
});
</script>
</head>
<body>
<div>
<h1>Header-0</h1>
<h1>Header-1</h1>
</div>
</body>

.appendTo() - 값 추가
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
//body 태그 안에 이미지 추가
$(document).ready(function () {
$('<img />').attr('src', 'Chrysanthemum.jpg').appendTo('body');
});
</script>

<script>
$(document).ready(function () {
$('<img />', {
src: 'Chrysanthemum.jpg',
width: 350,
height: 250
}).appendTo('body');
});
</script>

<head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
// 변수를 선언합니다. (JSON)
var content = [
{ name: '윤인성', region: '서울특별시 강서구' },
{ name: '윤하린', region: '서울특별시 광진구' },
{ name: '윤인아', region: '미국 메사추세츠' }
];
// 문서 객체를 추가합니다.
$('div').append(function (index) {
// 변수를 선언합니다.
var item = content[index];

var output = '';
output += '<h1>' + item.name + '</h1>';
output += '<h2>' + item.region + '</h2>';
return output;
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>

슬라이드
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
// .image의 크기를 조정합니다.
$('img').css('width', 250);

// 함수를 2초마다 실행합니다.
setInterval(function () {
// 첫 번째 이미지를 마지막으로 보냅니다.
$('img').first().appendTo('body');
}, 2000);
});
</script>
</head>
<body>
<img src="Chrysanthemum.jpg"/>
<img src="Desert.jpg"/>
<img src="Hydrangeas.jpg"/>
<img src="Jellyfish.jpg"/>
<img src="Koala.jpg"/>
</body>

.clone()
<head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function () {
$('div').append($('h1').clone());
});
</script>
</head>
<body>
<h1>HEADER</h1>
<hr/><div></div><hr/>
</body>

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

'웹프로그래밍 > jQuery' 카테고리의 다른 글

jQuery - 이벤트  (0) 2018.07.27
관련글 관련글 더보기
- jQuery - 이벤트

ABOUT ME

Gamcho's Blog Gamcho's Blog

'웹프로그래밍 > jQuery' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'웹프로그래밍 > jQuery' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바