<script>
$(document).ready(function () {
$('h1').addClass('item');
$('h1').addClass(function (index) {
return 'class' + index;
});
});
</script>
$(document).ready(function () {
$('h1').removeClass('select');
});
<script>
$(document).ready(function () {
// $('img') => 3개의 object
// attr('src') => 3개의 image object중에서 첫번째 src값을 return
var src = $('img').attr('src');
alert(src);
</script>
$(selector).attr(name, value); $(selector).attr(name, function(index, attr) {}); $(selector).attr(object);
$('img').attr('width', 500);
$('img').attr('width', function (index) {
return (index + 1) * 100;
});
$('img').attr({
width: function (index) {
return (index + 1) * 100;
},
height: 100
});
$(document).ready(function () {
$('h1').removeAttr('data-index');
});
$(document).ready(function () {
var color = ['red', 'yellow', 'purple'];
// 문서 객체의 스타일을 변경합니다.
$('h1').css('color', function (index) {
return color[index];
});
});
$(selector).css(name, value); $(selector).css(name, function(index, style){}); $(selector).css(object);
$('h1').css({
color: function (index) {
return color[index];
},
backgroundColor: 'black'
});
$(document).ready(function () {
// 변수를 선언합니다.
// $('h1') => 3개 h1 object 가져옴
// html() => 3개 h1 object중에서 첫번째 객체의 text를 가져옴
var html = $('h1').html();
// 출력합니다.
alert(html);
// html()메소드의 인자로 tag를 넣으면, tag가 적용됨
$('div').html('<h1>$().html() Method</h1>');
$('div').html(function (index) {
return '<h1>Header-' + index + '</h1>';
});
});
$(document).ready(function () {
// 변수를 선언합니다.
// $('h1').text() => h1 객체 3개의 모든 text를 가져옴
var text = $('h1').text();
// 출력합니다.
alert(text);
// text()메소드에 tag를 인자값으로 넣어도 tag로 인식을 안함.
$('div').text('<h1>$().html() Method</h1>');
});
$(selector).html(value); $(selector).text(value);
$(selector).html(function(index, html){}); $(selector).text(function(index, text){});
empty() 는 본인 안의 내용을 비우고, remove() 는 전부 삭제한다고 이해
$(document).ready(function () {
$('h1').first().remove();
});
$(document).ready(function () {
// empty() => 자식, 후손 객체들을 삭제 (본인은 삭제가 안됨)
// remove() => 본인을 포함하여, 자식, 후손객체 모두 삭제
$('div').empty();
});
<script>
$(document).ready(function () {
// $('<h1></h1>') : html 태그를 넣어 문서 객체 생성
// .html('Hello World .. !'): 텍스트 노드 추가
// .appendTo('body'); : 문서 객체 연결
$('<h1></h1>').html('Hello World .. !').appendTo('body');
// 간단한 표현
$('<h1>Hello World .. !</h1>').appendTo('body');
// $('<img />') : 문서 객체 생성
// attr('src', 'first.jpg') : 속성 추가
// .appendTo('body') : 문서 객체 연결
$('<img />').attr('src', 'first.jpg').appendTo('body');
$('<img />', {
src: 'first.jpg',
width: 350,
height: 250
}).appendTo('body');
// 변수를 선언합니다.
var h1 = '<h1>Header1</h1>';
var h2 = '<h2>Header2</h2>';
// 문서 객체를 추가합니다.
$('body').append(h1, h2, h1, h2);
});
</script>
// $(document) => javascript object data type => {}
$(document).ready(function () {
// 변수를 선언합니다.
var content = [
{ name: '윤인성', region: '서울특별시 강서구' },
{ name: '윤하린', region: '서울특별시 광진구' },
{ name: '윤인아', region: '미국 메사추세츠' }
];
// 문서 객체를 추가합니다.
// $('div') => document.getElementsByTagName
// $('div') => div 객체 3개를 가져옴
// $('div').append(function(){}) => 3개 div 객체에 대해서 function수행
$('div').append(function (index) {
// index가 0인 item = { name: '윤인성', region: '서울특별시 강서구' };
var item = content[index];
var output = '';
output += '<h1>' + item.name + '</h1>';
output += '<h2>' + item.region + '</h2>';
// output = '<h1>' + item.name + '</h1><h2>' + item.region + '</h2>'
return output;
});
});
$(selector).append(content, content, ... , content) $(selector).append(function (index) {});
<script>
$(document).ready(function () {
// .image의 크기를 조정합니다.
// $('img') => <img> 객체 3개를 return
$('img').css('width', 250);
// 함수를 2초마다 실행합니다.
// 2000 => 2000 milisecond => 2초
setInterval(function () {
// 첫 번째 이미지를 마지막으로 보냅니다.
// first() => <img>객체 3개중에 첫번째를 선택
// append를 할 객체가 이미 html에 존재하면, jquery는
// 기존 위치에 있는객체는 삭제하고 새로 변경되는 위치에 추가(이동)
$('img').first().appendTo('body');
}, 2000);
});
</script>