728x90
1. 수치 조작 메서드
선택한 객체의 사이즈 및 위치 사이즈를 가지고 오거나 변경이 가능하다.
1) 1) $('선택자').width() - 선택된 대상의 가로 사이즈를 가지고 오거나 변경
$('body').width() <-- body의 가로 사이즈를 가지고 온다.
$('body').width(500) <-- body의 가로 사이즈를 500으로 변경한다.
2) $('선택자').height() - 선택된 대상의 세로 사이즈를 가지고 오거나 변경
$('body').height() <-- body의 세로 사이즈를 가지고 온다.
$('body').height(500) <-- body의 세로 사이즈를 500으로 변경한다.
3) $('선택자').scrollLet() - 수평 스크롤 이동 높잇값을 반환.
4) $('선택자').scrollTop() - 수직 스크롤의 이동 높잇값을 반환.
$(window).scrollTop() <-- 브라우저의 스크롤 위치 값을 가지고 온다.
$(window).scrollTop(100) <-- 브라우저의 스크롤 위치 값을 100으로 변경한다.
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
$('#myScroll').css('top',(scrollTop + 100) + 'px');
});
var count = 1;
$('#animate').click(function(){
$('#animate-target').animate({
left : (count*100)+'px',
width : (count*100)+'px'
},500);
count ++;
});
});
</script>
<style type="text/css">
#myScroll{
background: #fff;
width : 100px;
position: absolute;
bordoer : 10px solid #006888;
right : 0;
top : 0;
/* position: absolute;
블럭 순서를 무시하고 z-index와 top, left, right 좌표값으로 정렬 가능하게 하는 옵션
좌표값으로 덮어쓰여지도록 만들어지는 css속성
*/
}
#contaner{
background : #000;
height : 1500px;
color : #fff;
position : relative;
/*
position : relative - 태그를 순차적으로 정렬(기본값)
*/
}
#contaner2{
background : #ff1022;
height : 1500px;
color : #fff;
position : relative;
}
#animate-target{
width : 100px;
height :100px;
background: #fff;
position: absolute;
top: 200px;
}
</style>
</head>
<body>
<div id="contaner">
컨테이너 표기
<button type="button" id="animate">무브무브</button>
<div id="animate-wrap">
<div id="animate-target"></div>
</div>
</div>
<div id="contaner2">
컨테이너 표기
</div>
<div id="myScroll">
안녕하세요
</div>
</body>
2. 객체 편집 메서드
- 선택한 객체의 옵션(메서드 위치옵션 포함) 위치에 html 요소를 삽입
1) 1) $('선택자').before('html 요소') - 선택한 대상의 이전 위치에 html 삽입
2) $('선택자').after('html 요소') - 선택한 대상의 다음 위치에 html 삽입
3) $('선택자').append('html 요소') - 선택한 대상의 자식요소에 제일 끝에 html 삽입
4) $('선택자').prepend('html 요소') - 선택한 대상의 자식요소에 제일 처음에 html 삽입
5) $('선택자').clone() - 선택한 대상을 복제한다.
<script type="text/javascript">
$(function(){
$('#beforeAfterBtn').click(function(){
$('#center').before('<div>이전</div>');
$('#center').after('<div>다음</div>');
});
$('#appendBtn').click(function(){
var len = $('#addTr').find('tr').length;
$('#addTr').append('<tr><td>마지막'+ len +'</td></tr>');
});
$('#prependBtn').click(function(){
var len = $('#addTr').find('tr').length;
$('#addTr').prepend('<tr><td>처음'+ len +'</td></tr>');
});
$('#cloneBtn').click(function(){
//clone 변수에 #cloneTarget 복제한다.
var clone = $('#cloneTarget').clone();
console.log(clone,' << clone');
//.clone() 메서드로 복제시 clone에 담긴 객체가 조회 가능하다.
clone.find('h2').text('월욜월욜');
console.log(clone.html(),'<< clone');
$('#clonecopy').html(clone.html());
});
});
</script>
</head>
<body>
<h1> before after </h1>
<div id="center">
중앙
</div>
<button type="button" id ="beforeAfterBtn">다음과 이전 html 삽입</button>
<h1> append prepend</h1>
<table>
<tbody id ="addTr">
<tr><td>중앙</td></tr>
</tbody>
</table>
<button type="button" id="appendBtn"> append </button>
<button type="button" id="prependBtn"> prepend </button>
<h1> clone </h1>
<div id="cloneTarget">
<h2> 워료일 오후 3시 40분 </h2>
</div>
<div id="clonecopy">
</div>
<button type="button" id ="cloneBtn"> 복제 </button>
</body>반응형
'[YERIEL] 개발일기 > .etc' 카테고리의 다른 글
| 객체 편집 메서드 실습 (0) | 2020.03.31 |
|---|---|
| 동적 바인딩 & 트리거 & 이벤트 제거 (0) | 2020.03.30 |
| 속성 조작 메서드 (0) | 2020.03.30 |
| jquery 시작하기 (0) | 2020.03.24 |
| jquery - 탐색 선택자 (0) | 2020.03.24 |
댓글