728x90
반응형
목차
each()
일반적인 for문처럼 object와 배열 모두 사용할 수 있는 반복 함수이다.
- $.each(object, function(index, item){});
- $('selector').each(function(index,item){});
<script>
$('.list li').each(function (index, item) {
$(item).addClass('li_0' + index);
})
</script>
<body>
<ul class="list">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ior sit amet.</li>
<li>Lorem ipsum </li>
</ul>
</body>
// <li class="li_01">Lorem ipsum dolor sit amet.</li>
// <li class="li_02">Lorem ior sit amet.</li>
// <li class="li_03">Lorem ipsum.</li>
</html>
CSS()
선택한 요소의 style 속성을 수정한다.
- $('selector').css ('CSS 문법');
$('p').css("color #f00");
html() & text()
선택한 요소안에 내용을 가져오가나 다른 내용으로 수정한다.
- $('selector').html();
- $('selector').text();
let str = $('h1').html(); //h1의 내용을 가져온다
$('div').html('<h1>APPLE</h1>'); //div 요소의 내용을 <h1>APPLE</h1>로 변경한다
append()
선택한 요소의 내용의 끝에 추가하거나 잘라서 붙여넣을 수 있다.
- $('selector').append();
<p>안녕하세요 클린기록입니다.</p> //해당 태그가 존재할 때
$('p').append('반갑습니다.'); // 작성시
<p>안녕하세요 클린기록입니다. 반갑습니다.</p> // 출력한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!--jOuery CDN 연결-->
//첫 줄과 마지막 줄 이동
<script>
function change(){
$('p:last').append($('p:first'));
}
</script>
</head>
<body>
<p>첫 번째 </p>
<p>마지막 번째 </p>
<form>
<input type="button" value="첫 줄과 마지막 줄의 이동" onclick="change()"/>
</form>
</body>
</html>
wrap()
선택한 요소를 원하는 태그로 감싼다.
- $('selector').wrap();
$('p').wrap('<div id='' class=''></div>');
// p태그를 div태그로 감싼다.
clone()
선택한 요소를 복제한다.
- $('selector').clone();
$('span').clone().appendTo('h1'); //span태그를 복사해 h1태그 안에 넣어라
<!doctype html>
<html lang="ko">
<head>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'span' ).clone().appendTo( 'h1' );
} );
</script>
</head>
<body>
<h1></h1>
<p><span>Lorem ipsum dolor.</span></p>
//결과값
<h1><span>Lorem ipsum dolor.</span></h1>
<p><span>Lorem ipsum dolor.</span></p>
</body>
</html>
width(), height()
선택한 요소의 가로/세로 크기를 반환하거나 변경한다.
- $('selector').width();
- $('selector').height();
$('div').width('100px');
$('div').height('200px');
<!doctype html>
<html lang="ko">
<head>
.div {
width: 100px;
height : 200px;
}
</style>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready( function() {
let divWidth = $( '.div' ).width(); //크기 반환
let divHeight = $('.div').height(); //크기 반환
$( '.divWidth' ).append( divWidth ); //반환된 값 p 태그에 부여
$( '.divWidth' ).append( divHeight ); //반환된 값 p 태그에 부여
} );
</script>
</head>
<body>
<div class="div">
<p class='divWidth'></p>
<p class='divheight'></p>
</div>
</body>
</html>
val(), form
양식의 값을 가져오거나 설정한다.
- $('selector').val();
$('input').val('helloworld); //input의 value 값에 helloworld라고 넣는다
$('input').val(); //input의 value값을 가져온다.
<!doctype html>
<html lang="ko">
<head>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button#btnInputClick' ).click( function() {
var btn = $( 'input#btnInput').val();
alert( btn ); //btnInput에 입력된 값 가져오기
} );
} );
</script>
</head>
<body>
<p>
<input type="text" id="btnInput">
<button id="btnInputClick">Click</button>
</p>
</body>
</html>
728x90
반응형
'개발기록 > 자바스크립트 & jQuery' 카테고리의 다른 글
| jQuery 시각효과 & 애니메이션 [jQuery 도장깨기] (0) | 2022.04.22 |
|---|---|
| Javascript & jQuery 이벤트란, 이벤트 핸들러 알아보기 (0) | 2022.04.20 |
| jQuery 도장깨기, 요소탐색 방법 first / last / nth-child (0) | 2022.04.18 |
| jQuery 도장깨기, 라이브러리 연동, 기본 문법 알아보기 (0) | 2022.04.15 |
| Javascript DOM 기능, DOM 객체종류 알아보기 [자바스크립트 도장깨기] (0) | 2022.04.15 |
댓글