온 코딩

[jQuery] 기본 사용법 및 함수 모음 본문

복습 ARCHIVE/java script

[jQuery] 기본 사용법 및 함수 모음

SummerON 2021. 6. 7. 22:30

jQuery 기본 사용법 

1. 파일을 받아서 사용

<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

2. CDN(Content Delivery Network)를 통해 네트워크에 연결하여 사용

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

 

기본문법

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		alert("자동으로 경고창이 나옵니다.");
	});
</script>

//아래와 같은 형식으로도 가능
<script type="text/javascript">
$(function(){

  // jQuery methods go here...

});
</script>

이벤트 함수 목록

            // click(자동 호출 함수) : 마우스 왼쪽 버튼 클릭 (모든 요소 사용가능)

            // change(자동 호출 함수) : 값에 변화가 일어 났을 때 (주로 <select> )

            // keyup(자동 호출 함수) : 키보드가 눌렀다 떼지면

            // keydown(자동 호출 함수) : 키보드가 눌려지면

            // mouseover(자동 호출 함수) : 해당 요소에 마우스 커서가 올라가면 (모든 요소 사용가능)

            // mouseout(자동 호출 함수): 해당 요소로부터 마우스 커서가 빠져 나가면 (모든 요소 사용가능)

            // hover() : mouseover()와 mouseout() 기능을 포함 (모든 요소 사용가능)

            // bind('이벤트명', 자동 호출 함수) : 이벤트를 동적으로 부여 (모든 요소 사용가능)

            // unbind('이벤트명') : 이벤트 제거 

            // one('이벤트명', 자동 호출 함수) : 해당 이벤트 1회 가능 (모든 요소 사용가능)

           // toggle(자동 호출 함수, 자동 호출 함수) : 한개의 요소에 두가지 기능 실행(ON/OFF).

 

선택 및 css 함수

        // not(요소) 지정한 요소를 제외..

        // each() 반복문 (java의 for( : )과 비슷한 역할)

        // addClass(스타일클래스) : <style></style>에서 설정한 스타일클래스를 적용할 때

 

        // css() : 특정 요소의 스타일 속성 추출

        // css(스타일속성) : 특정요소의 지정된 스타일 속성값을 추출

        // css(스타일속성, 속성값) : 특정 요소의 스타일을 설정..​

 

이펙트 함수 

        // .show() 특정요소 보이기

        // .hide() 특정요소 감추기 (제거가 아님!!! 보여지지만 않을 뿐..)

        // .show() / .hide() 에 전달할 수 있는 값..

        //                      'slow' / 'fast' / 'normal' / 사용자 지정 시간 (ms : 1/1000 초)

        //                      전달되는 값은 보여지거나, 감춰질 때 까지 걸리는 시간

 

 

        // fadeIn() / fadeOut() 는 특정 요소의 투명도(즉, 알파값(alpha))를 이용....

        // fadeIn() : 완전 투명 상태에서 불투명 상태로..

        // fadeOut() : 완전 불투명 상태에서 투명 상태로..

 

        // animate() : 세부적인 값들을 이용하여 효과를 내고 싶을 경우..

        // animate({세부설정 값들}, 진행시간)

        // 세부설정 값들 : {스타일속성명:값, 스타일속성명:값, 스타일속성명:값}

 

 

        // left: '+=100px' : 현재 위치에서 100픽셀 x축 방향으로 이동

        // top: '+=100px'  : 현재 위치에서 100픽셀 y축 방향으로 이동

        // 컴퓨터 그래픽에서 x축 + 방향은 왼쪽, y축 + 방향은 아래쪽

        // 컴퓨터 그래픽에서 3시 방향이 0도

        // stop() 현재 애니메이션을 중지..​

 

https://www.w3schools.com/jquery/jquery_syntax.asp 

 

jQuery Syntax

jQuery Syntax With jQuery you select (query) HTML elements and perform "actions" on them. jQuery Syntax The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() A $ sig

www.w3schools.com

참고하여 공부하면 좋음

 

jquery_test_complete.war
1.30MB

저작자표시 비영리 변경금지

'복습 ARCHIVE > java script' 카테고리의 다른 글

[jQuery] .click(), .filter(), .slice(),.toggle(), .hover(),.one()  (0) 2021.06.07
[jQuery] Selector - 홀짝, contains, sibling 등 /.tagName / .bind()  (0) 2021.06.07
10_key_slide_converter : 키코드, 숫자맞추기, 사진슬라이드, 섭씨화씨변환기  (0) 2021.05.17
09_bom : 리로케이션, 팝업, 브라우저, 위치  (0) 2021.05.17
08_form : 수강신청, 주문-배송, 피자  (0) 2021.05.17
'복습 ARCHIVE/java script' Related Articles more
Comments