jQuery
jQuery 기본 선택자 ( Core )
- jQuery에서 가장 기본이 되는 선택자이다.
$() jQuery Selector로 여러값을 반환받을 경우
jQuery에서 css 선택자로 여러개의 요소를 받을 때는 <태그>의 배열을 반환.
- x[0].innerText 처럼 기존의 js문법으로 접근한다.
x[0]은 태그를 반환하며 자바스크립트 코드를 적용할 수 있다.
만약 해당 태그를 $()안에 한번 더 넣으면 jQuery객체를 반환하며 jQuery문법을 사용한다.
아래는 예시다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = $("P");
console.log(x[0]);
console.log(x[0].innerText);
console.log($(x[0]));
console.log($(x[0]).text());
});
</script>jQuery 선택자로 여러값을 받아올 때 처리 방식에 대해 학습
**x[0] -> 태그를 반환 / js문법 기용
$(x[0]) -> $()는 jquery 객체 반환 / jquery문법 기용
x.text() -> 애가 알아서 jquery 객체 전체순회해서 해당 메서드를 적용시킴
id선택 후 메서드 사용 연습
css()
val()
text()
html()
class 선택 및 순회, 값 사용
궁금한점 : jquery선택자로 여러개를 반환받은 배열객체는 일반적인 배열객체인지? 아니면 다른 종류의 배열객체인지?
jQuery 계층 선택자( hierarchy )
css 자식, 자손 / 근접형제1개, 뒤의모든형제선택자
>, 뛰어쓰기, +, ~
jQuery 속성 선택자
기본선택자 뒤에 붙여 사용가능.
속성값으로 시작하는 a[href^='https']
속성값으로 끝나는 a[href$='.net']
특정값이 포함하는 a[href*='www']
단어형태로 포함하는 a[href~='www']
x.css({color: 'value',font-size: 'value'}) 식으로 css메소드 하나에 style여러개 작성 가능
jQuery 필터 선택자
- 다양한 방식으로 원하는 요소를 걸러내는 역할.
- : 기호를 사용.
- 대부분 일반 선택자와 같이 사용하지만 단독 사용 가능.
종류
- Basic Filter
- Child Filter
- Form Filter
- Content Filter
Basic Filter
:animated
애니메이션이 동작 중인 모든 요소를 반환.
:eq(index)
지정한 index 값에 해당하는 요소를 반환.
음수값 지정도 가능. ( 마지막 요소부터 시작 )
:even 및 :odd
짝수 번째, 홀수 번째 해당하는 요소를 반환.
index값을 기준으로 판단하므로 주의 (index값은 0부터 시작함)
:first 및 :last
첫 번째, 마지막에 해당하는 요소를 반환.
각각 eq(0), eq(-1)과 동일
:gt(index) 및 :lt(index)
지정된 index값보다 큰 요소 및 작은 요소를 반환.
음수값 지정 가능.
:not(selector)
selector와 일치하지 않는 모든 요소를 반환.
예> :not(div)
:focus
현재 포커스 받은 요소 반환.
예> input:focus
Child Filter
:first-child 및 :last-child
지정된 요소의 부모 요소를 대상으로 첫 번째 자식, 마지막 자식 반환.
nth-child(index) 및 :nth-child(2n)
지정된 요소의 부모 요소를 대상으로 일치하는 index에 해당하는 자식 반환.
(index는 1부터 시작)
nth-child(even) 필터 및 :nth-child(odd)
짝수 번째 요소 및 홀수 번째 요소 반환. (index는 1부터): 부모요소 기준
:only-child
부모 요소를 기준으로 하나만 존재하는 자식 요소를 반환.
Form Filter
:button 필터 및 :enable, :disable
- input 태그 중에서 type속성이 button 또는
<button>태그 반환. - 활성화된 요소 및 비활성화된 요소 반환
:checkbox 필터 및 :checked
- type 속성이 checkbox인 요소 반환.
- 속성이 checked 또는 selected된 요소 반환.
( checkbox, radio, select 태그에서 사용가능 )
:selected
- select 태그의 option 중에서 선택된 요소를 반환.
- checkbox 및 radio테서는 동작 안됨.
Content Filter
jQuery Traversing
1차적으로 선택자에 의해서 찾은 요소들을 다시 2차 필터링하거나
새로운 요소를 추가하거나 하는 작업을 할 때는 Traverse 관련 메서드를 사용하게 된다.
2차 필터링 가능
함수(메서드)사용
- Filtering
- Miscellaneous Traversing
- Tree Traversal
traverse 필터 선택자 1– 필터링( filtering )
중요
- 셀렉터를 통해 얻은 객체에서 다시 필터링 가능.
end 메서드로 처음 선택자로 얻은 값들로 복귀 가능
filter()의 인자로 익명함수를 전달시 해당 함수의 매개변수 2개에 각각 index, tag가 들어온다. 또한 해당 함수 내에서 this 는 tag와 같다.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script type="text/javascript">
<script>
$(document).ready(function(){
$("li").filter(function(idx, ele){
//console.log(idx,":", ele);
console.log(idx,":", this);
})
});
</script>함수 순회 및 return true;일 때 해당 요소를 선택한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery HTML Template</title>
</head>
<body>
<p>Hello</p>
<ul>
<li>A1</li>
<li>A2</li>
<li class="my">A3</li>
<li>A4</li>
<li>A5</li>
<li id="a">A6</li>
<li>A7</li>
<li>A8</li>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script type="text/javascript">
<script>
$(document).ready(function(){
$("li").filter(function(idx, ele){
if(ele.innerText=="A4")
console.log(idx+" : "+ele.innerText);
return ele.innerText=="A4";
}).css("color", "red")
.end()
.filter(function(i, e){
if(i%3==0)
console.log(i+" : " +e.innerText);
return i%3==0;
}).css("font-size", "40px")
.end();
});
</script>
</body>
</html>