jQuery 01. 개요 및 기본 선택자

jQuery란 ?

기존에 자바스크립트 언어만으로 구현하기에 복잡했던 구문 작성을 간소화하기 위해 "존레식" 에 의해 만들어짐
JavaScript기반의 라이브러리 ( 유용한 기능 모음집)
즉, JavaScript 코드로 유용한 함수나 내용들이 이미 정의되어있는 모음집

jQuery 의 장점

1) 복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발가능 
 (적은양의 코드로 빠르고 풍부한 기능 제공)

2) DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있음 

3) AJAX(비동기식 통신), 이벤트 처리 등등 폭넓게 지원

4) jQuery와 관련된 확장형 플러그인, 오픈 api등을 지원 (차트, 슬라이드, 애니매이션등 )

 

jQuery 라이브러리 연결 방법

 - head태그 내에 script로 외부 jQuery관련  .js파일 연결하기 
오프라인 / 온라인 방식 있음

-jQuery 공식 사이트 : http://jquery.com

jQuery

1) 오프라인 방식 : jQuery라이브러리 직접 다운받은 후 경로 지정
2) 온라인 방식 : CDN( Content Delievery Network) - 라이브러리를 제공하는 사이트 url제시해서 파일경로 지정

 jQuery 구문 작성하기 

jQuery 구문으로 dom요소를 다루는 구문을 작성할 것이기 때문에
문서상의 모든 요소들이 다 만들어지고나서 실행되어야만함 

> 자바스크립트의 window.onload 구문은 해당 문서의 요소들이 다 로드되고, 연동되어있는 외부 문서들도 다 가지고 온 뒤 에 실행되며, html문서내에 단한번만 작성가능 ( 여러번 기술시 마지막 것으로 실행) 

> jQuery 에서의 해당 내용의 3가지 구문으로 제공 

1) jQuery(document).ready(function(){ 실행내용 });

2) $(document).ready(function(){ 실행내용 });

3) $(function(){ 실행내용 });

 - 해당 문서의 요소들만 다 로드되면 곧바로 실행되며, 여러번 기술 가능 

 

jQuery 관련 메소드 

1) .css() : 선택된 요소들의 스타일과 관련된 기능 수행 (속성을 리턴 | 변경 )

2) .html()  : 선택된 요소객체의 innerHTML속성과 관련된 기능을 수행 하는 메소드

3) .click() : 클릭이벤트와 관련된 기능 수행하는 메소드

4) .val() : 선택된 요소의 value속성과 관련된 기능 수행 

5) .attr() :  그 외의 속성들과 관련된 기능 수행 

 

---

기본 선택자 

 

1. 아이디 선택자 

: 특정 고유한 아이디값을 가진 요소 "하나만" 을 선택하고자 할때

$("#아이디명")

 <h2 id="id2">테스트2</h2
 <script>
  $(document).ready(function(){
            $("#id2").css("color","red");
            $("#id2").html("h2변경");
        })
</script>

 

2. 태그 선택자 

$("태그명")

  <h5>CSS</h5>
  <h5>JavaScript</h5>
  <h5>jQuery</h5>
   <script>
            //제이쿼리 방식 => $("태그명")
            $("h5").css("color","darkblue");

            //여러종류의 요소선택 
            $("p,h5,#id1").css("backgroundColor","");
        })
    </script>

 

3. 클래스 선택자

: 특정한 클래스 속성의 요소들을 선택하고자 할때 사용 

    <h1 class="item">Class1</h1>
    <h1 class="item select">Class2</h1>
    <h1 class="item select">Class3</h1>
    
    <script>
        $(document).ready(function(){
           
            $(".select").css("backgroundColor","orangered");
            $(".select").click(function(){
                alert("클릭됨");
            });
        })

    </script>

---

순수 자바스크립트 와 jQuery 비교

 

* 요소 선택하는 방법 

	순수 자바스크립트 방식	jQuery 방식
아이디 선택자	document.getElementById("아이디명")	$("#아이디명")
클래스 선택자	document.getElementsByClassName("클래스명")	$(".클래스명)"
태그 선택자	document.getElementsByTagName("태그명")	$("태그명")

 

*선택된 요소에 속성값 변경하는 방법

	순수 자바스크립트 방식	jQuery방식
	선택된 요소객체에 직접 속성에 접근해서 변경	선택된 요소에 메소드 이용
스타일	.style.스타일속성 = "변경할 값";	.css("스타일속성","변경할값");
내용	.innerHTMl = "변경할값";	.html("변경할값");
이벤트	.on이벤트명 = function(){};