jQuery 사용설정
<head>
<script src="https://code.jquery.com/jquery-3.4.0.js">
</script>
<script type="text/javascript">
// 해당 페이지의 HTML태그를 모두 로딩 했을때..
$(document).ready(function(){
//내용
});
// 위와 동일한 기능: HTML태그를 모두 로딩 했을때..
$(function(){
//내용
});
</script>
</head>
기본선택자
$("*")
: HTML 문서 전체의 구조를 탐색, 전체 요소(태그)들을 배열로 반환
$("태그명")
: 태그명에 해당하는 요소(태그)들을 배열로 반환
$("#id")
: id속성값이 id에 해당하는 요소(태그)를 반환
$(".class")
: class속성값이 class에 해당하는 요소(태그)들을 반환
$(".class1.class2")
: class속성값이 class1, class2 둘 다 가진 요소(태그)들을 반환
: 중간에 공백 넣지 않음!
<span class="class1 class2"></span>
$("e1,e2,..")
: 다중 선택자 e1,e2,..에 해당하는 요소(태그)들을 반환
$("div,span,p.myClass")
: div태그들, span태그들, p태그 안에 class속성값이 myClass인 p태그들을 반환
계층선택자
$("parent > child")
: parent들의 자식 child 요소(태그)들을 반환한다
$("ul.topnav > li")
: ul태그의 class속성값이 topnav인 태그들의 자식 li태그들을 반환
$("ancestor descendant")
: ancestor의 자손 descendant 요소(태그)들을 반환
$("form input")
: form태그들의 자손들 중에서 input태그들을 반환
$("prev + sibling")
: prev의 옆(인접하고 다음)에 있는 sibling를 반환
$("label + input")
: label태그 옆(인접하고 다음)에 있는 input를 반환
$("prev ~ siblings")
: prev의 옆(인접하고 다음)에 있는 siblings들을 반환
$("#prev ~ div")
: id속성값이 prev인 태그(요소) 옆(인접하고 다음)에 있는 div태그들을 반환
속성선택자
$("selector[attr]")
: attr 속성을 갖는 모든 태그(요소)들을 반환
$("selector[attr = 'value']")
: attr 속성값이 value인 모든 태그(요소)들을 반환
$("selector[attr != 'value']")
: attr 속성값이 value가 아닌 모든 태그(요소)들을 반환
$("selector[attr ^= 'value']")
: attr 속성값이 value로 시작하는 태그(요소)들을 반환
$("a[href ^= 'https']")
: a태그의 href속성값이 https로 시작하는 a태그들을 반환
$("selector[attr $= 'value']")
: attr 속성이 value로 끝나는 태그(요소)들을 반환
$("a[href $= 'net']")
: a태그의 href속성값이 net으로 끝나는 a태그들을 반환
$("selector[attr *= 'value']")
: attr 속성에 value를 포함하는 요소(태그)들을 선택
*= vs ~=
$("input[name *= 'man']")
: <input name = "milk man">
$("selector[attr ~= 'value']")
: attr 속성에 공백으로 구분되는 value를 포함하는 요소(태그)들을 선택
*= vs ~=
$("input[name ~='man']")
: <input name = "milk man">
$("selector[attr |= 'value']")
: attr 속성에 -기호로 구분되는 value를 포함하는 요소(태그)들을 선택
$종합예제
:$("input[id][name $= 'man']")
: input태그들 중 id속성을 가지고,
name속성값이 man으로 끝나는 태그(요소)들을 선택
필터선택자
$(":animated")
: 요소(태그)들 중에서 애니메이션 동작을 하는 요소(태그)들을 선택
$(":eq(idx)")
: 요소(태그)들 중에서 idx번째 요소(태그)를 반환
0부터 시작, -1은 마지막 요소(태그), -는 거꾸로
$(":even")
: 요소(태그)들 중에서 짝수번째 요소(태그)들을 반환
$(":odd")
: 요소(태그)들 중에서 홀수번째 요소(태그)들을 반환
$(":first")
: 요소(태그)들 중에서 첫 번째 요소(태그)를 선택
$(":last")
: 요소(태그)들 중에서 마지막 요소(태그)를 선택
$(":gt(idx)")
: 요소(태그)들 중에서 idx보다 큰 색인 요소(태그)들을 선택
$(":lt(idx)")
: 요소(태그)들 중에서 idx보다 작은 색인 요소(태그)들을 선택
$(":not(selector)")
: 요소(태그)들 중에서 selector와 일치하지 않은 요소(태그)들을 선택
$("input:not(:checked)+span")
: input태그들 중에서 checked가 안된 요소들의
옆(인접하고 다음) span태그들을 선택
$(":focus")
: 요소(태그)들 중에서 focus를 받은 요소(태그)를 선택
$(":first-child")
: 요소(태그)들 중에서 첫 번째 자식 요소(태그)들을 선택
$(":last-child")
: 요소(태그)들 중에서 마지막 자식 요소(태그)들을 선택
$(":only-child")
: 요소(태그)들 중에서 자식이 하나만 존재할 경우,
그 태그(요소)들을 선택
폼필터 선택자 : <form>내부에 있는 태그
$(":button")
: (=) $("button, input[type='button']")
<button>, <input type="button"> 를 선택
$("form").submit(function(event){
//form 태그의 submit전송을 차단
event.preventDefault();
});
$("input:checkbox")
: <input type="checkbox">
$("input:checked").val()
:<input type="checkbox" value="바나나" checked>
바나나 를 반환
$("select").change(function(){
$(":selected").text();
});
: select 태그의 하위 태그 option태그를 선택하여
select 태그값이 변경되었을때..
selected된 option태그의 innerHTML을 반환
$("td:empty").text("Was empty!");
: td태그 중 innerHTML태그값이 빈 태그 선택
$("div:has(p)")
: 자손 중 p태그가 있는 div태그를 선택
$("td:parent")
: 자손을 갖거나, 텍스트값을 가진 td태그를 선택
'Programming > Jquery' 카테고리의 다른 글
| jQuery Method (0) | 2022.01.08 |
|---|