ㅁ 요소 선택도 jQuery 방식으로, 메소스도 jQuery 측에서 제공하는 메소드들을 이용했다.
이런 것들을 순수 자바스크립트 방식으로 하기에는 복잡하다.
제공하지 않는 기능들도 많고. 그래서 jQuery를 사용한다.
ㅁ 지금까지 요소 선택을 했다. 이제 요소의 속성값을 가져오거나 변경하는 것을 해본다.
자바스크립트에서 DOM 객체 선택해서 property를 가져오거나 변경했었다. 그런걸 jQuery로 해본다.
- 자주 사용했던 속성들과 관련된 메소드들이 jQuery 측에서 제공되고 있다.
자바스크립트 방식과 비교해가면서 사용해본다.
ㅁ innerText 및 innerHTML 속성 관련 메소드
- 두 속성은 해당 요소의 컨텐츠 영역값을 가지고 있는데, 그때 그 컨텐츠 영역에 html 태그가 있다면 그 태그까지 포함이 가능한게 innerHTML 속성이고, 태그를 제외한 텍스트만 가지는게 innerText 속성이다.
- 이 둘은 특정 DOM 객체의 property다.
그래서 DOM객체.property 로 접근했다.
(1) innerText 속성 관련 메소드
- 요소.text() : 해당 요소의 innerText 속성값 반환
- 요소.text('문구') : 해당 요소의 innerText 속성값 변경
(2) innerHTML 속성 관련 메소드
- 요소.html() : 해당 요소의 innerHTML 속성값 반환
- 요소.html('문구') : 해당 요소의 innerHTML 속성값 변경
- 여기서의 요소는 jQuery 방식으로 선택한 요소 객체를 뜻한다.
순수 자바스크립트 방식으로 선택한 요소 객체로는 jQuery용 메소드를 쓸 수 없다.
굳이 쓰고 싶다면 jQuery wrapper 기능을 이용해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>innerText 및 innerHTML 속성</h2>
<div id="content"><b>box</b></div>
<div class="content">테스트1</div>
<div class="content">테스트2</div>
<div class="content">테스트3</div>
<button onclick="fnContentProp();">확인</button>
<script>
function fnContentProp() {
// innerHTML 값 가져오기
// 1) 자바스크립트 방식
console.log(document.getElementById('content').innerHTML);
// 2) jQuery 방식
console.log( $('#content').html() );
}
</script>
</body>
</html>
- innerText랑 innerHTML이랑 html 태그 차이 밖에 없다.
- 자바스크립트, jQuery 두 방식 다 결과가 같다.
jQuery는 요소 선택하는 것도 간결하고, 속성에 직접 접근할 필요없이 메소드 호출만으로 진행되었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>innerText 및 innerHTML 속성</h2>
<div id="content"><b>box</b></div>
<div class="content">테스트1</div>
<div class="content">테스트2</div>
<div class="content">테스트3</div>
<button onclick="fnContentProp();">확인</button>
<script>
function fnContentProp() {
// innerHTML 값 수정하기
// 1) 자바스크립트 방식
const divList = document.getElementsByClassName('content'); // [div, div, div] 배열에 요소객체가 담겨있다.
// divList.innerHTML = '문구'. 이렇게 못 함. innerHTML 속성은 요소 객체가 가지 배열이 가지는 게 아니다.
for(let divEl of divList) {
divEl.innerHTML = '<b>javascript 방식으로 변경</b>';
}
}
</script>
</body>
</html>
- 3개의 요소를 선택해서 일괄적으로 '동일한 문구'로 변경하기.
- 자바스크립트 방식은 선택된 모든 요소에 innerHTML 값을 변경하고자 한다면 일일이 요소 객체에 접근해야 한다.
divList는 배열이기 때문에 배열.innerHTML = '문구' 이렇게 변경할 수 없다.
innerHTML은 오로지 요소 객체가 가지는 속성이다. 배열에는 innerHTML 속성이 없다.
각 인덱스에 순차적으로 그 요소 객체에 접근해서 속성을 수정해야 한다.
그러면 어쩔 수 없이 자바스크립트 방식은 반복문을 돌려야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>innerText 및 innerHTML 속성</h2>
<div id="content"><b>box</b></div>
<div class="content">테스트1</div>
<div class="content">테스트2</div>
<div class="content">테스트3</div>
<button onclick="fnContentProp();">확인</button>
<script>
function fnContentProp() {
// innerHTML 값 수정하기
// 2) jQuery 방식
$('.content').html('<b>jQuery 방식으로 변경</b>');
}
</script>
</body>
</html>
- 선택된 요소들을 동일한 문구로 변경하고자 한다면 그냥 곧바로 html메소드를 호출해서 변경할 문구를 전달하면 된다.
- jQuery로는 코드가 한줄로 끝난다.
내가 직접 반복문 돌려서 순차적으로 요소 객체에 접근할 필요 없다. 메소드에 그런 코드(반복문)가 이미 짜여져 있다.
- $('.content')로 클래스가 content인 요소를 선택한다.
자바스크립트 방식의 getElementsByClassName처럼 다수의 요소가 선택되었지만 엄연히 배열의 형태는 아니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>innerText 및 innerHTML 속성</h2>
<div id="content"><b>box</b></div>
<div class="content">테스트1</div>
<div class="content">테스트2</div>
<div class="content">테스트3</div>
<button onclick="fnContentProp();">확인</button>
<script>
function fnContentProp() {
// 2) jQuery 방식
$('.content').html('<b>jQuery 방식으로 변경</b>');
// innerHTML 값을 매번 다르게 수정하기
// 매번 함수 실행시마다 첫번째 인자값으로는 접근되는 요소의 인덱스,
// 두번째 인자값으로는 접근되는 요소의 innerHTML값이 전달됨.
$('.content').html(function(index, html) {
console.log('index: ', index, 'html: ', html);
return '안녕하세요 ' + index;
})
// '테스트n'에서 '<b>jQuery 방식으로 변경</b>'으로 바뀌고, 또 '안녕하세요 n'으로 바뀜.
}
</script>
</body>
</html>
- innerHTML 값을 매번 다르게 수정하기.
선택된 요소들에 접근할 때 마다 매번 다른 문자열로 변경한다.
- 클래스가 content인 요소를 선택하고 html 메소드 호출시, function을 전달할 수 있다. (callback 함수)
html 메소드 호출시 내부적으로 실행시킬 함수를 전달할 수 있다.
html 메소드 내에서 전달된 function이 매번 실행된다. 선택된 요소의 개수만큼 실행된다.
선택된 요소에 순차적으로 접근할 때 마다 function이 실행된다.
- 그리고 알게 모르게 function이 실행될 때 마다 두 개의 인자값이 매번 전달된다.
첫번째 인자값으로는 접근된 요소의 인덱스 수가,
두번째 인자값으로는 접근된 요소의 컨텐츠 영역값(innerHTML 속성값)이 전달된다.
매개변수를 두 개 작성해두면 이 function이 실행될 때 마다 전달되는 값을 받아볼 수 있다.
그래서 function에서 저 두 인자값을 활용할 수 있다. (return값에도 쓸 수 있다)
- function이 실행될 때 마다 결과값을 return할 수 있다.
이때 return되는 값으로 innerHTML 속성값이 변경된다.
순차적으로 접근할 때 마다 그 요소에 적용시키고자 하는 속성값을 반환하면 된다.
- text메소드도 마찬가지로 콜백함수를 전달시킬 수 있다.
ㅁ html 메소드를 이용해서 특정 요소의 innerHTML 속성값을 가져오거나 문구를 전달해서 변경하는 것을 해봤다.
- 선택된 요소가 한개든 여러개든 동일한 문구로 변경하고자 한다면 해당 메소드 호출시 문구를 전달하면 된다.
- 선택된 요소에 순차적으로 접근하면서 각기 다른 문구를 출력하고자 한다면 callback함수를 기술하면 된다.
function을 제시하면 순차적으로 접근될 때 마다 function이 실행되고 그 때 return 되는 값으로 innerHTML 값이 변경된다.
- 그리고 함수가 실행될 때 순차적으로 접근되는 인덱스 수라든가 현재 그 요소의 innerHTML 값이 매번 전달된다.
그걸 받아서 function 안에서 활용할 수 있다.
ㅁ style 속성 관련 메소드
(1) 요소.css('css속성') : 해당 css 속성값을 반환
(2) 요소.css('css속성', 'css속성값'); : 해당 요소에 전달된 css 반영
(3) 요소.css( {css속성 : 'css속성값',
css속성 : 'css속성값'} ) : 해당 요소에 다수의 css 한꺼번에 반영
- 마치 getter, setter 처럼.
- 요소에 반영시키고자 하는 스타일 정보가 많으면. 여러 스타일을 적용시키고 싶다면.
중괄호 블록을 제시해서 객체의 형태로 css를 작성해서 넘길 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>innerText 및 innerHTML 속성</h2>
<ul class="ott" style="background-color: lightblue;">
<li id="netflix"><a href="#">넷플릭스</a></li>
<li id="disney"><a href="#">디즈니플러스</a></li>
<li id="tving"><a id="tving-link" href="#">티빙</a></li>
<li id="wave"><a href="#">웨이브</a></li>
<li id="coupang"><span>쿠팡플레이</span></li>
</ul>
<button onclick="fnStyleProp();">확인</button>
<script>
</script>
</body>
</html>
- 기본 세팅. 전 chapter에서 사용한 요소를 가져왔다.
- 요소 생성 후 바로 실행이 아니라 버튼 클릭 이벤트 발생시 실행되게끔 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>innerText 및 innerHTML 속성</h2>
<ul class="ott" style="background-color: lightblue;">
<li id="netflix"><a href="#">넷플릭스</a></li>
<li id="disney"><a href="#">디즈니플러스</a></li>
<li id="tving"><a id="tving-link" href="#">티빙</a></li>
<li id="wave"><a href="#">웨이브</a></li>
<li id="coupang"><span>쿠팡플레이</span></li>
</ul>
<button onclick="fnStyleProp();">확인</button>
<script>
function fnStyleProp(){
// css 값 가져오기
// (1) JavaScript 방식
console.log(document.querySelector('.ott').style.backgroundColor);
// (2) jQuery 방식
console.log( $('.ott').css('backgroundColor') );
}
</script>
</body>
</html>
rgb는 VSCode에서 색상명 앞 네모를 클릭해서 확인할 수 있다.
- jQuery 방식은 $('선택자')로 요소 선택하고 css 속성을 수정(style 속성 반영)하고 싶으면 css 메소드 사용.
- 자바스크립트 방식과 jQuery 방식에 약간의 차이가 있을 수 있다.
자바스크립트 방식은 색상명이 나오고 jQuery 방식은 색상의 rgb 함수값이 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>innerText 및 innerHTML 속성</h2>
<ul class="ott" style="background-color: lightblue;">
<li id="netflix"><a href="#">넷플릭스</a></li>
<li id="disney"><a href="#">디즈니플러스</a></li>
<li id="tving"><a id="tving-link" href="#">티빙</a></li>
<li id="wave"><a href="#">웨이브</a></li>
<li id="coupang"><span>쿠팡플레이</span></li>
</ul>
<button onclick="fnStyleProp();">확인</button>
<script>
function fnStyleProp(){
// css 값 가져오기
// (1) JavaScript 방식
console.log(document.querySelector('.ott').style.backgroundColor);
// (2) jQuery 방식
console.log( $('.ott').css('backgroundColor') );
// css 수정하기 ( 네 개의 a요소들에 순차적으로 접근해서 밑줄 없애기)
// (1) JavaScript 방식
const aList = document.querySelectorAll('.ott a'); // [a, a, a, a]
for(let aEl of aList) {
aEl.style.textDecoration = 'none';
}
// (2) jQuery 방식
$('.ott a').css('fontSize', '32px'); // jQuery는 camel case도 되고
$('.ott a').css('font-size', '32px'); // 원래 css명으로도 가능하다. (자바스크립트는 camel case만 가능)
$('.ott a').css('fontWeight', '900').css('color', 'red'); // 메소드 체이닝 가능
$('#coupang > span').css( {
backgroundColor : 'pink',
color : 'green',
fontSize : '32px'
})
}
</script>
</body>
</html>
- 원래 css에서는 font-size다. jQuery에서는 font-size, fontSize 다 가능.
자바스크립트 방식은 무조건 camel case.
jQuery는 camel case도 되고, 원래 css명(dash 구분자)으로도 가능하다.
- jQuery가 좋은게 요소 객체를 한번만 선택해두고 메소드를 연속적으로 호출할 수 있다. (메소드 체이닝이 가능하다)
여러 css를 적용할 경우 이렇게 연이어서 호출이 가능하다.
왜냐면 css 메소드가 사실 style을 변경할 뿐만 아니라, 선택된 요소 객체를 다시 반환해주기 때문이다.
메소드를 호출한 곳으로 선택된 요소가 다시 반환되어 돌아오기 때문에 곧바로 연이어서 메소드를 호출할 수 있다.
(위에서 한 html 메소드도 메소드 체이닝이 가능하다)
- css 메소드를 세번 연속적으로 호출해도 되지만, css 메소드 호출시 내가 반영시키고자 하는 style 정보들을 중괄호 블럭으로 하나의 객체로 만들어서 전달해도 된다.
ㅁ 또 자주 사용했던 속성이 input 요소의 value 속성이다.
- input 요소 가지고 value 값을 가져오거나 부여해보았다.
그걸 다 jQuery의 val 라는 메소드로 할 수 있다.
ㅁ value 속성 관련 메소드
(1) 요소.val() : 해당 요소의 value 속성값 반환
(2) 요소.val('문구') : 해당 요소의 value 속성값 변경
- val 메소드도 요소 객체를 다시 반환해줘서 메소드 체이닝 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>value 속성</h2>
아이디 : <input type="text" id="userId">
<button onclick="fnValueProp();">확인</button>
<script>
</script>
</body>
</html>
- 기본 세팅.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>value 속성</h2>
아이디 : <input type="text" id="userId">
<button onclick="fnValueProp();">확인</button>
<script>
function fnValueProp() {
// value 값 가져오기
// (1) JavaScript 방식
console.log(document.getElementById('userId').value);
// (2) jQuery 방식
console.log( $('#userId').val() );
}
</script>
</body>
</html>
- 자바스크립트 방식으로 선택한 요소는 property로 value라는 속성이 있다.
그래서 .으로 value 속성에 접근하면 그 값을 가져올 수 있다.
- 입력하고 '확인' 버튼을 누르면 텍스트 상자에 쓰여진 값을 가져올 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>value 속성</h2>
아이디 : <input type="text" id="userId">
<button onclick="fnValueProp();">확인</button>
<script>
function fnValueProp() {
// value 값 수정하기
// (1) JavaScript 방식
document.getElementById('userId').value = ''; // 입력 후 텍스트 상자를 초기화하기 위해 빈문자열 대입
// (2) jQuery 방식
$('#userId').val(''); // 입력 후 텍스트 상자를 초기화하기 위해 빈문자열 대입
}
</script>
</body>
</html>
- 버튼 눌러서 처리된 후에 사용자가 다시 입력하기 편하게끔 초기화할 때 value 속성값에 빈문자열을 대입한다.
(value값 수정)
- 무언가 입력하고 버튼을 누르는 순간 텍스트상자의 입력값이 사용자가 입력한 값에서 내가 대입한 값으로 변한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>value 속성</h2>
아이디 : <input type="text" id="userId">
<button onclick="fnValueProp();">확인</button>
<script>
function fnValueProp() {
$('#userId').val('jQuery방식').css('color', 'red'); // 메소드 체이닝 가능
}
</script>
</body>
</html>
- 문구 변경 후 스타일 지정까지 한번에 시키고 싶다면 곧바로 css 메소드를 호출해서 메소드 체이닝을 할 수 있다.
val 메소드도 변경된 후에 요소 객체를 다시 반환해주기 때문에 곧바로 style을 효과를 줄 수 있다.
- css 메소드 먼저 호출하고 val 메소드를 호출해도 되고, 그 반대도 가능하다.
둘다 요소 객체를 반환해주기 때문에.
ㅁ className 속성 관련 메소드
(1) 요소.addClass('클래스명') : 해당 요소에 클래스 추가
(2) 요소.removeClass('클래스명') : 해당 요소에 클래스 제거
(3) 요소.toggleClass('클래스명') : 해당 요소에 클래스 반전
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>className 속성</h2>
<div id="hello">hello world</div> <br>
<button onclick="fnHide();">숨기기</button>
<button onclick="fnShow();">보이기</button>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>className 속성</h2>
<div id="hello">hello world</div> <br>
<button onclick="fnHide();">숨기기</button>
<button onclick="fnShow();">보이기</button>
<script>
function fnHide() {
// #hello 요소가 사라지도록
// (1) JavaScript 방식
document.getElementById('hello').style.display = 'none';
// (2) jQuery 방식
$('#hello').css('display', 'none');
}
function fnShow() {
// #hello 요소가 보여지도록
// (1) JavaScript 방식
document.getElementById('hello').style.display = 'block';
// (2) jQuery 방식
$('#hello').css('display', 'block');
}
</script>
</body>
</html>
- 기본적으로 div는 display가 block 상태이다.
- 이렇게 css메소드로도 제어가능하지만, className 속성 관련 메소드를 사용할 수도 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
<style>
.blind {
display: none;
}
</style>
</head>
<body>
<h2>className 속성</h2>
<div id="hello">hello world</div> <br>
<button onclick="fnHide();">숨기기</button>
<button onclick="fnShow();">보이기</button>
<script>
function fnHide() {
// #hello 요소에 blind 클래스 추가
$('#hello').addClass('blind');
}
function fnShow() {
// #hello 요소에 blind 클래스 제거
$('#hello').removeClass('blind');
}
</script>
</body>
</html>
- style로 특정 요소의 클래스가 blind인 요소가 있다면, 해당 요소에는 display가 none이 되게끔 style 정보를 둔다.
어떤 요소를 숨기고 싶다면 그 요소에 blind라는 클래스만 부여해주면 된다.
다시 blind라는 클래스를 없애면 다시 화면에 보여진다.
- class 속성값 조작. class 속성값이 property로는 className 속성이다.
이와 관련한 메소드가 3개 있다.
- 이렇게 동적으로 보여졌다가 안보여졌다가, 색상을 부여했다가 제거했다가 이런 효과를 css로 직접 작성해도 되지만
보통 이렇게 스타일을 작성해두고 클래스를 줬다가 없애는 식으로 작성을 한다.
회사에서는 주로 이런 방식으로 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
<style>
.blind {
display: none;
}
</style>
</head>
<body>
<h2>className 속성</h2>
<div id="hello">hello world</div> <br>
<button onclick="fnToggle();">토글</button>
<script>
function fnToggle() {
$('#hello').toggleClass('blind');
}
</script>
</body>
</html>
- 선택한 요소에 인자로 전달한 클래스가 있으면 제거하고, 없으면 추가한다.
- elements 탭에서도 확인 가능.
ㅁ 지금까지 배운 메소드들은 몇몇 속성들에 특화되어 있는 메소드이다.
내부 영역 관련한 메소드, style 관련한 메소드, value 관련한 메소드, class 관련한 메소드를 배워봤다.
얘네들은 워낙 특화되어 있는 속성이기 때문에 메소드가 따로 존재한다.
- 그런데 요소가 가지고 있는 속성이 워낙 많기 때문에 모든 속성들마다 메소드가 다 존재하는 것은 아니다.
메소드가 따로 존재하는 특화된 속성들 외의 기타 속성들을 제어하고자 한다면
HTML Attribute 관련 메소드와 DOM Property 관련 메소드를 사용하면 된다.
ㅁ HTML Attribute 관련 메소드
- html에서 요소 내에 직접 속성을 기술할 수 있다. 이건 html 내에서의 attribute다.
- 요소 내에 직접적으로 작성이 되는 attribute 관련 메소드.
- html 요소 내에 직접적으로 작성되어 있는 속성을 제어하고자 한다면 attr 메소드를 이용하면 된다.
(1) 요소.attr('attr명') : 그냥 속성명만 쓰면 해당 attribute 속성값 반환
(2) 요소.attr('attr명', 'attr값') : 해당 attribute 속성값 변경 (없으면 부여)
(3) 요소.removeAttr('attr명') : 해당 attribute 제거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>HTML Attribute 관련 메소드</h2>
<img src="../assets/assets/image/forest1.jpg" width="192px" id="img-forest"> <br> <!-- attribute 3개다 -->
<button onclick="fnAttribute();">확인</button>
<script>
</script>
</body>
</html>
- 기본 세팅.
- 이 이미지에는 attribute가 3개있다. (src, width, id)
- '확인' 버튼을 클릭하는 순간 이미지가 가지고 있는 특정 attribute를 가져오거나 수정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>HTML Attribute 관련 메소드</h2>
<img src="../assets/assets/image/forest1.jpg" width="192px" id="img-forest"> <br> <!-- attribute 3개다 -->
<button onclick="fnAttribute();">확인</button>
<script>
function fnAttribute() {
// attribute 값 가져오기
// (1) JavaScript 방식
var imgEl = document.getElementById('img-forest');
var srcValue = imgEl.getAttribute('src');
console.log( srcValue );
// (2) jQuery 방식
console.log( $('#img-forest').attr('src') );
}
</script>
</body>
</html>
- attr 메소드에 속성명을 제시하면 속성값을 반환한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>HTML Attribute 관련 메소드</h2>
<img src="../assets/assets/image/forest1.jpg" width="192px" id="img-forest"> <br> <!-- attribute 3개다 -->
<button onclick="fnAttribute();">확인</button>
<script>
function fnAttribute() {
// attribute 값 수정하기
$('#img-forest').attr('src', '../assets/assets/image/flower1.jpg');
$('#img-forest').attr('height', '250px');
$('#img-forest').attr('height', '250px').css('border', '2px dashed pink'); // 메소드 체이닝
}
</script>
</body>
</html>
- attr 메소드에 속성명과 속성값을 제시하면 기존에 그 속성명에 해당하는 속성이 있으면 변경되고 없으면 추가된다.
- attr 메소드를 변경용으로 사용하게 되면 속성을 반영하고 해당 이 요소를 다시금 반환해줘서 메소드 체이닝이 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>HTML Attribute 관련 메소드</h2>
<img src="../assets/assets/image/forest1.jpg" width="192px" id="img-forest"> <br> <!-- attribute 3개다 -->
<button onclick="fnAttribute();">확인</button>
<script>
function fnAttribute() {
// attribute 값 삭제하기
$('#img-forest').removeAttr('width');
}
</script>
</body>
</html>
- width가 사라져서 '확인' 버튼을 누르면 원본크기 이미지로 변경된다.
ㅁ DOM 객체의 Property(속성) 관련 메소드
(1) 요소.prop('prop명') : 해당 property 속성값 반환
(2) 요소.prop('prop명', 'prop값') : 해당 property 속성값 수정
- property는 built-in 되어있어서(기본적으로 가지고 있어서) 제거할 수가 없다.
- prop도 변경한 후에 선택된 요소를 다시 반환해서 메소드 체이닝이 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>DOM Property 관련 메소드</h2>
<img src="../assets/assets/image/city1.jpg" width="192px" id="img-city">
<div id="yesorno">
<input type="radio" name="flag" value="yes" checked> 예
<input type="radio" name="flag" value="no"> 아니오
</div>
<button onclick="fnProperty();">확인</button>
<script>
</script>
</body>
</html>
- 라디오버튼들의 name을 동일하게 줘야 하나의 그룹으로 묶여서 그 중에 하나만이 선택이 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>DOM Property 관련 메소드</h2>
<img src="../assets/assets/image/city1.jpg" width="192px" id="img-city">
<div id="yesorno">
<input type="radio" name="flag" value="yes" checked> 예
<input type="radio" name="flag" value="no"> 아니오
</div>
<button onclick="fnProperty();">확인</button>
<script>
function fnProperty() {
// property 값 가져오기
console.log( $('#img-city').prop('src') );
}
</script>
</body>
</html>
- id가 img-city인 이미지 요소의 src 속성값을 가져올건데 attribute값이 아닌 property값을 가져와본다.
- src는 attribute와 property간에 속성명이 동일하다. (같은 속성이지만 속성명은 다른 경우도 있다)
- attr('src') 메소드는 결과가 ../assets/assets/image/forest1.jpg 이렇게 나왔다.
prop('src') 메소드는 어떤 url 주소가 나왔다.
내가 attribute에 저렇게 작성했지만 실제 property는 저런 정보를 가지고 있다.
어떤 서버의 url주소 같은 걸로 가지고 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>DOM Property 관련 메소드</h2>
<img src="../assets/assets/image/city1.jpg" width="192px" id="img-city">
<div id="yesorno">
<input type="radio" name="flag" value="yes" checked> 예
<input type="radio" name="flag" value="no"> 아니오
</div>
<button onclick="fnProperty();">확인</button>
<script>
function fnProperty() {
// property 값 가져오기
console.log( $('#img-city').prop('src') );
// console.log( $('#yesorno :radio') ); 이러면 2개 선택됨. 이 중 첫번째 요소만을 선택한다.
// console.log( $('#yesorno :radio').first() ); first 메소드를 써도 되고 eq 메소드를 써도 된다.
console.log( $('#yesorno :radio').eq(0).prop('checked') ); // checked는 true, false로 되어있다.
if( $('#yesorno :radio').eq(0).prop('checked') ) {
console.log('그림에 만족한다');
}
else {
console.log('그림에 만족하지 않는다');
}
}
</script>
</body>
</html>
- 라디오 버튼의 checked라는 속성의 property 값을 알아보기.
- id가 yesorno인 div 내에 후손으로 존재하는 type이 radio인 input 요소 객체를 선택한다.
여러개가 나오는데 그 중 eq 메소드로 첫번째 요소만을 선택한다.
- checked 속성은 true / false 값을 가지고 있다. 그래서 조건식으로 많이 쓴다.
- '예'가 선택된 채로 '확인' 버튼을 누른 경우,
각 요소들에 .prop('checked') 메소드를 사용하여 콘솔에 출력하면
첫번째 라디오 버튼은 true가, 두번째 라디오 버튼은 false가 반환된다.
- 위 결과는 '아니오' 라디오버튼을 누르고 '확인' 버튼을 클릭한 결과이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>DOM Property 관련 메소드</h2>
<img src="../assets/assets/image/city1.jpg" width="192px" id="img-city">
<div id="yesorno">
<input type="radio" name="flag" value="yes" checked> 예
<input type="radio" name="flag" value="no"> 아니오
</div>
<button onclick="fnProperty();">확인</button>
<script>
function fnProperty() {
// property 값 수정하기
$('#img-city').prop('width', '350px'); // 버튼을 누르니 요소(이미지)가 사라졌다. width가 0이 되었다.
// 부적절한 값을 제시했기 때문에 width가 0이 되었다. width라는 property 값으로는 숫자가 담겨 있다.
// attribute는 문자열로 담겨 있지만, property로는 숫자 형식으로 담겨 있어서 이미지가 사라진다.
$('#img-city').prop('width', 350); // 정상적으로 동작한다.
$('#yesorno :radio').eq(1).prop('checked', true); // 버튼을 누르면 '아니오' 라디오 버튼이 체크된다.
$('#yesorno :radio').eq(1).prop('checked', true).css( {width : '50px', height : '50px' } ) // 메소드 체이닝 가능
}
</script>
</body>
</html>
- property에는 width가 숫자 형식으로 담겨있다. attribute때 처럼 문자열로 '128px'이렇게 주면 안 된다.
- 버튼을 누르면 '아니오' 버튼에 체크된 상태로 바뀐다.
이렇게 라디오 버튼이나 체크박스에 checked 효과를 줄 수 있다.
- 라디오 버튼의 크기가 50px, 50px 되었다.
