제이쿼리(JQuery)란 무엇일까?
- jQuery는 자바스크립트를 보다 쉽게 활용할 수 있게 해주는 오픈소스 기반의 라이브러리이다.
- 짧고 단순한 코드로도 웹 페이지를 풍성하게 만들어줄 수 있다.
- 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다.
- HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다.
- 애니메이션 효과나 대화형 처리를 간단하게 적용해 줌
- 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다.
- 다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다.
- 오픈 라이선스를 적용하여 누구나 자유롭게 사용 가능
제이쿼리(JQuery) 적용방법
- 파일 자체 다운로드, 다운로드 후 다음코드 입력
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>
- 제이쿼리 CDN, 다운로드 하지 않고 코드만 입력해도 사용가능
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>제이쿼리(JQuery) 문법
HTML 요소 선택하고, 선택된 요소에 손쉽게 특정 동작 설정 가능
$(선택자).동작함수();
//달러($)기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자.
//선택자를 이용하여 원하는 html 요소 선택하고, 동작함수를 정의하여 선택된 요소에 원하는 동작 설정
- $() 함수는 선택된 HTML요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할
- $() 함수의 인수로는 HTML 태그 이름 뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택가능
- 위 함수를 통해 생성된 객체를 제이쿼리 객체(jQuery object)라고 합니다.
- 제이쿼리는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러동작 설정 가능
예시
예시 1)
더보기
$(this).hide() - 현재 요소 숨기기
$("p").hide() - 모든 <p> 요소들 숨기기
$(".test").hide() - class="test"인 모든 요소 숨기기
$("#test").hide() - id="test"인 모든 요소 숨기기
$(this).show() - 현재 요소 보여주기
$("p").show() - 모든 <p> 요소들 보여주기
$(".test").show() - class="test"인 모든 요소 보여주기
$("#test").show() - id="test"인 모든 요소 보여주기
예시 2)
더보기
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
선택자 문법
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all elements with class="intro" | Try it |
| $("p:first") | Selects the first element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even elements | Try it |
| $("tr:odd") | Selects all odd elements | Try it |
출처: https://www.w3schools.com/jquery/jquery_selectors.asp
동적 함수 종류
