본문 바로가기 메뉴 바로가기

설계의 품격

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

설계의 품격

검색하기 폼
  • 개발 (183)
    • IT (41)
    • AI (1)
    • 설계 (1)
      • Axure (1)
    • 프로그래밍 (138)
      • SQL (34)
      • Python (18)
      • Linux (2)
      • HTML , CSS (40)
      • JS, jQuery (4)
      • C언어 (8)
      • C++ (1)
      • JAVA (8)
      • Spring (16)
      • JSP (2)
      • Git (3)
      • IntelliJ (2)
    • DB (2)
  • 방명록

프로그래밍/JS, jQuery (4)
this

$('.example-class').on('click', function() { $('.example-class').toggleClass('active'); }); 위 코드는 만약 example-class라는 클래스가 여러 요소에 정의되어 있을 경우 모든 요소에 active 클래스가 추가됩니다. 만약 모든 요소가 아니라 선택된 요소에만 클래스를 추가하고 싶다면 아래 처럼 this 키워드를 사용하면 됩니다. $('.example-class').on('click', function() { $(this).toggleClass('active'); }); this는 CSS 클래스가 아니라 JavaScript 키워드이기 때문에 ' '가 필요 없습니다.

프로그래밍/JS, jQuery 2021. 4. 26. 10:30
jQuery 자주 쓰이는 함수

click(함수); - 선택자를 클릭했을 때. 함수해라 addClass(); - 클래스를 추가해라 removeClass(); - 클래스를 제거해라 toggleClass(); - 클래스를 반전해라 hasClass(); - 클래스를 확인해라 css({"color" : "yellow", "font-weight" : "bolder"}); - css 를 변경해라 attr(); - 상태를 확인해라 ready(); - 선택자가 준비(로드) 되었을때

프로그래밍/JS, jQuery 2021. 4. 26. 10:20
jQuery 선택자

$("#name") //id 명이 name 인 엘리먼트 호출 $(".name") //class 명이 name 인 엘리먼트 호출 $(".name > ul > li ") // class 명이 name 아래에 ul 아래의 li 호출 $(".son").parent() //class 명이 son 인 엘리먼트의 부모(위의 속성) 호출 $(".son").next() //class 명이 son 인 엘리먼트의 다음에 있는 형제속성 호출 (이전에 없으면 호출 안됨) $(".son").prev() //class 명이 son 인 엘리먼트의 이전에 있는 형제속성 호출 (다음에 없으면 호출 안됨) $(".son").siblings() //class 명이 son 인 엘리먼트의 형제속성 모두 호출

프로그래밍/JS, jQuery 2021. 4. 26. 10:10
$(document).ready(function(){});

jQuery를 사용한 모든 웹페이지는 다음 코드로 시작합니다. $(document).ready()는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미입니다. jQuery 이벤트 메서드 중 하나입니다. 이 메서드는 비슷한 기능을 수행합니다. 고전 이벤트 모델은 한 번에 하나의 이벤트만 연결할 수 있습니다. 반면에 jQuery의 이벤트 메서드는 표준 이벤트 모델이나 인터넷 익스플로러 이벤트 모델과 마찬가지로 이벤트로 여러개의 함수를 연결할 수 있습니다. 아래의 예제는 실행하게되면 문서가 준비되는 순간 경고창 세 개가 연달아 표시됩니다. $(document).ready() 메서드는 굉장히 많이 사용되므로 jQuery에서는 간단하게 사용할 수 있는 형태를 제공합니다.

프로그래밍/JS, jQuery 2021. 4. 26. 09:35
이전 1 다음
이전 다음
최근에 올라온 글
Total
Today
Yesterday
TAG
  • 파이썬
  • 소프트웨어 생명주기 모델
  • spring
  • 스토어드 프로시저
  • html
  • C언어
  • 선택자
  • 백준
  • intellij
  • 프로토콜
more
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바