[포스코x코딩온] 웹 풀스택 과정 7기 2주차 월요일 회고

2023 May 02

포스코 코딩온 웹 풀스택 과정 7기 2주차 월요일 회고

• [포스코x코딩온] 웹 풀스택 과정 7기 2주차 월요일 회고
  • JQeury
    • 요소 접근
    • 요소 찾기
    • 요소 추가, 삭제
    • 요소 클래스 변경
    • 이벤트

JQeury

요소 접근

$CSS선택자
$값가져오기.val()
$값설정하기.val("값")
$텍스트가져오기.text()
$텍스트설정하기.text("텍스트")
$HTML가져오기.html()
$HTML설정하기.html("HTML")
$속성가져오기.attr("속성")
$속성설정하기.attr("속성", "값")
$CSS가져오기.css("CSS속성")
$CSS설정하기.css("CSS속성", "값")
$CSS설정하기.css({
  "CSS속성1": "값1",
  "CSS속성2": "값2",
  "CSS속성3": "값3",
})

요소 찾기

$자식들찾을요소.children()
$부모찾을요소.parent()
$조상찾을요소.parents()
$형제찾을요소.siblings()
$다음형제찾을요소.next()
$이전형제찾을요소.prev()

요소 추가, 삭제

$추가할부모.append("<p>추가할 요소</p>")
$추가할부모.prepend("<p>추가할 요소</p>")
$추가할형제.after("<p>앞에 추가할 요소</p>")
$추가할형제.before("<p>뒤에 추가할 요소</p>")
$삭제할요소.remove()
$비울요소.empty()

요소 클래스 변경

$클래스추가할요소.addClass("클래스")
$클래스삭제할요소.removeClass("클래스")
$클래스토글할요소.toggleClass("클래스")

이벤트

$요소.on("이벤트", function() {
  // 이벤트 발생 시 실행할 코드
})
$요소.이벤트(function() {
  // 이벤트 발생 시 실행할 코드
})