쌍용교육(JAVA)/jquery
쌍용교육 -jquery수업 41일차 jQuerySelector(1)
구 승
2024. 4. 16. 15:12
s08_attribute.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">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
$(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 name ="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>
s09_filter.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>
s10_filter.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:selectied').val()
},5000);
});
</script>
</head>
<body>
<select>
<option>사과</option>
<option>바나나</option>
<option>멜론</option>
<option>딸기</option>
<option>포도</option>
</select>
</body>
</html>
s11_filter.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">
$(document).ready(function(){
//attr 메서드 : 태그의 속성 제어
$('input:checked').attr('checked',false);
$('input:disabled').val('클릭할 수 없음');
$('input[type=button]:enabled').val('클릭할 수 있음');
});
</script>
</head>
<body>
<input type="checkbox" name ="city" value="서울" checked>서울
<input type="button" value="확인" disabled>
<input type = "button" value="확인">
</body>
</html>
s12_filter.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'); */
//위에를 한번에 명시하는법
// .css부터 #000000까지 자기자신 객체를 반환하기 때문에 이어서 명시가 가능하다.
$('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>
s13_array.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">
$(document).ready(function(){
//배열 생성
const array = [
{name:'naver',link:'http://www.naver.com'}, //객체
{name:'daum',link:'https://www.daum.net'},
{name:'nate',link:'https://www.nate.com'},
{name:'google',link:'https://www.google.co.kr'}
];
// 배열 배열로부터 데이터를 받아서 처리하는 함수
$.each(array,function(index,item){
//index : 배열의 index
//item : 배열의 index를 통해 접근한 객체
let output = '';
output += '<h1>';
output += '<a href="'+ item.link +'">' + item.name + '</a>';
output += '</h1>';
document.body.innerHTML += output;
});
});
</script>
</head>
<body>
</body>
</html>
s14_addClass.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addClass</title>
<style type="text/css">
.high_light{
background:yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//addClass 메서드는 태그에 css 클래스 추가
//클래스명
$('h1').addClass('high_light');
});
</script>
</head>
<body>
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
</body>
</html>
s15_addClass.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addClass</title>
<style type="text/css">
.high_light_0 {background:yellow;}
.high_light_1 {background:orange;}
.high_light_2 {background:blue;}
.high_light_3 {background:green;}
.high_light_4 {background:red;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h1').addClass(function(index){
//index: 배열의 인덱스
return 'high_light_'+index; //클래스명 반환
});
});
</script>
</head>
<body>
<!-- jquery 배열 -->
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
</body>
</html>
s16_removeClass.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클래스 속성 제거</title>
<style type="text/css">
.item{color:red;}
.select{background:yellow;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//3초 후에 태그에 적용된 클래스를 제거
setTimeout(function(){
//문서 객체의 클래스 속성을 제거
$('h1').removeClass('select');
},3000);
});
</script>
</head>
<body>
<h1 class="item">Header - 0</h1>
<h1 class="item select">Header - 1</h1>
<h1 class="item">Header - 2</h1>
</body>
</html>