2024.04.24
속성선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
$(document).ready(function(){
//요소[속성] : 특정 속성을 가지고 있는 문서 객체를 선택
$('button[name]').html('하하!');//html메서드는 태그의 내용 제어
//요소[속성=값] : 속성 안의 값이 특정 값과 같은 문서 객체 선택
$('input[type=text]').val('Hello jQuery');//val메서드는 value 속성 제어
//요소[속성~=값] : 속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택
//특정 값을 단어(공백으로 구분되어 있는 단어)를 포함하는 문서 객체
$('input[name~=한국]').css('background','red');
//요소[속성*=값] : 속성 안의 값이 특정 값을 포함하는 문서 객체를 선택
$('input[id*=한강]').css('background','yellow');
//요소[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택
$('div[id^=content-]').css('background','blue');
//요소[속성$=값] : 속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택
$('div[id$=2]').css('background','gray');
});
</script>
</head>
<body>
<h3>속성 선택자</h3>
<button name="btn">버튼1</button>
<button id="prev_btn">버튼2</button>
<br>
<input type="text">
<input type="password">
<br>
<input name="한국" value="한국">
<input name="한국인" value="한국인">
<input name="한국 사람" value="한국 사람">
<input name="최고 한국 영웅" value="최고 한국 영웅">
<br><br>
<input id="한강" value="한강">
<input id="한강의 기적" value="한강의 기적">
<input id="한 강의 배" value="한 강의 배">
<input id="한강유람선" value="한강유람선">
<br><br>
<div id="content-1">DIV content-1</div>
<div id="content_2">DIV content_2</div>
</body>
</html>
입력 양식 필터 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력 양식 필터 선택자</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
/*
입력 양식 필터 선택자1
선택자 형태 설명
요소:button input 태그 중 type 속성이 button
요소:checkbox input 태그 중 type 속성이 checkbox
요소:file input 태그 중 type 속성이 file
요소:image input 태그 중 type 속성이 image
요소:password input 태그 중 type 속성이 password
요소:radio input 태그 중 type 속성이 radio
요소:reset input 태그 중 type 속성이 reset
요소:submit input 태그 중 type 속성이 submit
요소:text input 태그 중 type 속성이 text
*/
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
$(document).ready(function(){
$('input:text').val('input:text');
$('input:password').css('background','pink');
$('input:button').val('input:button');
});
</script>
</head>
<body>
<input type="text">
<input type="password">
<input type="button">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력 양식 필터 선택자2</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
/*
입력 양식 필터 선택자2
선택자 형태 설명
요소:checked 체크된 입력 양식
요소:disabled 비활성화된 입력 양식
요소:enabled 활성화된 입력 양식
요소:focus 초점이 맞춰져 있는 입력 양식
요소:selected select 태그에서 option 객체 중 선택된 태그
*/
$(document).ready(function(){
//5초 후에 코드를 실행
setTimeout(function(){
//select 태그에서 선택한 option에 접근
let value = $('select > option:selected').val();
alert(value);
},5000);
});
</script>
</head>
<body>
<select>
<option>사과</option>
<option>바나나</option>
<option>멜론</option>
<option>딸기</option>
<option>포도</option>
</select>
</body>
</html>
기본 필터 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 필터 선택자</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
/*
기본 필터 선택자
선택자 형태 설명
요소:odd 홀수 번째에 위치한 문서 객체를 선택
요소:even 짝수 번째에 위치한 문서 객체를 선택
요소:first 첫 번째 위치한 문서 객체를 선택
요소:last 마지막에 위치한 문서 객체를 선택
*/
$(document).ready(function(){
$('tr:odd').css('background','yellow');
$('tr:even').css('background','pink');
/*
$('tr:first').css('background','#000000');
$('tr:first').css('color','#FFFFFF');
*/
$('tr:first').css('background','#000000')
.css('color','#FFFFFF');
});
</script>
</head>
<body>
<table>
<tr>
<th>이름</th><th>혈액형</th><th>지역</th>
</tr>
<tr>
<td>강민수</td><td>AB형</td><td>서울</td>
</tr>
<tr>
<td>홍길동</td><td>O형</td><td>부산</td>
</tr>
<tr>
<td>박문수</td><td>A형</td><td>인천</td>
</tr>
<tr>
<td>장영실</td><td>B형</td><td>서울</td>
</tr>
<tr>
<td>이순신</td><td>AB형</td><td>제주</td>
</tr>
<tr>
<td>김유신</td><td>O형</td><td>강원</td>
</tr>
</table>
</body>
</html>
문서 객체 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 생성</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
/*
메서드 이름 설명
$(A).appendTo(B) A를 B의 기존 자식의 뒤에 추가
$(A).prependTo(B) A를 B의 기존 자식의 앞에 추가
$(A).insertAfter(B) A를 B의 뒤에 형제로 추가
$(A).insertBefore(B) A를 B의 앞에 형제로 추가
*/
$(function(){
//문서 객체 생성
//$('<h1>Hello World</h1>').appendTo('div');
//$('<h1>Hello World</h1>').prependTo('div');
//$('<h1>Hello World</h1>').insertAfter('div');
$('<h1>Hello World</h1>').insertBefore('div');
});
</script>
</head>
<body>
<div>
<h1>안녕하세요</h1>
</div>
</body>
</html>
문서 객체 생성 및 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 생성 및 추가</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
/*
메서드 이름 설명
$(A).append(B) B를 A의 기존 자식의 뒤에 추가
$(A).prepend(B) B를 A의 기존 자식의 앞에 추가
$(A).after(B) B를 A의 뒤에 형제로 추가
$(A).before(B) B를 A의 앞에 형제로 추가
*/
$(function(){
//$('div').append('<h1>Hello jQuery</h1>');
//$('div').prepend('<h1>Hello jQuery</h1>');
//$('div').after('<h1>Hello jQuery</h1>');
$('div').before('<h1>Hello jQuery</h1>');
});
</script>
</head>
<body>
<div>
<h1>여기는 서울</h1>
</div>
</body>
</html>
click,mouseover,mouseout 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>click,mouseover,mouseout 이벤트</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//click 이벤트 연결 이벤트 핸들러
$('#btn1').click(function(){
$('p').css('background','yellow');
});
//mouseover 이벤트 연결
$('#btn2').mouseover(function(){
$('p').css('background-color','pink');
});
//mouseout 이벤트 연결
$('#btn2').mouseout(function(){
$('p').css('background-color','purple');
});
//hover 메서드를 이용해서 mouseover,mouseout 이벤트 연결
$('#btn3').hover(function(){
//mouseover 이벤트를 처리하는 이벤트 핸들러
$('p').css('background-color','green');
},function(){
//mouseout 이벤트를 처리하는 이벤트 핸들러
$('p').css('background-color','skyblue');
});
});
</script>
</head>
<body>
<button id="btn1">click</button>
<button id="btn2">mouseover/out</button>
<button id="btn3">hover</button>
<p>내용</p>
</body>
</html>
hover메서드를 이용한 mouseover,mouseout 이벤트 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover메서드를 이용한 mouseover,mouseout 이벤트 처리</title>
<style type="text/css">
.reverse{
background-image:url(../files/landscape.jpg);
color:white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//hover 메서드를 이용한 이벤트 연결
$('h1').hover(function(){
//mouseover 이벤트 처리를 위한 이벤트 핸들러
$(this).addClass('reverse');
},function(){
//mouseout 이벤트 처리를 위한 이벤트 핸들러
$(this).removeClass('reverse');
});
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>header-2</h1>
</body>
</html>
key 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>key 이벤트</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//keyup 이벤트 연결
$('textarea').keyup(function(){
//입력한 글자 수를 구함
let inputLength = $(this).val().length;
let remain = 30 - inputLength;
//문서 객체에 저장
$('h1').text(remain);
//문서 객체의 색상을 변경
if(remain >= 0){
$('h1').css('color','black');
}else{
$('h1').css('color','red');
}
});
});
</script>
</head>
<body>
<div>
<p>지금 내 생각을</p>
<h1>30</h1>
<textarea rows="5" cols="70" maxlength="30"></textarea>
</div>
</body>
</html>
