JavaScript에서 event.keyCode 를 하면 각 키보드에 해당하는 고유번호를 알 수 있다.
이 메소드가 jQuery에서는 event.which 으로 사용하게 된다.
.keydown, .keyup - 대소문자 구별X (A도 a도 65라고 나온다)
XML → HTML로 바꾸기위해서 DOM이라는 문법을 사용함
JSON객체
{
변수: 값;
}
JSON 객체 배열
[
{ 변수: 값, 변수: 값, 변수: 값}, → JSON 객체
{ 변수: 값, 변수: 값, 변수: 값}
]
exam06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>Key 이벤트 확인하기</h1>
<div id="input">
<input type="text" />
</div>
<h2>결과</h2>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
function getKeyName(keyCode){
//JSON 객체 배열
let keyMap = [
{ code: 8, name: "backspace" },
{ code: 9, name: "tab" },
{ code: 13, name: "enter" },
{ code: 16, name: "shift" },
{ code: 17, name: "ctrl" },
{ code: 18, name: "alt" },
{ code: 19, name: "pausebreak" },
{ code: 20, name: "capslock" },
{ code: 21, name: "han/eng" },//결과 안나온다
{ code: 25, name: "hanja" },
{ code: 27, name: "esc" },
{ code: 65, name: "A" },
{ code: 97, name: "a" }
];
for(let i=0; i<keyMap.length; i++){
if(keyMap[i].code == keyCode){
return keyMap[i].name;
}
}
}
$(function () {
$('#result').html(getKeyName(65));
});
</script>
</body>
</html>
$(function () {
$('#input > input[type="text"]').keydown(function(event){
$('#result').html(event.which + '번 키 눌렀음 >>' + getKeyName(event.which));
});
});
아스키코드 값을 e.which로 얻어올 수 있다는 것 정도만 알면 된다 !!
keypress
.keypress => 대소문자 구별 (Ctrl, Shift, Alt 구별 못함)
exam07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>Key 이벤트 확인하기</h1>
<div id="input">
<input type="text" />
</div>
<h2>결과</h2>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
let count = 0;
$('#input > input[type="text"]').keypress(function(e){
count++;
$('#result').html('Key Event : ' + count + '개 >> ' + e.which);
});
});
</script>
</body>
</html>
숫자인식 못 함 전부 문자로 받는다.
focus/blur 이벤트 확인하기
exam08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>focus/blur 이벤트 확인하기</h1>
<div id="input">
<input type="text" />
</div>
<h2>결과</h2>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#input > input[type="text"]').focus();
});
</script>
</body>
</html>
<script type="text/javascript">
$(function () {
$('#input > input[type="text"]').focus();
$('#input > input[type="text"]').focus(function(){
$('#result').html('포커스가 들어갔습니다.');
});
$('#input > input[type="text"]').blur(function(){
$('#result').html('포커스가 나갔습니다.');
});
});
</script>
네이버에서 회원가입할 때 focus / blur 이벤트를 사용해서 아이디 중복 검사를 한다.\
Change 이벤트 확인하기 - e.target.value
exam09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>Change 이벤트 확인하기</h1>
<div id="input">
<h3>이름</h3>
<input type="text" name="uesr_name" />
<h3>성별</h3>
<label><input type="radio" name="gender" value="man"/>남자</label>
<label><input type="radio" name="gender" value="woman"/>여자</label>
<h3>취미</h3>
<label><input type="checkbox" name="hobby" value="축구"/>축구</label>
<label><input type="checkbox" name="hobby" value="농구"/>농구</label>
<label><input type="checkbox" name="hobby" value="야구"/>야구</label>
<h3>직업</h3>
<select name="job">
<option value="프로그래머" selected="selected">프로그래머</option>
<option value="퍼블리셔">퍼블리셔</option>
<option value="디자이너">디자이너</option>
<option value="기획">기획</option>
</select>
</div>
<h2>결과</h2>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html><script type="text/javascript">
$(function () {
$('input[name="uesr_name"]').change(function(){
$('#result').text('이름의 입력값이 변경되었습니다.');
});
});
</script>
$('input[name="gender"]').change(function(){
$('#result').text('성별이 변경되었습니다.');
});
$('input[name="gender"]').change(function(e){
//$('#result').text('성별이 변경되었습니다.');
console.log(e.target);
//<input type="radio" name="gender" value="man"/> 또는 <input type="radio" name="gender" value="woman"/>
});
console.log(e.target.tagName); //INPUT
console.log(e.target.value); //man 또는 woman
$('#result').text('성별(' + e.target.value + ')이 변경되었습니다.');
$('input[name="hobby"]').change(function(e){
$('#result').text('취미(' + e.target.value + ')이 변경되었습니다.');
});
$('select[name="job"]').change(function(e){
$('#result').text('직업(' + e.target.value + ')이 변경되었습니다.');
});
submit 뒤에는 action이 따라온다.
: 입력상자에 입력된 데이터를 들고 페이지를 이동한다.
페이지를 이동할 때 서비스방식
get방식(default) - 주소를통해서 가기때문에 보여준다. 비밀리에 보여지면 안 되는 것도 보여진다는 단점
post방식
exam10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>회원가입</h1>
<form name="form1" action="form_ok.html">
<div id="input">
<h3>당신의 이름은 무엇입니까?</h3>
<input type="text" name="user_name"/>
<input type="submit" value="저장하기" class="myButton"/>
<input type="reset" value="다시작성" class="myButton"/>
</div>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
form_ok.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>회원가입</h1>
<form name="form1">
<div id="input">
<h2>저장되었습니다.</h2>
<input type="button" id="backBtn" value="이전페이지로 이동" class="myButton"/>
</div>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('.myButton').click(function(){
history.go(-1);
});
});
</script>
</body>
</html>
<form name="aaa">
</form>
<form>
</form>
<form>
</form>
form이 여러개가 와도 상관없다. 대신 이름을 줘야함 name / id
name도 없고 id도 없는데 form을 구분하고싶으면
forms라는 내장객체로 세 가지 중에 뭐인지 체크를 하면된다.
forms[2] 이런식으로 배열을 이용해서 할 수 있다.
그럼으로 한 개의 파일 안에 여러개의 form을 잡아도 상관없다.
<form action="">
</form>
<input type="submit">
이렇게 밖에다가 하면 submit해도 action을 못탄다 -- 잘못된 예시
form과 form을 따로 여러개 써도 되지만 form안에 form은 안된다.
<form>
<form>
</form>
</form> -- 잘못된 예시
include (포함) - 가져오는 것 볼펜주세요 했을 때 주는 것 - form과 form이 겹치는 경우가 많다 조심해야함.
import 볼펜주세요 했을 때 어디있는지 알려주기만 하는 것
<script type="text/javascript">
$(function () {
$('form[name="form1"]').submit(function(){
if(!confirm('정말로 저장하시겠습니까?')){
return false;
}
});
});
</script>
이런식으로 주소를 통해서 보내는 것을 get방식이라고 한다.
$('input[type="reset"]').click(function(){
if(!confirm('정말로 취소하시겠습니까?')){
return false;
}
});
다시작성 취소하면 데이터 그대로 있음.
창 크기 조절 이벤트 - $(window)
exam11.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>창 크기 조절 이벤트</h1>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html><script type="text/javascript">
$(function () {
$(window).resize(function(){
$('#result').html('<p>' + $(window).width() + ' X ' + $(window).height() + '</p>');
});
});
</script>
scroll.css
@charset "UTF-8";
* {
padding: 0;
margin: 0;
}
div {
height: 1000px;
}
.gradientStyle {
/* IE */
background-image: -ms-linear-gradient(top, #1E5799 0%, #FFFFFF 100%);
/* Chrome */
background-image: -webkit-linear-gradient(top, #1E5799 0%, #FFFFFF 100%);
}
#console {
position: fixed;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -25px;
color: red;
font-size: 20px;
font-weight: bold;
}스크롤 이벤트
exam12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/scroll.css">
</head>
<body>
<div class="gradientStyle">
<h1>스크롤 이벤트</h1>
<div id="console">없지롱~~~</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
<script type="text/javascript">
$(function () {
$(window).scroll(function(){
$('#console').html('스크롤이 이동되었습니다.');
setTimeout(function(){
$('#console').html('초기화 되었음.');
}, 3000); //3초, 단위는 1/1000
});
});
</script>
this의 사용
만약에 class 속성이 아니라 id 속성 이었다면 첫번째에만 결과가 바뀌고,첫번째에만 이벤트가 먹힌다.
<button id="multiButton">클릭하세요.</button>
exam13.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>this의 사용</h1>
<div id="input">
<h2>단독 개체의 확인</h2>
<div id="singleButton">클릭하세요.</div>
<h2>복수 개체의 확인</h2>
<div>
<button class="multiButton">클릭하세요.</button>
<button class="multiButton">클릭하세요.</button>
<button class="multiButton">클릭하세요.</button>
<button class="multiButton">클릭하세요.</button>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
<script type="text/javascript">
$(function () {
$('#singleButton').click(function(){
$('#singleButton').html('감사합니다.');
});
});
</script>
<script type="text/javascript">
$(function () {
$('#singleButton').click(function(){
//$('#singleButton').html('감사합니다.');
$(this).html('감사합니다.'); //$(this)는 클릭한 자기 자신을 의미한다.
});
});
</script>
$(this)는 클릭한 자기 자신을 의미한다.
같은 클래스 속성인 4개 모두 바뀌게 된다.
$('.multiButton').click(function(){
$('.multiButton').html('감사합니다.'); - 4개 모두 바뀐다.
});
id 속성으로 하면 여러개여도 처음꺼만 되므로 댓글 이런거 할 때 조심해야한다.
class로 하면 전체가 다 바뀌므로 이것도 문제
내가 선택한 것만 바뀌게 해야한다.
4개 중에서 클릭한 객체만 바꾸기
//4개 중에서 클릭한 객체만 바꾸기
$(this).html('감사합니다.');
let index = $(this).index();
let result = index + '번째 요소를 선택'
$(this).html(result);
Folder: jQueryAttr
attr( ) / prop ( )
jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다.
이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다.
속성
<font color="" size=""
여기서 속성은 color, size
1. attr()
HTML에 작성된 속성값을 문자열로 받아온다
[형식]
① 속성값 가져오기
var 변수명 = $("요소").attr("속성이름");
② 속성값 넣기
$("요소").attr("속성이름", "값"); -- 값을 주는 것
$("요소").attr({
"속성1이름": "값",
"속성2이름": "값",
"속성3이름": "값"
});
추가 설명
- 속성(attribute): HTML 태그에 정의된 원시 데이터로, 페이지 로드 시점에서 고정된 값다.
- 예를 들어, href, src, id, alt, title 등이 여기에 해당한다.
2. prop()
지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다
자바스크립트의 프로퍼티를 가져온다
주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것이다
자바스크립트의 프로퍼티 값이 넘어오기 때문에 boolean, date, function 등도 가져올 수 있다
[형식]
① 속성값 가져오기
.prop("속성이름") → 속성값을 가져온다
② 속성값 넣기
.prop("속성이름", "값") → 속성값을 추가한다
$("요소"). prop ({
"속성1이름": "값",
"속성2이름": "값",
"속성3이름": "값"
});
추가설명
- 속성(property): HTML 요소의 객체(일반적으로 DOM 요소)에서 직접적으로 다루는 프로퍼티로, JavaScript에서 변경할 수 있다.
- 이 값들은 보통 동적으로 변경되며, 예를 들어, checked, selected, disabled 등이 이에 해당한다.
- 체크박스의 체크 여부, 라디오 버튼의 선택 여부, 요소의 활성화/비활성화 상태 등을 다룰 때 사용한다.
차이점 요약
- **attr()**은 HTML 태그에 정의된 속성의 값을 다룬다. 이 값은 HTML 자체에 직접적으로 정의된 값이다.
- **prop()**은 HTML 요소의 속성(property) 값을 다룬다. 이 값은 DOM 요소 객체에서 동적으로 변경 가능한 값이다.
결론
- **attr()**은 주로 HTML 요소의 고정된 속성값을 다룰 때 사용한다.
- **prop()**은 주로 DOM 요소의 상태(예: 체크 여부, 선택 여부)를 다룰 때 사용한다.
console.log('check = ' + check.prop('tagName')); //INPUT
여기서 console.log('check = ' + check.tagName); 이라고 하면 undefined 이라고 뜬다.
=> console.log('check = ' + check.prop('tagName')); 하던가
console.log('check = ' + check.get(0).tagName); 해야한다.
제이쿼리 선택자는 제이쿼리 객체로 묶어버려서 object 형식으로 나타난다.
그래서 제이쿼리 선택자에서 DOM으로 다시 접근한 다음 지정해줘야 제대로 된 접근된다.
console.log('check = ' + check.get(0).tagName);
get을 이용해서 DOM에 접근해야한다.
정리
- check.tagName이 undefined로 나타나는 이유는 check가 jQuery 객체이기 때문에, 이 객체 자체에는 tagName 속성이 존재하지 않기 때문이다.
- check.prop('tagName') 또는 check.get(0).tagName을 사용하면, jQuery 객체 내의 실제 DOM 요소의 tagName 속성에 접근할 수 있다.
따라서, tagName을 제대로 얻고자 한다면 jQuery 객체에서 직접 DOM 요소로 접근해야 한다.
3. .get()
.get()메서드는 각 jQuery 개체의 기본이 되는 DOM 노드에 대한 액세스 권한을 부여합니다
.get()은 선택한 요소를 배열(Array)로 가져옵니다.
[형식]
① 선택한 모든 요소를 가져옵니다.
.get()
② 선택한 요소 중 특정한 것만 가져옵니다.
.get( index )
[예]
var ar = $("p").get();
p태그의 요소를 배열로 가져옵니다.
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p><a href="#">Link</a></p>
<input type="checkbox" name="" id="check" checked="checked">체크박스
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
attr( )
<script type="text/javascript">
$(function () {
console.log('attr = ' + $('a').attr('href')); // # / a태그에서 href의 속성값을 가져오기
});
</script>
href의 값 그대로 #을 가져오는 것
prop( )
<script type="text/javascript">
$(function () {
console.log('attr = ' + $('a').attr('href')); // # / a태그에서 href의 속성값을 가져오기
console.log('prop = ' + $('a').prop('href')); // http://localhost:8080/jQuery/03_jQueryAttr/exam01.html# / a태그에서 href의 속성값 #의 값을 가져온다.
});
</script>
#이 의미하는 값이 무엇인지 가져온다 - 즉, 주소를 가져오는 것
let check = $('#check');
console.log('check = ' + check); //[object Object]
주소가 가지고있는 값을 가져오는 것
console.log('check = ' + check.prop('tagName')); //INPUT
속성이 없기때문에 undefined로 정의되지 않았다고 나온다.
console.log('check = ' + check.attr('tagName')); //undefined
attr는 그대로 가져옴.
prop는 check가 의미하는 값을 가져오는 것 !!
console.log('check = ' + check.attr('checked')); //checked
console.log('check = ' + check.prop('checked')); //true
.hasAttribute(name) —> 속성의 존재 확인
- 이 메서드는 특정 속성이 요소에 존재하는지 여부를 확인한다. 만약 속성이 있으면 true를, 없으면 false를 반환한다.
- 특정 속성이 HTML 요소에 설정되어 있는지 확인하고 싶을 때.
- 속성 존재 여부에 따라 다른 작업을 수행할 때.
.getAttribute(name) — 속성값을 가져온다
- 이 메서드는 요소의 특정 속성값을 가져온다. 만약 속성이 존재하지 않으면 null을 반환한다.
- 특정 속성의 값을 읽어와서 사용할 때.
- HTML 태그에 설정된 값을 가져와 JavaScript로 처리하고 싶을 때.
.setAttribute(name, value) — 속성값을 변경
- 이 메서드는 요소의 특정 속성값을 설정하거나, 기존 속성값을 변경한다. 속성이 존재하지 않으면 새로 추가한다.
- 요소에 새로운 속성을 추가하거나, 기존 속성의 값을 변경하고 싶을 때.
- 동적으로 HTML 요소의 속성을 업데이트할 때.
.removeAttribute(name) — 속성값을 제거
- 이 메서드는 요소에서 특정 속성을 제거한다.
- 더 이상 필요 없는 속성을 HTML 요소에서 제거하고 싶을 때.
- 속성 제거로 요소의 상태나 동작을 변경하고 싶을 때.
let check2 = document.querySelector('#check')
console.log('attr = ' + check2.getAttribute('checked'));- querySelector는 JavaScript에서 HTML 문서 내의 요소를 선택하기 위해 사용되는 메서드이다. 이 메서드는 CSS 선택자(CSS selector)를 사용하여 문서에서 첫 번째로 일치하는 요소를 반환한다.
- 위에서 querySelector('#check')는 id가 check인 첫 번째 요소를 선택한다.
주의사항
- querySelector는 항상 첫 번째로 일치하는 단일 요소만 반환한다. 만약 여러 개의 요소를 선택하고 싶다면 querySelectorAll을 사용해야 한다. 이 메서드는 일치하는 모든 요소의 NodeList를 반환한다.
속성 제어
exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>속성 제어</h1>
<p>클릭하세요.</p>
<img src="../image/1.jpg" width="500" height="300" alt="카카오 단체사진" />
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
$("요소").attr("속성이름", "값"); -- 값을 주는 것
<script type="text/javascript">
$(function () {
let index = 1;
$('img').click(function(){
index = (index%4) + 1 //1,2,3,4
$(this).attr('src', '../image/' + index + '.jpg');
});
});
</script>
클릭할 때마다 이미지가 1~4로 계속 바뀐다.
전체 선택 기능 구현하기
exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>전체 선택 기능 구현하기</h1>
<form name="form1">
<fieldset>
<legend>취미</legend>
<p>
<input type="checkbox" id="all_check" value="Y" />
<label for="all_check">전체 선택 / 해제</label>
</p>
<p>
<input type="checkbox" id="hobby1" class="hobby_check" value="축구" />
<label for="hobby1">축구</label>
<input type="checkbox" id="hobby1" class="hobby_check" value="농구" />
<label for="hobby1">농구</label>
<input type="checkbox" id="hobby1" class="hobby_check" value="야구" />
<label for="hobby1">야구</label>
</p>
</fieldset>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
<script type="text/javascript">
$(function () {
$('#all_check').change(function(){
let isChk = $(this).is(':checked');
console.log(isChk)
$('.hobby_check').attr('checked', isChk);
});
});
</script>
.attr를 사용하면 전체선택/전체해제가 잘된다.
하지만 전체선택 후 부분적으로 해제하면 전체 선택과 해제가 제대로 안된다.
=> 해결방법 : .prop
문자열 자체로 넣는 것이 아닌 prop를 이용해서 값으로 넣어야한다.
$('.hobby_check').prop('checked', isChk);[문제] 전체 선택 후 1개라도 해제하면 all_check는 해제가 되도록 하시오.
<script type="text/javascript">
$(function () {
$('#all_check').change(function(){
let isChk = $(this).is(':checked');
console.log(isChk)
//$('.hobby_check').attr('checked', isChk);
$('.hobby_check').prop('checked', isChk);
});
$('.hobby_check').change(function(){
let totalCnt = $('.hobby_check').length;
let checkCnt = $('.hobby_check:checked').length;
$('#all_check').prop('checked', totalCnt == checkCnt);
});
});
</script>attr()와 prop()의 차이점과 문제점
- attr('checked', isChk):
- attr()은 속성(attribute) 값을 설정한다. 이 경우 체크박스의 checked 속성을 설정하지만, 이 방식은 HTML 속성을 직접 설정하는 것과 같다.
- 문제는 attr()을 사용해 체크박스를 선택하거나 해제한 후, 사용자가 체크박스를 개별적으로 변경했을 때 그 변화가 제대로 반영되지 않는다는 점이다. 즉, 개별 체크박스를 해제했을 때 HTML 속성은 변경되었지만, 실제로 브라우저에서 체크된 상태가 반영되지 않을 수 있다.
- prop('checked', isChk):
- prop()은 속성(property) 값을 설정한다. prop()을 사용하면 실제 DOM 요소의 상태를 조작할 수 있다.
- 체크박스의 checked 상태는 DOM의 property로 관리되며, prop('checked', isChk)를 사용하면 이 상태를 정확하게 제어할 수 있다. 이 방법을 사용하면 전체 선택 체크박스를 통해 개별 체크박스들을 일관되게 제어할 수 있다.
문제점 해결
attr() 대신 prop()을 사용하는 이유는 체크박스의 선택 상태가 동적이기 때문이다. prop()을 사용하면 체크박스의 상태를 실제로 반영할 수 있으며, 사용자가 개별적으로 체크박스를 변경했을 때도 그 변화가 반영된다.
예를 들어, 전체 선택을 한 후 개별적으로 일부 체크박스를 해제하면, attr()을 사용할 때는 이 해제가 제대로 반영되지 않거나 전체 선택과 동기화되지 않는 문제가 발생할 수 있다. 하지만 prop()을 사용하면 이러한 문제가 발생하지 않다.
결론
- **attr('checked', ...)**는 HTML 속성을 설정하는 데 사용되지만, 동적으로 상태를 변경할 때는 적합하지 않다.
- **prop('checked', ...)**는 DOM 요소의 실제 상태를 설정하기 때문에, 체크박스와 같은 동적 요소를 제어할 때는 prop()을 사용하는 것이 더 적절하다.
활성/비활성 구현하기
exam04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>활성/비활성 구현하기</h1>
<form name="form1">
<input type="checkbox" id="upload_file_check" value="Y"/>
<input type="file" id="file_finder" disabled="disabled" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#upload_file_check').change(function(){
let isChk = $(this).is(':checked');
$('#file_finder').prop('disabled', !isChk);
});
});
</script>
</body>
</html>
exam05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
width: 670px;
list-style: none;
}
li {
float: left;
}
ul:after {
content: '';
display: block;
float: none;
clear: both;
}
img {
border: none;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#"><img src="../image/jquery.jpg" alt="jQuery" /></a>
</li>
<li>
<a href="#"><img src="../image/javascript.jpg" alt="javascript" /></a>
</li>
<li>
<a href="#"><img src="../image/css.jpg" alt="css" /></a>
</li>
<li>
<a href="#"><img src="../image/html.jpg" alt="html" /></a>
</li>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
jQuery 이미지에 마우스가 올라가면 jQeury_on.jpg, 내려가면 jQeury.jpg
<script type="text/javascript">
$(function () {
//jQuery 이미지에 마우스가 올라가면 jQeury_on.jpg, 내려가면 jQeury.jpg
$('img[alt="jQuery"]').mouseenter(function(){
$(this).attr('src', '../image/jquery_on.jpg')
});
$('img[alt="jQuery"]').mouseleave(function(){
$(this).attr('src', '../image/jquery.jpg')
});
});
</script>
나머지도 똑같이 적용 !
<script type="text/javascript">
$(function () {
//jQuery 이미지에 마우스가 올라가면 jQeury_on.jpg, 내려가면 jQeury.jpg
$('img[alt="jQuery"]').mouseenter(function(){
$(this).attr('src', '../image/jquery_on.jpg')
});
$('img[alt="jQuery"]').mouseleave(function(){
$(this).attr('src', '../image/jquery.jpg')
});
$('img[alt="javascript"]').mouseenter(function(){
$(this).attr('src', '../image/javascript_on.jpg')
});
$('img[alt="javascript"]').mouseleave(function(){
$(this).attr('src', '../image/javascript.jpg')
});
$('img[alt="css"]').mouseenter(function(){
$(this).attr('src', '../image/css_on.jpg')
});
$('img[alt="css"]').mouseleave(function(){
$(this).attr('src', '../image/css.jpg')
});
$('img[alt="html"]').mouseenter(function(){
$(this).attr('src', '../image/html_on.jpg')
});
$('img[alt="html"]').mouseleave(function(){
$(this).attr('src', '../image/html.jpg')
});
});
</script>Folder: jQueryCSS
1. 스타일 지정
(1) 속성값 읽기
var 변수명 = $("요소").css("CSS 속성이름");
(2) 속성값 변경 및 추가하기
$("요소").css("속성이름", "값");
$("요소").css({
"속성1이름": "값",
"속성2이름": "값",
"속성3이름": "값"
});
2. 클래스 속성 지정
(1) CSS 클래스의 적용 여부 알기
var 변수 = $("요소").hasClass("클래스이름");
(2) 클래스의 적용과 해제
$("요소").addClass("클래스이름");
$("요소").removeClass("클래스이름");
(3) 클래스의 적용과 해제의 반복 처리
HTML 태그 요소의 CSS 클래스에 대한 적용과 해제를 자동 순환 반복
$("요소").toggleClass("클래스이름");
css 적용하기
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box1 {
margin: 10px auto;
border: 5px solid #ccc;
padding: 30px;
text-align: center;
}
.box2 {
margin: 10px auto;
border: 10px solid #ff00ff;
background-color: #ff0;
padding: 25px;
text-align: left;
}
</style></head>
<body>
<h1>CSS 제어하기</h1>
<div id="box" class="box1"><h1>테스트 영역입니다.</h1></div>
<input type="button" id="btn1" value="(폰트) red" />
<input type="button" id="btn2" value="(폰트) green" />
<input type="button" id="btn3" value="(폰트) blue" />
<input type="button" id="btn4" value="(배경) red" />
<input type="button" id="btn5" value="(배경) green" />
<input type="button" id="btn6" value="(배경) blue" />
<input type="button" id="btn7" value="width=50%" />
<input type="button" id="btn8" value="width=auto" />
<input type="button" id="btn9" value="box1 클래스 적용" />
<input type="button" id="btn10" value="box2 클래스 적용" />
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn1').click(function(){
$('#box').css('color', 'red');
});
$('#btn2').click(function(){
$('#box').css('color', 'green');
});
$('#btn3').click(function(){
$('#box').css('color', 'blue');
});
$('#btn4').click(function(){
$('#box').css('background-color', 'red');
});
$('#btn5').click(function(){
$('#box').css('background-color', 'green');
});
$('#btn6').click(function(){
$('#box').css('background-color', 'blue');
});
$('#btn7').click(function(){
$('#box').css('width', '50%');
});
$('#btn8').click(function(){
$('#box').css('width', 'auto');
});
$('#btn9').click(function(){
$('#box').addClass('box1');
$('#box').removeClass('box2');
});
$('#btn10').click(function(){
$('#box').addClass('box2');
$('#box').removeClass('box1');
});
});
</script>
</body>
</html>
exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form name="form1">
<fieldset>
<legend>로그인</legend>
<input type="text" name="user_id" id="id" />
<input type="password" name="user_pw" id="pw" />
</fieldset>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
<style type="text/css">
fieldset {
width: 270px;
height: 100px;
}
input {
border: 1px solid #ccc;
width: 240px;
height: 25px;
padding: 3px 10px 3px 10px;
margin: 5px 10px;
background-image: url(../image/input.png);
background-repeat: no-repeat;
}
input#id {
background-position: 10px –3px; /* 좌우 상하 */
}
input#pw {
background-position: 10px -43px;
}
</style>
값을 넣으려고 하면 뒤에있는 이미지가 안보이게 해야한다.
<script type="text/javascript">
$(function () {
$('#id, #pw').focus(function(){
$(this).css('background-image', 'none');
});
});
</script>
값이 안들어가도 이미지가 사라지게 된다
안에 값이 있는지 없는지 물어보고
값이 있으면 이미지를 빼야하고 / 값이 없으면 이미지를 넣어야한다.
$('#id, #pw').blur(function(){
if($(this).val()){
$(this).css('background-image', 'none');
}else{
$(this).css('background-image', 'url(../image/input.png)');
}
});파일 읽어오기 = load()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
padding: 0;
margin: 0; }
#container {
width: 500px;
margin: 20px auto;
}
ul.tab {
list-style: none;
position: relative;
z-index: 100;
}
ul.tab li {
width: 100px;
height: 40px;
float: left;
}
ul:after {
content: '';
display: block;
float: none;
clear: both;
}
ul.tab li a {
background: url("../image/tab.jpg");
display: block;
color: #222;
line-height: 40px;
text-align: center;
text-decoration: none;
}
ul.tab li a.selected {
background: url("../image/tab_selected.jpg");
}
p.panel {
border: 1px solid #9FB7D4;
position: relative;
padding: 10px;
margin: 0;
top: -1px;
}
</style>
</head><body>
<div id="container">
<!-- 탭 버튼 영역 -->
<ul class="tab">
<li><a href="../txt/html5.txt" class="selected">HTML5</a></li>
<li><a href="../txt/jquery.txt">jQuery</a></li>
<li><a href="../txt/bootstrap.txt">Bootstrap3</a></li>
</ul>
<!-- 내용 영역 -->
<p class="panel">파일로부터 읽어드린 내용 출력</p>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
class="selected"로 설정된 파일의 내용을 읽어오기
<script type="text/javascript">
$(function () {
//class="selected"로 설정된 파일의 내용을 읽어오기
console.log($('.selected').attr('href')) //../txt/html5.txt
console.log($('ul.tab > li > a.selected').attr('href'))//../txt/html5.txt
});
</script>
$('p.panel').load($('.selected').attr('href'));
<li><a href="../txt/jquery.txt" class="selected">jQuery</a></li>
.not()
제이쿼리로 선택한 선택자(요소)들 중에서, 특정 선택자(요소)만을 제외하는 함수
this / $(this)
=> this는 자바스크립트이고 $(this) 제이쿼리 문법이다.
=> this의 경우 해당 이벤트가 발생한 요소를 표시해주고
$(this)는 이벤트가 발생하면 발생한 태그를 Object로 보여준다는게 다른점이다.
=> this와 같은 데이터를 갖기 위해서는 $(this)[0] 을 사용하면 된다.
this === $(this)[0]
this
- 클릭 이벤트가 발생한 버튼 요소 그 자체를 가리킨다. 자바스크립트에서는 이 this를 이용해 DOM 메서드를 사용할 수 있다.
- 예를 들어, this.innerHTML은 클릭된 버튼의 내용을 반환한다.
$(this)
- this를 jQuery로 감싸 jQuery 객체로 변환한다. jQuery 객체는 다양한 jQuery 메서드를 사용할 수 있게 한다.
- 예를 들어, $(this).hide()는 클릭된 버튼을 숨긴다.
$(this)[0]
- jQuery 객체는 사실 DOM 요소를 감싸는 배열과 유사한 구조이다. $(this)[0]은 이 배열에서 첫 번째 요소를 반환하는데, 이 첫 번째 요소는 바로 this가 가리키는 원래의 DOM 요소이다.
- 그래서 **this === $(this)[0]**는 참(true)이다.
정리
- this: 자바스크립트의 기본 키워드로, 이벤트가 발생한 DOM 요소를 가리킨다.
- $(this): this를 jQuery 객체로 감싸 jQuery 메서드를 사용할 수 있게 한다.
- $(this)[0]: jQuery 객체에서 원래의 DOM 요소를 가져온다. 그래서 this와 동일한 객체를 가리킨다.
실전에서의 사용
- this: 자바스크립트 메서드(innerHTML, style 등)를 사용할 때.
- $(this): jQuery 메서드(hide(), css(), attr() 등)를 사용할 때.
- $(this)[0]: jQuery 객체에서 원래 DOM 요소로 돌아가 자바스크립트 메서드를 사용할 때.
$('ul.tab > li > a').click(function(){
console.log('this = ' + this);
console.log('$(this) = ' + $(this));
return false;
});
$('ul.tab > li > a').click(function(){
console.log('this = ' + this);
console.log('$(this) = ' + $(this));
//클릭한 요소를 뺀 나머지에서 class="selected" 속성을 제거한다.
$('ul.tab > li > a').not(this).removeClass('selected');
//클릭한 요소에 class="selected" 속성을 추가
$(this).addClass('selected');
//클릭한 요소의 href 속성을 가져와서 파일을 로드한다.
$('.panel').load($('.selected').attr('href'))
return false;
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p><a href="#">Link</a></p>
<input type="checkbox" name="" id="check" checked="checked">체크박스
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
console.log('attr = ' + $('a').attr('href')); // # / a태그에서 href의 속성값을 가져오기
console.log('prop = ' + $('a').prop('href')); // http://localhost:8080/jQuery/03_jQueryAttr/exam01.html# / a태그에서 href의 속성값 #의 값을 가져온다.
let check = $('#check');
console.log('check = ' + check); //[object Object]
console.log('check.tagName = ' + check.tagName);
console.log('check.get(0).tagName = ' + check.get(0).tagName);
console.log('check = ' + check.prop('tagName')); //INPUT
console.log('check = ' + check.attr('tagName')); //undefined
console.log('check = ' + check.attr('checked')); //checked
console.log('check = ' + check.prop('checked')); //true
let check2 = document.querySelector('#check')
console.log('attr = ' + check2.getAttribute('checked'));
/*
.hasAttribute(name) —> 속성의 존재 확인
.getAttribute(name) — 속성값을 가져온다
.setAttribute(name, value) — 속성값을 변경
.removeAttribute(name) — 속성값을 제거
*/
});
</script>
</body>
</html>
제이쿼리 / 자바스크립트 / DOM 문법
Folder : 05_jQueryAnimation
slideUp(), slideDown(), slideToggle()은 반드시 <img> 태그에 width, height 속성을 주어야 한다
그렇지 않으면 toggle()와 똑같은 동작을 한다
slideUp(speed) : speed값을 지정해서 슬라이드업 효과를 줄 수 있다
speed : "slow" or "fast" or milliseconds(1/1000초)
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn1">slideUp</button>
<button id="btn2">slideDown</button>
<button id="btn3">fadeIn</button>
<button id="btn4">fadeOut</button>
<button id="btn5">slide toggle</button>
<button id="btn6">toggle</button>
<p></p>
<img src="../image/1.jpg" width="400" height="300" alt="카카오 단체사진">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn1').click(function(){
$('img').slideUp(500) //단위 1/1000초 0.5초
});
$('#btn2').click(function(){
$('img').slideDown(500) //단위 1/1000초 0.5초
});
$('#btn3').click(function(){
$('img').fadeIn(1000) //이미지가 1초동안 천천히 나타난다.
});
$('#btn4').click(function(){
$('img').fadeOut(1000) //이미지가 1초동안 천천히 사라진다.
});
$('#btn5').click(function(){ //slideUp, slideDown 번갈아서 움직인다.
$('img').slideToggle(1000)
});
$('#btn6').click(function(){ //fadeIn, fadeOut 번갈아서 움직인다.
$('img').toggle(1000)
});
});
</script>
</body>
</html>
'HTML CSS JS' 카테고리의 다른 글
| DAY 39 - jQuery / jQueryAJax (2024.08.27) (0) | 2024.08.27 |
|---|---|
| DAY 38 - jQuery (2024.08.26) (0) | 2024.08.26 |
| DAY 36 - jQuery (2024.08.22) (0) | 2024.08.22 |
| DAY 35 - JS - 템플릿리터럴 / 연산자 / 화살표함수 / 시간 / onclick / history (2024.08.21) (0) | 2024.08.21 |
| DAY 34 - JS - getElementById / getElementsByClassName / querySelector / querySelectorAll (2024.08.20) (0) | 2024.08.20 |
