Home
jQuery

HTML에서 jQuery 사용 방법

CDN을 이용하여 HTML에 다음 코드를 추가합니다. jQuery 다운로드는 여기에서 합니다.
0 min read

CDN 이용하기

  • HTML에 다음 코드를 추가합니다.
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

 

다운로드 받아 연결하기

  • jQuery 다운로드는 여기에서 합니다.
  • 압축된 파일도 있고, 압축되지 않은 파일도 있습니다.
  • 그리고 HTML 문서에 다음 코드를 추가합니다.
<script src="path/jquery-3.6.0.min.js"></script>
  • path와 파일 이름은 적절히 변경합니다.

 

jQuery 사용하기

  • 다음은 ID가 abc인 h1 요소의 색을 빨간색으로 바꾸는 예제입니다.
<h1 id="abc">Lorem Ipsum Dolor</h1>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>
  $( '#abc' ).css( 'color', 'red' );
</script>

You may like these posts

  • 버튼을 선택하는 선택자 - :button
    :button :button은 type이 button인 요소를 선택하는 선택자입니다.   기본형 $( ':button' ) type이 button인 모든 요소를 선택합니다.   $( '.xy:button' ) type이 button이면서 class 값으로 xy…
  • 자식 요소의 개수를 기준으로 부모 요소 선택하는 방법
    자식 요소의 개수를 기준으로 부모 요소을 선택하기 위해서는 스크립트를 이용해야 합니다. 다음은 jQuery를 이용한 간단한 예제입니다. <li> 요소를 3개 이상 가진 <ol> 요소를 선택해서 글자를 빨간색으로 만듭니다. …
  • 짝수 인덱스 요소를 선택하는 선택자 - :even
    :even :even은 짝수 인덱스 요소를 선택하는 선택자입니다.   기본형 $( ':even' ) 예를 들어 $( 'p:even' ) 은 짝수 인덱스 문단을 선택합니다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것입니다.   예제 짝수 인덱스의 &l…
  • 특정 문자열을 포함한 요소를 선택하는 선택자 - :contains()
    :contains() :contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다.   기본형 $( ':contains(text)' ) 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다. 예를 들어 $( 'p:contains("abc")' ) abc 문…
  • 내용이 없는 빈 요소를 선택하는 선택자 - :empty
    :empty :empty는 내용이 없는 빈 요소를 선택하는 선택자입니다.   기본형 $( ':empty ) 예를 들어 $( 'div:empty ) 는 div 요소 중 내용이 없는 것을 선택합니다.   예제 표에서 내용이 없는 셀에 N/A 문자열을 추가하는 예제입니…
  • 마우스를 올렸을 때 효과를 주는 방법 - .hover()
    .hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 효과를 넣을 수 있습니다.   기본형 .hover( handlerIn(eventObject), handlerOut(eventObject) ) ha…

Post a Comment