본문 바로가기
jQuery

jQuery

illho 2023. 4. 7. 15:15

제이쿼리란?

오픈 소스 기반의 자바스크립트 라이브러리이다.

자바스크립트를 더욱 손쉽게 활용할 수 있게 해준다.

 

제이쿼리 최신 버전

버전 1 : jQuery1.12.4

버전 2 : jQuery 2.2.4

버전 3 : jQuery 3.2.1

 

제이쿼리 버전 1은 익스플로러 6,7,8 버전에서의 동작까지 모두 지원한다.

제이쿼리 버전 2는 버전 1에서 지원하는 익스플로러 6,7,8 버전에 대한 지원을 중단한 버전이다.

제이쿼리 버전 3는 제이쿼리의 차세대 표준이다. 기존 버전과의 호환성을 유지한 채 더욱 간결하게 작성되고, 더욱 빠르게 동작하도록 변경 되었다.

 

제이쿼리 버전2,3은 모두 익스플로러 9 이상에서만 동작 하기때문에 아직 많은 웹사이트들은 버전1을 사용하고 있다.

 

제이쿼리 적용

제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 .js파일 형태로 존재한다.

 

웹페이지에 제이쿼리 파일을 로드하는 방법은 두가지가 있다.

1. 다운받아 로드하는 방법

2. CDN(Content Delivery Network)을 이용하여 로드하는 방법

 

jQuery 1.12.4 버전을 다운받아서 실습해봤다.

 

제이쿼리 문법

$(선택자).동작함수();

 

달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다.

 

$()함수

$()함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 한다.

 

Document 객체의 ready() 메소드

 

자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야한다.

자바스크립트는 Window 객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.

 

window.onload = function() {
 자바스크립트 코드;
};

 

$(document).ready(function() {
 제이쿼리 코드;
});

 

$(function() {
  제이쿼리 코드;
});

 

css 선택자

제이쿼리를 사용하면 HTML 요소를 선택하여 득정 동작을 설정할 수 있다.

 

태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소르 모두 선택할 수 있다.

 

 

아이디(id)를 사용하여 특정 HTML 요소를 선택할 수 있다.

 

클래스를 사용하여 같은 클래스에 속하는 HTML 요소를 모두 선택할 수 있다.

 

제이쿼리에서는 선택한 요소들을 변수에 저장하여 사용할 수 있다.

요소의 추가

기존 요소의 내부에 추가

1. append() : 선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.

2. prepend() : 선택한 요소의 처음에 새로운 요소나 콘텐츠를 추가한다.

3. appendTo() : 선택한 요소를 해당 요소의 마지막에 삽입한다.

4. prependTo() : 선택한 요소를 해당요소의 처음에 삽입한다.

 

기존 요소의 외부에 추가

1. before() : 선택한 요소의 바로 앞에 새로운 요소나 컨텐츠를 추가

2. after() : 선택한 요소의 바로 뒤에 새로운 요소나 콘텐츠를 추가한다.

3. insertBefore() : 선택한 요소를 해당 요소의 앞에 삽입한다.

4. insertAfter() : 선택한 요소를 해당 요소의 뒤에 삽입한다.

 

기존 요소를 포함하는 요소의 추가

1.wrap() : 선택한 요소를 포함하는 새로운 요소를 추가한다.

2.wrapAll() : 선택한 모든 요소를 포함하는 새로운 요소를 추가한다.

3.wrapInner() : 선택한 요소에 포함되는 새로운 요소를 추가한다.

 

요소의 복사 및 삭제

요소의 복사

.clone() 메소드 : 선택한 요소를 복사하여 새로운 요소를 생성한다.

 

요소의 삭제

.remove() 메소드 : 요소를 DOM 트리에서 삭제한다.

.detach() 메소드 : 요소를 DOM 트리에서 삭제한다. 이때 삭제되는 요소와 관련된 제이쿼리 데이터나 이벤트는 삭제되지 않고 유지된다.

 

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

</head>
<body>

    <div id="div1">

    <h1>HTML 선택자 실습</h1>

    <P id="p1">폰트사이즈 크기 키우기1</P>
    <P id="p2">폰트사이즈 크기 키우기2</P>
    <P id="p3">폰트사이즈 크기 키우기3</P>
       
   
    <input type="text" id="text4"></br>
   

    </br>
   
    <button id="btn"> 삭제 버튼이다 </button>
    </br>
   
    <button id="btn2"> 복구 버튼이다 </button>

    </div>

    <div id="p1"></div>

</body>


<script>

$(function() {

    var plength = $("p");

    var detach1;

    $("#btn").on("click", function() {
       
        var appendText = "</br><input type='text' id='text44'/>";

        detach1 = $("#text4").detach();          
    });

    $("#btn2").click(function() {
       
        $("#p3").after(detach1);

    });

});


</script>

 

.empty() 메소드 : 선택한 요소의 자식 요소를 모두 삭제한다. 선택된 요소는 삭제되지 않는다.

.unwrap() 메소드 : 선택한 요소의 부모 요소를 삭제한다.

 

요소의 탐색

조상 요소의 탐색

 

.parent() 메소드

  • 선택한 요소의 부모요소를 선택한다.

 

형제 요소의 탐색

 

.siblings() : 선택한 요소의 형제 요소중에서 지정한 선택자에 해당하는 요소를 모두 선택

$(function() {

    $("#btn").on("click", function() {
   
    $("p").siblings().css({"border" : "2px solid red"});      

    });
});

.next() : 선택한 요소의 바로 다음에 위차한 형제 요소를 선택한다.

 

자손 요소의 탐색

 

.children() : 선택한 요소의 자식 요소를 모두 선택한다.

$(function() {

    $("#btn").on("click", function() {
   
    $("p").children().css({"border" : "2px solid red"});      

    });
});

.find() : 선택한 요소의 자손 요소중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택한다.

$(function() {

    $("#btn").on("click", function() {
   
    $("#div2").find("span").css({"border" : "2px solid red"});      

    });
});

 

필터링 메소드

 

.first() 메소드 : 선택한 요소 중에서 첫 번째 요소를 선택

.last() 메소드 : 마지막 요소를 선택

$(function() {

    $("#btn").on("click", function() {
   
    $("#div2").children().last().css({"border" : "2px solid red"});      

    });
});

 

.eq() : 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택한다.

$(function() {

    $("#btn").on("click", function() {
   
    $("#div2").children().eq(1).css({"border" : "2px solid red"});      

    });
});

 

 

티스토리툴바