[jQuery] 선택자, 객체조작 메서드들

dygreen·2022년 4월 11일
0

jQuery

목록 보기
1/3
post-thumbnail

🗒 jQuery에서 자주 사용하는 선택자 및 메서드들을 간단하게 정리해보겠습니다!

📌 .css()

: 선택한 요소에 스타일(css) 속성값을 반환 또는 변환함

// 속성값을 반환하려면? 속성만 작성하기
$("#id").css("color");
// 명령어의 복수 사용이 가능한 ":"
$("#id").css({"color":"#fff", "font-size": "12px"});
// 명령어의 복수 사용이 불가능한 ","
$("#id").css("color","#fff");

📌 .html()

: 선택한 요소에 포함되어 있는 하위 요소들을 불러오거나, 하위요소를 새 요소로 바꿀 때 사용함

$("요소선택").html();
$("요소선택").html("새요소");

📌 .text()

: 선택한 요소 내에 텍스트를 불러오거나 텍스트를 바꿀 떄 사용함

$("요소선택").text();
$("요소선택").text("새텍스트");

📌 .attr()

: 선택한 요소에 속성값을 반환 또는 변환함

$("요소선택").attr("href");
$("요소선택").attr("href","main.html");

📌 .removeAttr()

: 선택한 요소의 지정한 속성을 삭제함

$("요소선택").removeAttr("title");

📌 .addClass("클래스값")

: 선택한 요소에 지정한 클래스를 생성 또는 추가함

이때, "클래스값"에는 '.'을 붙이지 않음!

📌 .removeClass("클래스값")

: 선택한 요소에 지정한 클래스를 삭제함

📌 .toggleClass("클래스값")

: 선택한 요소에 클래스값이 없으면 생성, 있으면 삭제를 반복함


📌 .scrollLeft()

: 브라우저의 수평 스크롤 이동 너비값을 반환

📌 .scrollTop() ✨

: 브라우저의 수직 스크롤 이동 높이값을 반환

scroll의 선택자는 window이다!

console.log($(window).scrollTop());
$(window).scrollTop(2000); // 스크롤바를 px만큼 이동함

📌 .append()

: 선택한 요소의 마지막 위치에 새 요소를 추가함

$("요소선택").append("새요소"); // 1번 방식
$("새요소").appendTo("요소선택"); // 2번 방식

📌 .prepend()

: 선택한 요소의 맨 앞 위치에 새 요소를 추가함

$("요소선택").prepend("새요소");
$("새요소").prependTo("요소선택");

📚 Reference

: 국비지원 수업

profile
✨감명깊은 앞단을 향한 꾸준한 여정✨

0개의 댓글