<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// 대상.메소드().메소드().메소드(); 메소드 체이닝 패턴이 적용됨
// 대상,선택자 => 전체* 태그 아이디 클래스 선택자 등
$(document).ready(function () {
// 전체 선택자
$('*').css('color', 'orange');
// 태그 선택자
$('h1').css('color', 'red');
// 아이디 선택자
$('#aa').css('color', 'blue');
// 클래스 선택자
$('.bb').css('color', 'green');
});
</script>
</head>
<body>
<h1>제목1</h1>
<h1 id="aa">제목2</h1>
<h1 class="bb">제목3</h1>
<p>본문내용</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 태그명[속성명=값]
// 태그명[속성명^=값] 시작값
// 태그명[속성명~=값] 포함
// 태그명[속성명$=값] 끝값
$('input[type=text]').val('Hello~~');
// 태그명:odd
// 태그명:even
// 태그명:first
// 태그명:last
// tr홀수 css() 'background-color' 'yellow'
// tr짝수 css() 'background-color' 'green'
// tr첫번째 css() 'background-color' 'blue'
$('tr:odd').css('background-color', 'yellow');
$('tr:even').css('background-color', 'green');
$('tr:first').css('background-color', 'blue');
});
</script>
</head>
<body>
아이디 : <input type="text"><br>
패스워드 : <input type="password"><br>
<table border="1">
<tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
<tr><th>홍길동</th><th>A</th><th>부산</th></tr>
<tr><th>이몽룡</th><th>B</th><th>서울</th></tr>
<tr><th>성춘향</th><th>O</th><th>대전</th></tr>
<tr><th>이순신</th><th>AB</th><th>대구</th></tr>
</table>
</body>
</html>
'IT > jQuery' 카테고리의 다른 글
| jQuery - html(), text() (0) | 2018.10.13 |
|---|---|
| jQuery - jQuery를 사용하여 css 적용하는 방법 (0) | 2018.10.12 |
| jQuery $('img').attr('src') (0) | 2018.10.12 |
| jQuery button click 이벤트시, each 사용법 (0) | 2018.10.11 |
| jQuery document ready (0) | 2018.10.10 |