jQuery - DOM API

웹프로그래밍/jQuery

jQuery - DOM API

Gamcho 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()

//document: 문서전체

//$: 셀렉터

//.ready: 괄호 안 함수 실행

$(document).ready(function () {

});

</script>

//13-1에서 생략된 기본틀

$(function () {

});

</script>

-body 태그 접근

$(document).ready(function () {

//*는 문서의 모든 태그 지칭

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

});

</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>

$(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>

$(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>

$(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>

-부모 > 자식

$(document).ready(function () {

//부모 > 자식 , *는 모든 자식 태그

//body 태그에 모든 자식 태그에 css적용

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

});

</script>

</head>

<body>

<div>

<ul>

<li>Apple</li>

<li>Elephant</li>

</ul>

</div>

</body>

-input태그

$(document).ready(function () {

//input(타입) .val은 해당 태그에 값을 넣는다.

$('input[type=text]').val('Hello jQuery..!');

});

</script>

</head>

<body>

</body>

-select태그

$(document).ready(function () {

// 5초 후에 코드를 실행합니다.

setTimeout(function () {

// 변수를 선언합니다. 셀렉트 태그에서 선택된 값을 변수에 저장

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

// 출력합니다.

alert(value);

}, 5000);

});

</script>

</head>

<body>

<option>Apple</option>

<option>Elephant</option>

</select>

</body>

$(document).ready(function () {

//홀수

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

//짝수

$('tr:even').css('background', '#9F9F9F');

//첫줄

$('tr:first').css('background', '#000000').css('color', '#FFFFFF');

});

</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><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() 반복문

$(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>

$(document).ready(function () {

$('h1').each(function (index, item) {

//this는 h1 객체 중 하나

$(this).addClass('high_light_' + index);

});

</script>

</head>

<body>

</body>

-객체 생성 및 값 넣기

$(document).ready(function () {

var object = {};

object.name = 'RintIanTta';

object.gender = 'Male';

object.part = 'Second Guitar';

$.each(object, function (index) {

alert(object[index]);

})

});

</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()

//EL태그와 충돌 막기 위해서 $대신 jQuery사용

$.noConflict();

jQuery(document).ready(function () {

});

</script>

// 플러그인간의 충돌을 제거합니다.

$.noConflict();

var J = jQuery;

// jQuery를 사용합니다.

J(document).ready(function () {

J('h1').removeClass('hight_light');

});

</script>

.filter()

$(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>

$(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()

$(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 파싱 및 출력

// 변수를 선언합니다.

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() - 태그 속성 확인 및 추가

$(document).ready(function () {

// 변수를 선언합니다.

var src = $('img').attr('src');

// 출력합니다.

alert(src);

});

</script>

$(document).ready(function () {

$('img').attr('width', 200);

});

</script>

$(document).ready(function () {

$('img').attr('width', function (index) {

return (index + 1) * 100;

});

</script>

</head>

<body>

</body>

.removeAttr() - 속성 제거

$(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>

$(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>

$(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() - 입출력

$(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>

$(document).ready(function () {

//div 태그 안에 값을 입력합니다.

$('div').html('<h1>$().html() Method</h1>');

});

</script>

</head>

<body>

</body>

$(document).ready(function () {

$('div').html(function (index) {

return '<h1>Header-' + index + '</h1>';

});

</script>

</head>

<body>

</body>

.text() - 입출력

$(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>

$(document).ready(function () {

$('div').text('<h1>$().html() Method</h1>');

});

</script>

</head>

<body>

</body>

.first() / .remove() - 제거,삭제

<head>

$(document).ready(function () {

$('h1').first().remove();

});

</script>

</head>

<body>

<div>

<h1>Header-0</h1>

<h1>Header-1</h1>

</div>

</body>

.empty() - 제거,삭제

<head>

$(document).ready(function () {

$('div').empty();

});

</script>

</head>

<body>

<div>

<h1>Header-0</h1>

<h1>Header-1</h1>

</div>

</body>

.appendTo() - 값 추가

//body 태그 안에 이미지 추가

$(document).ready(function () {

$('<img />').attr('src', 'Chrysanthemum.jpg').appendTo('body');

});

</script>

$(document).ready(function () {

$('<img />', {

src: 'Chrysanthemum.jpg',

width: 350,

height: 250

}).appendTo('body');

});

</script>

<head>

$(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>

</body>

슬라이드

$(document).ready(function () {

// .image의 크기를 조정합니다.

$('img').css('width', 250);

// 함수를 2초마다 실행합니다.

setInterval(function () {

// 첫 번째 이미지를 마지막으로 보냅니다.

$('img').first().appendTo('body');

}, 2000);

});

</script>

</head>

<body>

</body>

.clone()

<head>

$(document).ready(function () {

$('div').append($('h1').clone());

});

</script>

</head>

<body>

<h1>HEADER</h1>

</body>

저작자표시 비영리 변경금지 (새창열림)