728x90
728x90
jQuery를 이용하여 DOM 요소를 찾기 위해서, 유효한 CSS선택자를 jQuery 함수로 전달해야 한다. jQuery 함수들은 모두 DOM API를 사용한다. 예를 들어, $ 함수는 getElementById() 와 querySelectorAll()과 같은 메소드들을 사용하고, attr() 은 getAttribute() 메소드를 사용한다.
제이쿼리 돔 실습 내용 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery DOM</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.myclass {
color: skyblue;
background: gray;
font-size: 17px;
}
</style>
</head>
<body>
<header>
<h1>jquery DOM</h1>
</header>
<div id="container">
<button id="btn1">버튼 1</button>
<p class="para1">첫번째 문장입니다.</p>
<p class="para2">두번째 문장입니다.</p>
<div id="myDiv"></div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
</div>
<script>
$(document).ready(function(){
//css 멀티 속성 변화
$('p.para1').css({
color: 'red', background: 'yellowgreen',
'font-size' : '1.5em', border : '3px solid black'
//하이픈이 들어가면 홑따옴표 써줘야 합니다.
});
// 클래스 추가, 제거, 한번에 하는 toggle
// $('p.para2').addClass('myclass');
// $('p.para2').removeClass('myclass');
$('#btn1').on('click', function(){
$('p.para2').toggleClass('myclass');
});
//텍스트 내용 및 html 수정 : text()는 텍스트만 가능 / html()은 태그도 사용 가능
$('#myDiv').text('Hello World');
$('#myDiv').html('<h3>Hello World</h3>');
//alert($('#myDiv').text());
//내용 추가
$('ul').append('<li>리스트아이템 끝부분</li>');
$('ul').prepend('<li>리스트아이템 앞부분</li>');
$('.para1').appendTo('.para2'); //첫번째, 두번째 문장 순서 바뀜
//$('.para1').prependTo('.para2');
$('ul').before('<h4>Hello</h4>')
$('ul').after('<h4>World!</h4>')
//내용 제거, 태그와 함께 제거
//$('ul').empty(); // 콘솔에서 보면 ul태그는 사라지지 않고 ul 안의 텍스트만 사라짐
$('ul').detach(); //다사라짐
});
</script>
</body>
</html>
each 사용법
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});api.jquery.com
제이쿼리 돔 실습 내용 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery DOM</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.myclass {
color: skyblue;
background: gray;
font-size: 10px;
}
</style>
</head>
<body>
<header>
<h1>jquery DOM</h1>
</header>
<div id="container">
<button id="btn1">버튼 1</button>
<p class="para1">첫번째 문장입니다.</p>
<p class="para2">두번째 문장입니다.</p>
<div id="myDiv"></div>
<ul id="list">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
<a href="https://www.google.co.kr/">구글링크</a>
<input type="text" id="newItem">
<ul class="" id="users"></ul>
</div>
<script>
$(document).ready(function(){
//태그의 Attribute 속성 추가 및 제거
$('a').attr('target', '_blank');
$('a').removeAttr('target');
//태그로 감싸기 Wrap , WrapAll
//$('p').wrap('<h2>');
$('p').wrapAll('<h2>'); //p2개를 h1태그가 전체적으로 감쌈
//글자를 입력할 때마다 event로 변수 코드로 넣어줌
$('#newItem').on('keyup', function(e){
let code = e.which;
if(code == 13){ //엔터키(13)를 입력할 때마다 값이 들어간다.
e.preventDefault();
$('ul').append(`<li>${e.target.value}</li>`);
}
}); // $(selector).on(eventType, function(){ });
//배열요소를 리스트에 추가하기
const myArr = ['사과', '당근', '배', '수박'];
$.each(myArr, function(i, val){ // i : 배열의 인덱스, val : 배열의 값
$('#users').append('<li>'+val+'</li>');
});
let newArr = $('ul#list li').toArray();
console.log(newArr);
$.each(newArr, function(i2, val2){
console.log(val2.innerHTML);
});
});
</script>
</body>
</html>
728x90
728x90
'Javascript > JQuery' 카테고리의 다른 글
| 오류: 다른 요소(element)도 같이 선택되는 문제 (1) | 2019.12.05 |
|---|---|
| jQuery (5) Ajax 기술 사용해서 json 파싱하기 (0) | 2019.07.03 |
| jQuery (4) 애니메이션 효과 (0) | 2019.06.28 |
| jQuery (2) 제이쿼리 이벤트 (0) | 2019.06.28 |
| jQuery (1) 제이쿼리 정의, 역사, 개요 (0) | 2019.06.28 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
