jQuery 예


jQuery 예제

jQuery 기술을 향상시키고 싶나요?

jQuery selector

$(this).hide()

현재 HTML 요소를 숨기는 jQuery의 hide() 함수를 보여줍니다.

$("p").hide()

모든 <p> 요소를 숨기는 jQuery의 hide() 함수를 보여줍니다.

$(".test").hide()

class="test"로 모든 요소를 ​​숨기는 jQuery의 hide() 함수를 보여줍니다.

$("#test").hide()

id="test"인 요소를 숨기는 jQuery의 hide() 함수를 보여줍니다.

jQuery 이벤트

jQuery click()
jQuery jQuery click() 이벤트를 보여줍니다.

jQuery dblclick()
jQuery dblclick() 이벤트를 보여줍니다.

jQuery mouseenter()
jQuery mouseenter() 이벤트를 보여줍니다.

jQuery mouseleave()
jQuery mouseleave() 이벤트를 보여줍니다.

jQuery mousedown()
jQuery mousedown() 이벤트를 보여줍니다.

jQuery mouseup()
jQuery mouseup() 이벤트를 보여줍니다.

jQuery hover()
jQuery hover() 이벤트를 보여줍니다.

jQuery focus() 및 Blur()
jQuery focus() 및 Blur() 이벤트를 보여줍니다.

분석 예시

jQuery Hide/Show

jQuery hide()
jQuery hide() 메서드를 보여줍니다.

jQuery hide() 및 show()
jQuery hide() 및 show() 메서드를 보여줍니다.

jQuery 토글()
jQuery 토글()은 hide() 및 show() 메서드를 전환하는 데 사용됩니다.

jQuery hide()
텍스트 숨기기의 또 다른 예입니다.

분석 예시

jQuery fade in and out

jQuery fadeIn()
jQuery fadeIn() 메서드를 보여줍니다.

jQuery fadeOut()
jQuery fadeOut() 메서드를 보여줍니다.

jQuery fadeToggle()
jQuery fadeToggle() 메서드를 보여줍니다.

jQuery fadeTo()
jQuery fadeTo() 메서드를 보여줍니다.

분석 예시

jQuery Slide

jQuery SlideDown()
jQuery SlideDown() 메서드를 보여줍니다.

jQuery SlideUp()
jQuery의 SlideUp() 메소드를 보여줍니다.

jQuery SlideToggle()
jQuery의 SlideToggle() 메소드를 보여줍니다.

예제 분석

jQuery animation

jQuery animate()
간단한 jQuery animate() 메서드를 보여줍니다.

jQuery animate() - 여러 CSS 속성 설정
jQuery animate() 메서드를 통해 스타일 변경을 보여줍니다.

jQuery animate() - 상관 값 사용 ​​
jQuery animate() 메서드에서 상관 값을 사용하는 방법을 보여줍니다.

jQuery animate() - 미리 정의된 값 사용 ​​
animate() 메서드를 통해 미리 정의된 "hide", "show", "toggle" 값을 보여줍니다.

jQuery animate()
더 많은 jQuery animate() 메서드 예제를 보여줍니다.

jQuery animate()
더 많은 jQuery animate() 메서드 예제(다중 animate() 콜백)를 보여줍니다.

예제 분석

jQuery 애니메이션 중지

jQuery stop() 슬라이드
jQuery stop() 메서드를 보여줍니다.

jQuery stop() 애니메이션(매개변수 포함)
jQuery stop() 메서드를 보여줍니다.

예제 분석

jQuery HTML Get 및 attribute

jQuery text() 및 html() - 텍스트 및 콘텐츠 가져오기
jQuery text() 및 html() 메서드를 사용하여 콘텐츠 가져오기 .

jQuery val() - 값 가져오기
jQuery val() 메서드를 사용하여 양식의 필드 값을 가져옵니다.

jQuery attr() - 속성 값 가져오기
jQuery attr() 메소드를 사용하여 속성 값을 가져옵니다.

분석 예시

jQuery HTML 콘텐츠 및 속성 설정

jQuery text(), html(), val() - 콘텐츠 설정
jQuery text(), html() 사용 및 내용을 설정하는 val() 메서드입니다.

jQuery text() 및 html() - 내용 설정 및 콜백 함수 사용
text() 및 html()을 사용하여 내용 설정 및 콜백 함수 사용

jQuery attr() - 속성 값 설정
Set jQuery attr() 메소드 속성 값을 사용합니다.

jQuery attr() - 여러 속성 값 설정 ​​
jQuery attr() 메서드를 사용하여 여러 속성 값을 설정합니다.

jQuery attr() - 속성 값을 설정하고 콜백 함수를 사용합니다.
속성 값을 +로 설정하고 콜백 함수를 사용하여 attr()을 호출합니다.

jQuery add()

선택한 요소 끝에 내용을 추가합니다

jQuery prepend()선택한 요소의 시작 부분에 콘텐츠 추가

jQueryappend() - 여러 요소 삽입

새로운 텍스트/HTML 요소, jQuery 및 JavaScript/DOM을 혁신합니다. 새 요소의 텍스트 뒤에 추가됩니다. jQuery after() 및 before()선택한 요소 앞뒤에 HTML 요소를 추가하세요.
jQuery after() - 여러 요소 삽입

새로운 텍스트/HTML 요소, jQuery 및 JavaScript/DOM을 혁신합니다. 선택한 요소의 끝에 새 요소를 삽입합니다.


예제 분석




jQuery HTML 요소/콘텐츠 제거


jQuery Remove()

선택한 요소 제거

jQuery 비어 있음()선택한 요소의 모든 하위 요소 제거

jQuery 제거() - 매개변수를 사용하여 요소 필터링

및 제거 인스턴스 구문 분석

jQuery CSS 클래스 가져오기 및 설정

jQuery addClass()
다른 요소에 클래스 속성 추가

jQuery addClass() - 다중 클래스
addClass() 메서드를 사용하여 여러 클래스 추가

jQuery RemoveClass()
지정된 요소의 클래스 제거

jQueryggleClass()
선택된 요소의 클래스 전환(추가/삭제)

인스턴스 분석

jQuery css() 메소드

jQuery css() - CSS 속성을 반환합니다.
첫 번째로 일치하는 요소의 CSS 속성 값을 반환합니다.

jQuery css() - CSS 속성을 설정합니다.
모든 구성 요소에 지정된 CSS 속성을 설정합니다.

jQuery css( ) - CSS 속성 설정
여러 일치 요소에 대한 CSS 속성 설정

인스턴스 구문 분석

jQuery Size

jQuery - width() 및 height()를 반환
너비와 높이를 반환 지정된 요소의

jQuery - innerWidth() 및 innerHeight() 반환
지정된 요소의 내부 너비/높이 반환

jQuery - externalWidth() 및 externalHeight() 반환
외부 너비/높이 반환 지정된 요소

jQuery - 외부 너비(true) 및 외부 높이(true)를 반환
지정된 요소의 외부 너비/높이(외부 테두리 포함)를 반환

jQuery - 문서 및 창의 너비() 및 높이()를 반환
HTML 문서 및 창의 너비와 높이를 반환합니다.

jQuery - 너비() 및 높이() 설정
지정된 요소의 너비와 높이 설정

인스턴스 분석

jQuery Traversal - Ancestor

jQuery parent()
jQuery parent() 메소드를 시연합니다.

jQuery parent()
jQuery parent() 메서드를 보여줍니다.

jQuery parentUntil()
jQuery parentUntil() 메서드를 보여줍니다.

예제 분석

jQuery Traversal - Descendants

jQuery children()
jQuery children() 메서드를 보여줍니다.

jQuery find()
jQuery find() 메소드를 보여줍니다.

예제 분석

jQuery 순회 - siblings

jQuery siblings()
jQuery siblings() 메서드를 보여줍니다.

jQuery next()
jQuery next() 메서드를 보여줍니다.

jQuery nextAll()
jQuery nextAll() 메서드를 보여줍니다.

jQuery nextUntil()
jQuery nextUntil() 메서드를 보여줍니다.

예제 분석

jQuery AJAX load() 메소드

jQuery load()
파일 콘텐츠를 비동기적으로 로드하여 <div> 요소에 삽입합니다.

jQuery load()
파일 내용에 지정된 요소 내용을 비동기적으로 로드하여 <div> 요소에 삽입합니다.

jQuery load() - 콜백 함수(callback)를 사용합니다.
jQuery load() 메소드의 콜백 함수를 사용합니다.

예제 분석

jQuery AJAX get() 및 post() 메서드

jQuery get()
$.get() 메서드를 사용하여 서버에서 비동기적으로 데이터 가져오기

jQuery post ()
$.post() 메서드를 사용하여 서버에서 비동기적으로 데이터를 가져옵니다

인스턴스 분석