jQuery-2일차
학습한 내용
jQuery 익히기- 선택자, 스타일
jQuery 함수
- jQuery에서 가장 중요한 함수
- javaScript는 생성된 객체 맴버를 추가하는 것이 자유롭다. 이것을 이용해 만들어진 라이
브러리가 jQuery 라이브러리 - JavaScript에서 객체를 jQuery 함수에 매개변수로 넣어주면 객체에 jQuery에서 만든 여러
함수를 추가하여 반환 - jQuery 함수는 jQuery(객체) 형태로 작성하지만 jQuery 대신에 $(객체)로 작성할
수도 있다
Ready 함수
- JavaScript의 window.onload와 흡사
- Window.onload는 태그 객체가 모두 생성되면 발생되는 이벤트로 웹 화면이
처음 나타날 때 필요한 작업이 있다면 여기서 구현
실습1.
1) window.onload
<script>
window.onload=function(){
var result = document.getElementById("result");
result.innerHTML = "on load <br>";
}
</script>
2) ready 함수
<script>
$(document).ready(function(){
$("#result").append("ready <br>");
});
</script>
- 두 방법의 차이점은 만약, onload함수를 추가하는 형식으로 여러 개 만들었을 때, 마지막 함수가 출력된다.
- 하지만, ready함수는 기대하는 만큼 코드를 작성하면 부루는 만큼 다 실행이 된다.
//onload
<script>
window.onload=function(){
var result = document.getElementById("result");
result.innerHTML += "on load 1<br>";
}
window.onload=function(){
var result = document.getElementById("result");
result.innerHTML += "on load 2<br>";
}
window.onload=function(){
var result = document.getElementById("result");
result.innerHTML += "on load 3<br>";
}
</script>
//ready
<script>
$(document).ready(function(){
$("#result").append("ready 1<br>");
});
$(document).ready(function(){
$("#result").append("ready 2<br>");
});
$(document).ready(function(){
$("#result").append("ready 3<br>");
});
</script>각각 실행시켜 비교해보면 다음과 같다.
jQuery 선택자
- 기본 선택자
- 기본 선택자 조합
- 순서 필터 선택자
- 인덱스 필터 선택자
- 속성 선택자
- 상태 선택자
- Form 태그 선택자
실습2.
1) 기본 선택자
- 가장 기본이 되는 선택자, 다른 선택자는 기본 선택자를 조합하여 만
듬 - 전체 선택자(*) : HTML 문서 내의 모든 태그를 선택
- 태그이름 선택자(태그이름) : 지정한 태그이름에 해당하는 태그 객체
를 가져 온다 - 아이디 선택자(#아이디) : id 속성을 통해 태그 객체를 가져온다
- 클래스 선택자(.클래스) : class 속성을 통해 태그 객체를 가져온다
<script>
$(function(){
// 전체
$("*").css("background-color", "yellow");
//태그 지정자
$("p").css("background-color", "blue");
$("div").css("background-color", "green");
})
</script>
</head>
<body>
<p>문자열1</p>
<p>문자열2</p>
<div>문자열3</div>
<div>문자열4</div>
</body>
<script>
$(function(){
//id와 class지정자
$("#test1").css("color", "blue");
$("#test2").css("color", "red");
$(".test3").css("color", "orange");
})
</script>
<body>
<p id="test1">문자열1</p>
<p class="test3">문자열2</p>
<div id="test2">문자열3</div>
<div class="test3">문자열4</div>
</body>
2) 기본선택자 조합
2-1) 선택자1, 선택자2 : 동시에 여러 태그를 선택할 때 사용
<script>
$(function(){
//$("div").css("background-color", "yellow");
//$("p").css("background-color", "yellow");
$("div, p").css("background-color", "yellow");
//$("#a1").css("color", "red");
//$("#a2").css("color", "red");
$("#a1, #a2").css("color", "red");
})
</script>
// body
<body>
<div id="a1">div 1</div>
<div>div 2</div>
<p id="a2">p 1</p>
<p>p 2</p>
</body>
- 각각 내가 원하는 걸 주기 위해서 태그를 지정해도 되지만, 같이 적용되는 부분이 있다면 콤마(,)를 통해 동시에 적용이 가능
2-2)
- 선택자1 > 선택자2 : 태그의 바로 하위의 태그들을 선택할 때 사용
- 선택자1 선택자2 : 태그 내부의 모든 태그들을 선택할 때 사용
<script>
$(function(){
//$("#a1 > h1").css("background-color", "yellow");
$("#a1 h1").css("background-color", "yellow");
});
</script>
</head>
<body>
<div id="a1">
<h1>자식 태그 h1</h1>
<div>
<h1>자손 태그 h1</h1>
</div>
</div>
</body>순서대로 1. #a1 > h1 2. #a1 h1의 결과 값
- 공백을 사용할 경우 #a1과 h1태그 모두 적용된다.
2-3) 선택자1.선택자2 : 모든 선택자를 만족하는 태그를 선택
<script>
$(function(){
$("div.a1").css("background-color", "yellow");
$("div.a2").css("background-color", "red");
$("p.a1").css("background-color", "purple");
$("p.a2").css("background-color", "blue");
});
</script>
</head>
<body>
<div class="a1">div a1</div>
<div class="a2">div a2</div>
<p class="a1">p a1</p>
<p class="a2">p a2</p>
</body>
- 특정 선택자를 지정하여 적용
2-4)
- 선택자1 + 선택자2 : 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택
- 선택자1 ~ 선택자2 : 선택자1 태그 다음에 있는 모든 선택자2 태그를 선택
<script>
$(function(){
// 선택자 a1다음에 있는 p태그에 css적용
//$("#a1 + p").css("background-color", "yellow");
$("#a1 ~ p").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<p id="a1">p 태그 a1</p>
<div>div 태그1</div>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<div>div 태그2</div>
<p>p 태그</p>
<p>p 태그</p>
<div>div 태그3</div>
<p>p 태그</p>
<p>p 태그</p>
</body>순서대로 + , ~ 결과 값
- +를 사용했을 때, 선택자 a1 다음에 있는 p태그에 css 적용
- a1 다음에 p가 아닌 다른 태그가 오면 적용 안 됨
- ~를 사용했을 때, 하나만 적용이 아닌 전부 적용됨.
- 다른 선택자는 제외됨.
- 즉 ~은 선택자1 하위에 있는 모든 선택자2를 선택
실습3. 순간 필터 선택자
1) 첫 번째 태그 선택
- :first : 선택자에 해당하는 태그 중 가장 처음 태그
- :first-child : 선택자에 해당하는 태그 중 각 영역별 첫 번째 태그
가 선택. 처음 태그가 선택자에 해당하지 않으면 선택되지 않음 - :first-of-type : 선택자에 해당하는 태그 중 각 영역별 처음 태그
가 선택
<script>
$(function(){
$("p:first").css("background-color", "yellow");
$("p:first-child").css("color", "orange");
$("p:first-of-type").css("font-size", "30px");
});
</script>
</head>
<body>
<p>p 태그</p>
<hr>
<div>
<p>div 안의 p 태그</p>
<p>div 안의 p 태그</p>
<p>div 안의 p 태그</p>
</div>
<hr>
<div>
<div>div 안의 div 태그</div>
<p>div 안의 p 태그</p>
<p>div 안의 p 태그</p>
</div>
- first-child에서 세번 째 div영역에서 첫번 째 태그는 div라서 orange적용 x
- first-of-type에서 첫번 재는 div인데 그거 제외하고 첫 p태그를 찾아 적용
2) 마지막 태그 선택
- :last : 선택자에 해당하는 태그 중 가장 마지막 태그가 선택
- :last-child : 선택자에 해당하는 태그 중 각 영역별 마지막 태그
가 선택. 마지막 태그가 선택자에 해당하지 않으면 선택되지 않
음 - :last-of-type : 선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택
<script>
$(function(){
$("p:last").css("background-color", "yellow");
$("p:last-child").css("color", "orange");
$("p:last-of-type").css("font-size", "30px");
});
</script>
- last-of-type에서 first와 똑같이 세번 째 영역에서 마지막이 div라서 chlid는 적용 안되고
of-type은 그 div제외 마지막 p태그를 찾아 적용
3) 그 외 순서 필터 선택자
• :odd : 인덱스 번호(0부터 시작)가 홀수인 태그 선택
• :even : 인덱스 번호(1부터 시작)가 짝수인 태그 선택
<script>
$(function(){
$("p:odd").css("background-color", "yellow");
$("p:even").css("background-color", "red");
});
</script>
</head>
<body>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<div>div 태그</div>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<div>div 태그</div>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
</body>
- 시작 인덱스 번호의 주의해야 함.
- 출력되는 첫번 째 p태그는 홀수가 아닌 0번이라서 짝수 적용
- 중간에 있는 다른 태그들은 적용 x, 하지만 그 다음 p태그들이 적용 안 되는 것은 아님.
• :only-child : 영역내에서 선택자에 해당하는 태그가 하나일 경우
선택. 다른 태그가 있으면 선택되지 않음
• :only-of-type : 영역내에 선택자에 해당하는 태그가 하나일 경
우 선택
<script>
$(function(){
$("p:only-child").css("background-color", "yellow");
$("p:only-of-type").css("color", "orange");
});
</script>
</head>
<body>
<div>
<p>p 태그</p>
<p>p 태그</p>
</div>
<hr>
<div>
<p>p 태그</p>
</div>
<hr>
<div>
<p>p 태그</p>
<div>div 태그</div>
</div>
</body>
- only-child에서 두번 째 영역에만 하나의 p태그가 있기에 적용
- only-of-type에서 세번 째 영역에는 두개의 태그가 있지만 가지고 오는 p태그가
하나일 경우에 적용, p태그가 2개 들어 있다면 적용 안 됨.
실습4. 인덱스 번째 태그 선택
• :ep(인덱스) : 인덱스(0부터 시작)번때 해당하는 태그를 선택
• :nth-child(인덱스) : 각 영역의 인덱스(1부터 시작)번째 해당하는
태그를 선택. 인덱스번째 태그가 선택자에 해당하지 않으면 선
택되지 않음
• :nth-of-type(인덱스) : 각 영역의 인덱스(1부터 시작)번째 해당
하는 태그를 선택
<script>
$(function(){
$("p:eq(0)").css("background-color", "yellow");
$("p:nth-child(1)").css("color", "orange");
$("p:nth-of-type(1)").css("font-style", "italic");
});
</script>
</head>
<body>
<div>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
</div>
<hr>
<div>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
</div>
<hr>
<div>
<div>div 태그</div>
<p>p 태그</p>
<p>p 태그</p>
</div>
</body>
- nth-child(인덱스)에서 세번 째 영역에서는 첫 인덱스가 div라서 적용 x
- nth-of-type(인덱스)는 첫 인덱스가 다른 선택자라면 그거 제외하고 나오는 p태그 적용
• :gt(인덱스) : 선택자에 해당하는 태그 중 인덱스(0부터 시작)번
째 태그 이후의 태그들이 선택
• :lt(인덱스) : 선택자에 해당하는 태그 중 인덱스(0부터 시작)번
째 태그 이전의 태그들이 선택
• :nth-last-child(인덱스) : 뒤에서 인덱스(1부터 시작)번째 태그가
선택. 인덱스번째 태그가 선택자와 다르면 선택되지 않음
• :nth-last-of-type(인덱스) : 뒤에서 인덱스(1부터 시작)번째 태그
가 선택
<script>
$(function(){
$("p:gt(0)").css("background-color", "yellow");
$("p:lt(7)").css("color", "blue");
$("p:nth-last-child(1)").css("font-size", "30px");
$("p:nth-last-of-type(1)").css("font-style", "italic");
});
</script>
• :not : 선택자에 해당하지 않는 태그들이 선택
<script>
$(function(){
$("p:not(.a1)").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>p 태그</p>
<p class="a1">p 태그 a1 class</p>
<p class="a2">p 태그 a2 class</p>
</body>
- a1선택자가 아닌 태그들의 css적용
실습5. 속성 선택자
• [속성] : 속성을 가지고 있는 태그를 선택
• [속성 = 값] : 속성의 값이 지정된 값과 일치하는 태그를 선택
• [속성 != 값] : 속성의 값이 지정된 값과 일치하지 않는 태그를
선택
<script>
$(function(){
$("p[title]").css("background-color", "yellow");
$("p[title = 'aaa1']").css("color", "orange");
$("p[title != 'aaa1']").css("color", "red");
</script>
</head>
<body>
<p>속성이 없는 p태그</p>
<p title="aaa1">title이 aaa1인 p태그</p>
<p title="aaa2">title이 aaa2인 p태그</p>
</body>
• [속성 $= 값] : 속성의 값이 지정된 값으로 끝나는 태그를 선택
• [속성 |= 값] : 속성의 값이 지정된 속성의 값과 일치하거나 지정
된 속성으로 시작하고 하이픈으로 연결된 태그를 선택
• [속성 ^= 값] : 속성의 값이 지정된 값으로 시작하는 태그를 선
택
<script>
$(function(){
$("p[title $= 'a3']").css("background-color", "blue");
$("p[title |= 'aaa3']").css("color", "green");
$("p[title ^= 'aaa3']").css("font-size", "30px");
</script>
</head>
<body>
<p title="aaa3">title이 aaa3인 p태그</p>
<p title="aaa3-test">title이 aaa3-test인 p태그</p>
<p title="aaa3test">title이 aaa3test인 p태그</p>
</body>
- $= : a3으로 끝나는 속성 적용
- |= : aaa3test는 하이픈이 없기에 제외
- ^= : aaa3으로 모두 시작하기에 모두 적용, 뒤랑 상관없이 시작이 중요
• [속성 ~= 값] : 속성의 값이 지정된 값을 단어로 가지고 있는 태
그를 선택
• [속성 *= 값] : 속성의 값이 지정된 값을 포함하는 태그를 선택
<script>
$(function(){
$("p[title ~= 'aa']").css("color", "purple");
$("p[title *= 'aa']").css("font-size", "30px");
});
</script>
</head>
<body>
<p title="aaa4">title이 aaa4인 p태그</p>
<p title="aaa5">title이 aaa5인 p태그</p>
<p title="aa a6">title이 aa a6인 p태그</p>
<p title="aa">title이 aa인 p태그</p>
</body>
- ~= : aa의 값을 가진, aa a6이 들어간 타이틀과, aa가 들어간 p태그 적용
- *= : aa가 모두 포함되어 모두 적용
실습6. 상태 선택자
• :header : h1 ~ h6 태그를 선택
• :focus : 현재 포커스가 주어진 태그를 선택
• :contains(‘문자열‘) : 지정된 문자열이 포함되어 있는 태그를 선
택
• :has(선택자) : 지정된 선택자를 포함하고 태그를 선택
<script>
$(function(){
$(":header").css("color", "red");
$(":focus").css("background-color", "green");
$("div:contains('Hello')").css("font-size", "30px");
$("div:has('p')").css("font-style", "italic");
});
</script>
</head>
<body>
<p>p태그</p>
<h1>h1 태그</h1>
<h3>h3 태그</h3>
<input type=text" autofocus="autofocus"/><br>
<input type=text"/><br>
<div>Hello World</div>
<div>Hello World</div>
<div>Hi World</div>
<div>
<p>p 태그를 가지고 있는 div 태그</p>
</div>
<div>
<div>p 태그를 가지고 있는 div 태그</div>
</div>
</body>
- header : h1, h3
- focus : focus 되어 있는 객체를 찾아 적용
- contains : Hello 문자열 들어가 있는 태그 적용
- has : 지정된 선택자 p태그를 가지고 있는 첫 div가 적용
학습한 내용 중 어려웠던 점 또는 해결못한 것들
해결방법 작성
학습 소감
짧은 시간에 많은 양을 학습하다보니 완전 이해에는 어려움이 있었다. 실습했던 것을 다시 해보면서 이해하는 과정이 필요하고, 특정 선택자나, 인덱스를 불러오는 과정이 아직 헷갈려 다른 예제도 한 번 찾아보면 좋을 것 같다.
예비 프론트엔드 개발자