-
1. JQuery 요소 가져오기JQuery 2022. 8. 30. 13:40
JQuery를 사용하여 html의 원하는 요소를 가져올 수 있다.
$("태그") 해당 태그 요소를 가져온다. $(".클래스명") 해당 클래스의 요소를 가져온다. $("#아이디") 해당 아이디의 요소를 가져온다. $("태그 .클래스명") 해당 태그의 하위에서 해당 클래스명의 요소를 가져온다. $("태그.클래스명") 해당 태그의 해당 클래스 명의 요소를 가져온다.(공백 주의) $("태그:first") 해당 태그 요소 중에 첫 번째 요소를 가져온다. $("*") 모든 태그 요소를 가져온다. $("태그1 태그2") 태그1 자식의 태그2 요소를 가져온다. $("태그1 태그2:first-child") 태그1 자식 중 첫 번째 태그2들을 가져온다. $("태그[속성]") 태그 중에서 해당 속성이 있는 요소를 가져온다. $("태그[속성='값']") 태그 중에서 해당 속성이 '값'인 요소를 가져온다. $("태그[속성!='값']) 태그 중에서 해당 속성이 '값'이 아닌 요소를 가져온다. $(this) 해당하는 자기 자신의 요소를 가져온다. * 요소 가져오는 예시
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>문서 제목</title><style></style></head>
<body><h1>클래스가 없다</h1><h1 class="cls">클래스가 있다</h1><h1>클래스가 없다</h1><h1 class="cls">클래스가 있다</h1>
<p id="one"></p><p>태그만 있는 녀석</p><p>태그만 있는 녀석</p>
<h3>List:1</h3><ul><li>html</li><li>css</li><li>JQuery</li></ul>
<h3>List:2</h3><ul><li>html</li><li>css</li><li>JQuery</li></ul>
</body><script>console.log(document.getElementById("one")); //*console.log(document.getElementsByTagName("p")); //*console.log(document.getElementsByClassName("cls")); //*//jQueryconsole.log($("#one"));console.log($(".cls"));console.log($("p"));//000의...console.log($("h1.cls")); // * h1태그 중에서 cls 클래스console.log($("p:first")); //p태그 중에서 첫 번째 요소console.log($("*")); //전체 선택//자식 요소console.log($("ul li")); //ul 밑에 liconsole.log($("ul li:first")); //첫 ul 자식 중 첫 번째 liconsole.log($("ul li:first-child")); //모든 ul 자식들 중 첫 번째 li//속성console.log($("a[href]")); // a 태그 중에서 href 속성이 있는 요소console.log($("a[target='_blank']")); // * a 태그 중에서 target 속성이 _blank 인 요소console.log($("a[target!='_blank']")); // _blank가 아닌 요소
//this$("p").click(function(){console.log($(this)); // p를 클릭한 이벤트가 일어난 '그' 요소});
</script>
</html>'JQuery' 카테고리의 다른 글
6. JQuery 요소 검색하기 (0) 2022.08.30 5. JQuery 형제요소 가져오기 (0) 2022.08.30 4. JQuery 자식요소 가져오기 (0) 2022.08.30 3. JQuery 부모요소 가져오기 (0) 2022.08.30 2. JQuery 짝수/홀수 요소 가져오기 (0) 2022.08.30