1. ready
<title>jQuery</title>
<!-- jQuery 연결 방법1 : js파일 다운로드 연결 -->
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
//window.onload=function(){};
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행하라는 의미
$(document).ready(function(){
alert('Hello jQuery!!');
});
</script>
</head>
<body>
</body>
</html>2. cdn
<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
$(document).ready(function(){
alert('Run jQuery by CDN');
});
</script>
</head>
<body>
</body>
</html>3. selector
<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
$(document).ready(function(){
//태그 선택자
// 속성 속성값
$('span').css('border','3px solid blue'); //jquery객체로 인식 --> jquery메서드 사용 가능
//클래스 선택자
// 속성 속성값
$('.my').css('border','5px solid red') //jquery객체로 인식 --> jquery메서드 사용 가능
//아이디 선택자
$('#content').css('background-color','green');
});
</script>
</head>
<body>
<p class="my">jQuery 실습</p>
<div>
<div id="content">id값이 content인 div tag</div>
</div>
<span>span1</span>
<span class="my">span2</span>
</body>
</html>4. filter
[입력 양식 필터 선택자]
선택자 형태 설명
요소:checked 체크된 입력 양식
요소:disabled 비활성화된 입력 양식
요소:enabled 활성화된 입력 양식
요소:focus 초점이 맞춰져 있는 입력 양식
요소:selected select태그에서 option 객체 중 선택된 태그1)
<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
$(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>2)
<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
$(document).ready(function(){
//속성 제어
$('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>5. array
<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
//배열 생성
const array = [
{name:'naver',link:'https://www.naver.com'}, //객체
{name:'daum',link:'https://www.daum.net'},
{name:'google',link:'https://www.google.co.kr'},
{name:'nate',link:'https://www.nate.com'}
];
// 배열 배열로부터 데이터를 받아서 처리하는 함수
$.each(array,function(index,item){
//index : 배열의 index
//item : 배열의 index를 통해 접근한 객체 --> {key:value}
let output = '';
output += '<h1>';
output += '<a href="' + item.link + '">' + item.name + '</a>';
output += '</h1>';
document.body.innerHTML += output;
});
});
</script>
</head>
<body>6. addClass & removeClass
1) addClass
<title>jQuery</title>
<style type="text/css">
.high_light{
background:yellow;
}
</style>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
//클래스 추가
$('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>[실행결과]
2) addClass
<title>jQuery</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>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
//클래스 추가
$('h1').addClass(function(index){
//index : 배열의 인덱스
return 'high_light_' + index; //클래스명 반환
});
});
</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>[실행결과]
3) removeClass
<title>jQuery</title>
<style type="text/css">
.item{color:red;}
.select{background:yellow;}
</style>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
//3초 후에 적용되니 클래스 제거
setTimeout(function(){
//문서 객체의 클래스 속성을 제거
$('h1').removeClass('select');
},3000);
});
</script>
</head>
<body>
<h1 class="item">item - 0</h1>
<h1 class="item select">item - 1</h1>
<h1 class="item">item - 2</h1>
</body>
</html>