일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 무료
- 우체국 우편번호
- php
- 웹호스팅
- 웹퍼블리싱
- php호스팅
- 무료홈페이지
- 문자열 뒤집기
- 무료제작
- 홈페이지제작
- 마우스 오른쪽 버튼
- 웹퍼블리셔
- postcodify
- 무료 호스팅
- 호스팅
- 자바키워드
- 클릭해제
- 우편번호 API
- 퍼빌리셔
- 마우스오른쪽
- 새우편번호
- 무료사이트
- 글자뒤집기
- 복사방지
- 자바스크립트
- 무료 홈페이지
- 무료 웹 호스팅
- 무료서버
- 무료 홈페이지 제작
- 무료호스팅
Archives
- Today
- Total
Developer Factory
[jQury] 1. 함수 - (예제15장) .addClass .removeClass .attr('속성값', 값); .removeAttr .html() .text() .empty() .appendTo( 'body') .append .clone() 본문
Developer/Jquery
[jQury] 1. 함수 - (예제15장) .addClass .removeClass .attr('속성값', 값); .removeAttr .html() .text() .empty() .appendTo( 'body') .append .clone()
Jeremy.Park 2014. 6. 24. 09:57① 객체.함수() -> 값을 꺼낼 때
② 객체.함수(값) -> 값을 설정
③ 객체.함수(function(...){ return 값;}); -> 함수의 리턴값으로 값 설정
④ 객체.함수({key:값, . . .}); 한꺼번에 여러개의 값을 설정하고 싶을때
.addClass //라벨 붙이기
$(document).ready( function () {
$( 'h1').addClass( function (index) {
return 'class' + index;
});
});
.removeClass //라벨 제거
$(document).ready( function () {
$( 'h1').removeClass( 'select');
});
.attr('속성값', 값);
$(document).ready( function () {
// 변수를 선언합니다.
var src = $( 'img').attr( 'src');
// 출력합니다.
alert(src);
});
// 값 설정하기 - 자동 비율 조정됨.
$(document).ready( function () {
$( 'img').attr( 'width', 200);
});
// 값 자리에 함수 사용가능
$(document).ready( function () {
$( 'img').attr( 'width', function (index) {
return (index + 1) * 100;
});
});
$(document).ready( function () {
$( 'img').attr({
width: function (index) {
return (index + 1) * 100;
},
height: 100
});
});
.removeAttr // 속성 제거하기
$(document).ready( function () {
$( 'h1').removeAttr( 'data-index');
});
// 색상을 배열로 선언하여 지정해주기 방법
$(document).ready( function () {
// 변수를 선언합니다.
var color = [ 'red', 'white', 'purple'];
// 문서 객체의 스타일을 변경합니다.
$( 'h1').css( 'color', function (index) {
return color[index];
});
});
$(document).ready( function () {
// 변수를 선언합니다.
var color = [ 'red', 'white', 'purple'];
// 문서 객체의 스타일을 변경합니다.
$( 'h1').css({
color: function (index) {
return color[index];
},
backgroundColor: 'black'
});
});
$(document).ready( function () {
// 변수를 선언합니다.
var html = $( 'h1').html();
// 출력합니다.
alert(html); // Header-0 출력함
});
<h1 >Header-0 </h1 >
<h1 >Header-1 </h1 >
<h1 >Header-2 </h1 >
$(document).ready( function () {
// 변수를 선언합니다.
var text = $( 'h1').text();
// 출력합니다. 첫번째만 아닌 전체 붙여서 출력한다.
alert(text); // Header-0 Header-1 Header-2
});
<h1 >Header-0 </h1 >
<h1 >Header-1 </h1 >
<h1 >Header-2 </h1 >
$(document).ready( function () {
$( 'div').html( '<h1>$().html() Method</h1>');
});
<div ></div >
<div ></div >
<div ></div >
$().html() Method
$().html() Method
$().html() Method
$(document).ready( function () { //.text 값을 꺼낼때 모두 꺼내준다.
$( 'div').text( '<h1>$().html() Method</h1>');
});
<div ></div >
<div ></div >
<div ></div >
<h1>$().html() Method</h1>
<h1>$().html() Method</h1>
<h1>$().html() Method</h1>
$(document).ready( function () {
$( 'h1').first().remove();
});
<div >
<h1 >Header-0 </h1 >
<h1 >Header-1 </h1 >
</div >
Header-1
// 시작 태그와 끝태그 사이에 있는 내용 다 지우기
$(document).ready( function () {
$( 'div').empty();
});
<div >
<h1 >Header-0 </h1 >
<h1 >Header-1 </h1 >
</div >
// 태그를 만들어라~ .appendTo ~에 붙여라
$(document).ready( function () {
$( '<h1></h1>').html('Hello World .. !' ).appendTo('body');
});
// 이미지 태그를 만들라 1
$(document).ready( function () {
$( '<img />').attr('src' , 'Chrysanthemum.jpg').appendTo('body' );
});
// 이미지 태그를 만들라 2
$(document).ready( function () {
$( '<img />', {
src: 'Chrysanthemum.jpg',
width: 350,
height: 250
}).appendTo( 'body');
});
$(document).ready( function () {
// 변수를 선언합니다.
var h1 = '<h1>Header1</h1>';
var h2 = '<h2>Header2</h2>';
// 문서 객체를 추가합니다.
$( 'body').append(h1, h2, h1, h2);
});
Header1
Header2
Header1
Header2
Header2
Header1
Header2
$(document).ready( function () {
// 변수를 선언합니다.
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;
});
});
//** .append 대신 .html 을 사용할수 있지만 기존 태그안에 내용이 있다면 지워진다
윤인성
서울특별시 강서구
윤하린
서울특별시 광진구
윤인아
미국 메사추세츠
$(document).ready( function () { // 롤링이미지 만들기
// .image의 크기를 조정합니다.
$( 'img').css( 'width', 250);
// 함수를 2초마다 실행합니다.
setInterval( function () {
// 첫 번째 이미지를 마지막으로 보냅니다.
$( 'img').first().appendTo( 'body');
}, 2000);
});
<img src ="Chrysanthemum.jpg" />
<img src ="Desert.jpg" />
<img src ="Hydrangeas.jpg" />
<img src ="Jellyfish.jpg" />
<img src ="Koala.jpg" />
$(document).ready( function () {
/*
$('div').html(function()index,oldvalue){
return oldvalue + 'haha<h1>nono</h1>';
}
*/
//$('div').append('<h1>00</h1>');
$( 'div').append($( 'h1'));
});
<h1 >HEADER </h1 >
<hr /><div >헐~~~ 기존값에 + 하기 </div ><hr />
헐~~~ 기존값에 + 하기
HEADER
// 복제하기~~
$(document).ready( function () {
$( 'div').append($( 'h1').clone());
});
<h1 >HEADER </h1 >
<hr /><div ></div ><hr />
HEADER
HEADER
'Developer > Jquery' 카테고리의 다른 글
[jQury] 함수 호출 패턴 (0) | 2014.06.24 |
---|---|
[jQury] 2. 이벤트 - (예제16장) .on mouseenter/mouseleave(.hover) .click .off canvas .trigger (.click()) .stopPropagation() .mouseover() . mouseenter() (0) | 2014.06.24 |
jdbc 데이터베이스 연결 연습 1 (0) | 2014.06.24 |
정규 표현식 Regular Expressions (0) | 2014.06.24 |
jQuery 제이쿼리 소스 관련 게시판 모음 (1) | 2014.06.15 |