jQuery

1. 개요

• JS의 라이브러리
• 풍부한 기능 제공
• 사용하기 쉽다
• *.js 형식으로 제공됨
• http://jquery.com

2. 설치

1) 다운로드

• *.js 파일을 local에 저장해서 사용
• 압축 버전 : *.js (배포용. 공백을 제거해서 용량을 줄임)
• 비압축 버전 : *.js (개발용)

2) CDN (Content Delivery Network)

• 서버와 링크 이용해서 사용

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

==> 만약에 jquery의 js를 인식을 못하면 html:11 Uncaught ReferenceError: $ is not defined 에러가 발생된다

3. JS 객체 vs jQuery 객체 ★

• 문법:
  jQuery(JS객체), $(JS객체)
  jQuery의 별칭이 $ 임
  일반적으로 $ 를 주로 사용함

• $() 사용하면 JS 객체가 jQuery 객체로 변환되어 반환됨

• JS객체 : document, this, ...
  ==> JS용 객체에서 제공하는 속성/메서드를 사용해야 된다
  예> document.querySelector()

• jQuery 객체 : $(document), $(this)
  ==> jQuery용 객체에서 제공하는 속성/메서드를 사용해야 된다
  예> $(document).css()

4. ready() 메서드

https://api.jquery.com/ready/#ready-handler

• 기능 : DOM Tree가 모두 완료된 후 함수 호출
• 문법 :

$(document).ready(function(){});
$("document").ready(function(){});

• JS의 window.onload=init; 과 거의 동일한 기능

5. DOM 선택하는 방법

• 문법 : $(선택자)
  ==> 기존의 document.querySelector(선택자) 문법과 동일한 기능
• 예>

$("p")
$("#xxx")
$(".yyy")
$("a[href]")
$("div > p")

• 예>

<p id="xxx">hello</p>
var p = $("#xxx");  // p는 jQuery 객체
var p2 = document.querySelector("#xxx");   // p2는 JS 객체

6. Selectors

1) basic + attribute + hierarchy

https://api.jquery.com/category/selectors/basic-css-selectors/
https://api.jquery.com/category/selectors/attribute-selectors/
https://api.jquery.com/category/selectors/hierarchy-selectors/

<script>
$(document).ready(function(){  
            
	// 1. 모든 태그 선택
	console.log(jQuery("*"));
	$("*").css("color","red");  

	// 2. 특정 태그 선택
	$("p").css("color","red");  
            
	// 3. id로 선택
	$("#x").css("color","red");  

	// 4. class로 선택
	$(".y").css("color","red");  

	// 5. 여러 개 선택
	$("#x, .z").css("color","red");
            
	// 6. 속성으로 선택
	$("[class]").css("color","red");
	$("[class='z']").css("color","red");
	$("a[href^='https']").css("color","red");
	$("a[href$='com']").css("color","red");
            
	// 7. 계층구조 - 자식/자손

	// 자식 선택
	$("div > a").css("color","red");

	// 자손 선택 ( 자식포함 )
	$("div  a").css("color","red");
            
	// 8. 계층구조 - 형제/형제들
            
	// 바로 뒤 형제
	$("p+a").css("color","red");
            
	// 뒤 형제들
	$("p~a").css("color","red");

});

</script>

2) Filter - Basic, Child, Content

(1) Basic

• 거의 대부분이 deprecated 됨

(2) Child

https://api.jquery.com/category/selectors/child-filter-selectors/

$(document).ready(function(){  

// 1. :first-child - li 부모태그 기준의 첫번째 자식인 li 반환
$("li:first-child").css("color","red");

// 2. :last-child - li 부모태그 기준의 마지막 자식인 li 반환
$("li:last-child").css("color","red");
      
// 3. :nth-child(n) - li 부모태그 기준의 n번째 자식인 li 반환, 1부터
$("li:nth-child(2)").css("color","red");

// 4. :nth-child(2n) - li 부모태그 기준의 2n번째(2배수, 짝수) 자식인 li 반환, 1부터
$("li:nth-child(2n)").css("color","red");

// 5. :nth-child(2n+1) - li 부모태그 기준의 2n+1번째(2배수+1, 홀수) 자식인 li 반환, 1부터
$("li:nth-child(2n+1)").css("color","red");

// 6. :only-child - li 부모태그 기준의 유일한 자식인 li 반환
$("li:only-child").css("color","red");
  
});

• 추가 정리

span:last-child Selector
==> span의 부모기준으로 마지막이 span으로 되어 있어야 반환됨.

span:last-of-type Selector
==> span의 부모기준으로 DOM에서 가장 마지막인 span을 반환함.
가장 마지막이 span이 아니어도 무관함.

(3) content

https://api.jquery.com/category/selectors/content-filter-selector/

<script>
        
$(document).ready(function(){  

           // 1. :contains(문자열) => 문자열을 포함하는 요소 반환, 대소문자 구별함
          $("div:contains('John')").css("color","red");

           
           // 2. :has(선택자) => 선택자를 포함하는 요소 반환
          $("div:has('p')").css("color","red");

          // 3. :empty => 자식이 없는 요소 반환
          $("td:empty").css("background-color","red");

          // 4. :parent => :empty 반대로 자식이 있는 요소 반환
          $("td:parent").css("background-color","red");
 
});

</script>

(4) form

https://api.jquery.com/category/selectors/form-selectors/

<script>
        
        $(document).ready(function(){  

             //1. 버튼 요소 반환
             var button = $(":button");
             var b1 = button[0];
             console.log(button);  // jQuery 객체

             console.log(b1);      // JS 객체
             console.log(b1.innerText);     
             
             var b1_jquery = $(b1);
             // text()는 JS의 innerText 역할
             // setter 역할: text(값)
             // getter 역하: text()
             console.log(b1_jquery.text());  
 
             // 체크박스에서 체크된 요소 반환
             // val()는 JS의 value 역할
             // setter 역할: val(값)
             // getter 역할: val()
             var checkbox_checked = $("input:checked");
             console.log(checkbox_checked);  // jQuery 객체
             console.log(checkbox_checked.val());  // jQuery 객체

             // JS 이용
             var js = document.querySelector("#kkk").value;
             console.log("js:" , js);
        });

</script>

7. Traversing

• Selectors는 DOM에서 1차로 필터링하는 방법이다
  Traversing 는 기본 Selectors로 1차 필터링하고 이후에 2차 필터링할 때 사용한다 ★
  

1) 기본 Filtering

$(document).ready(function(){  
//https://api.jquery.com/category/traversing/filtering/
  
// 1. .eq(idx) - 0 부터 시작. 지정된 idx값으로 2차 필터링
$("li").eq(0).css("color","red");

// 2. .filter(selector) - 지정된 selector값으로 2차 필터링
$("p").filter(".middle").css("color","red");

// 3. .not(selector) - 지정된 selector값과 일치하지 않는 2차 필터링
$("p").not(".middle").css("color","red");

// 4. .first() - 1차 필터링에서 첫 번째 요소 2차 필터링
$("li").first().css("color","red");           

// 5. .last() - 1차 필터링에서 마지막 요소 2차 필터링
$("li").last().css("font-size","50px");   
          
        
// 6. .has(selector) - 지정된 selector 를 가진 요소 포함하는 2차 필터링
$("li").has("span").css("color","red");     

// 7. .is(selector|function) - 지정된 selector 를 가진 요소가 있으면 true 없으면 false 반환
var result = $("p").is("[class]");
console.log(result); 

//8. .slice(start[, end]) - 지정된 start와 end 범위를 가진 2차 필터링. start는 0부터 시작
$("li").slice(3).css("color","red");           // 3 ~ 끝까지 
$("li").slice(2,5).css("font-size","50px");    // 2~ 4까지

  
  
//9. .map(function(idx, v){}) - 1차 필터링된 요소를 가공해서 다시 반환하는 역할
  
// 가. JS 객체로 대문자로 변경해서 반환하는 코드
var result = $("li").map(function(idx,v){
		console.log(idx);
		console.log(v); // jS 객체
		var str = v.innerHTML;
		return str.toUpperCase();
});
console.log(result);

// 나. jQuery 객체로 대문자로 변경해서 반환하는 코드
var result2 = $("li").map(function(idx, v){  
		console.log(v); // v는 jS 객체
		var v_jquery = $(v);  // v_jquery는 jQuery 객체
		var str = v_jquery.text();
		return str.toUpperCase();
});
console.log(result2);

// 다. function 함수 내에서 JS용 this 사용 
var result3 = $("li").map(function(idx,v){
		// this와 v는 동일. 즉 li임
		console.log("this:", this); // jS 객체
		return this.innerHTML.toUpperCase();
});
console.log(result3);

// 라. function 함수내에서 JQuery용 this 사용 
var result4 = $("li").map(function(idx,v){
		// this와 v는 동일. 즉 li임
		console.log("this:", this); // jS 객체
		var this_jQuery = $(this);  // JQuery용
		return this_jQuery.text().toUpperCase();
});
console.log(result4);
});

</script>

2) Tree

(1) 부모 / 자식 관계

$(document).ready(function(){  
//https://api.jquery.com/category/traversing/tree-traversal/
  
// 1. .children([selector]) : 자식만 찾음 ( 자손 포함 안됨 )
.children()            <==  1차 필터링의 모든 자식 반환 ( 자손 포함 안됨 )
.children(selector)    <==  1차 필터링의 자식들중에서 selector와 일치하는 자식 반환 ( 자손 포함 안됨 )

$("div").children().css("color","red");
$("div").children("span").css("color","red");
              
              
//2.  .find(selector) :   자손까지 찾음 ( 자식 포함됨 )
$("div").find("span").css("color","red");

//3.  .parent([selector]) :   부모 찾음 
.parent()            <==  1차 필터링의 모든 부모 반환 ( 조상 포함 안됨 )
.parent(selector)    <==  1차 필터링의  selector와 일치하는 부모 반환 ( 조상 포함 안됨 )

// 속성 관리: setter 역할: attr(속성명,속성값)             getter 역할: attr(속성명)
$("span").parent().attr("class","xyz");  // span의 모든 부모인 2개의 div와 1개인 p에 class속성이 추가됨.
$("span").parent("p").attr("class","xyz");  // span의 모든 부모인 2개의 div와 1개인 p 중에서 p에만 class속성이 추가됨.
            
//4.  .parents([selector]) :   조상 찾음 (부모 포함)
.parents()            <==  1차 필터링의 모든 조상 반환 
.parents(selector)    <==  1차 필터링의  selector와 일치하는 조상 반환 ( 조상 포함 안됨 )
$("span").parents().attr("class","xyz");  // span의 모든 조상요소에 class 속성이 추가됨
$("span").parents("body").attr("class","xyz");  // span의 모든 조상요소중에서 body에만 class 속성이 추가됨
});

</script>

(2) 형제들 관계

 $(document).ready(function(){  
//https://api.jquery.com/category/traversing/tree-traversal/
  
//1.  .next([selector]) <== 1차 필터링된 요소의 바로 뒤 형제요소만 반환
.next()          <== 1차 필터링된 요소의 바로 뒤 모든 형제요소만 반환
.next(selector)  <== 1차 필터링된 요소의 바로 뒤 형제요소중에서 selector와 일치하는 형제만 반환
$("li").next().css("color","red");
$("li").next(".selected").css("color","red");
           
//2.  .nextAll([selector]) <== 1차 필터링된 요소의 뒤 형제들 반환
.nextAll()          <== 1차 필터링된 요소의 뒤 형제들 반환
.nextAll(selector)  <== 1차 필터링된 요소의 뒤 형제들중에서 selector와 일치하는 형제들만 반환
$("li:first").nextAll().css("color","red");
$("li:first").nextAll(".selected").css("color","red");

//3.  .prev([selector]) <== 1차 필터링된 요소의 바로 앞 형제요소만 반환
.prev()          <== 1차 필터링된 요소의 바로 앞 모든 형제요소만 반환
.prev(selector)  <== 1차 필터링된 요소의 바로 앞 형제요소중에서 selector와 일치하는 형제만 반환
$("li").prev().css("color","red");
$("li").prev(".selected").css("color","red");

//4.  .prevAll([selector]) <== 1차 필터링된 요소의 앞 형제들 반환
.prevAll()          <== 1차 필터링된 요소의 앞 형제들 반환
.prevAll(selector)  <== 1차 필터링된 요소의 앞 형제들중에서 selector와 일치하는 형제들만 반환

$("li:last").prevAll().css("color","red");
$("li:last").prevAll(".selected").css("color","red");


//5.    .siblings([selector]) <== 1차 필터링된 요소의 바로 앞/뒤 형제들 반환
.siblings()          <== 1차 필터링된 요소의 바로 앞/뒤 형제들 반환
.siblings(selector)  <== 1차 필터링된 요소의 바로 앞/뒤 형제들중에서 selector와 일치하는 형제만 반환
$("li.xxx").siblings().css("color","red");
$("li.xxx").siblings(".selected").css("color","red");    

});

</script>

cf) 2차 필터링의 find와 filter 차이점

$(document).ready(function(){  
   
	$("div").filter(".myClass").css("color","red");  // 1차 필터링된 div태그중에서 class="myClass" 로 된 요소 반환
	$("div").find(".myClass").css("font-size","50px"); // 1차 필터링된 div태그의 자손(자식포함)중에서 class="myClass" 로 된 요소 반환
            
});

8. Attributes

• https://api.jquery.com/category/attributes/

1) text() , html()

• JS의 innerText와 동일한 기능
• 예>

<p id="xxx">hello</p>
// getter 역할
var p = document.querySelector("#xxx").innerText; (JS)
var p2 = $("#xxx").text(); (jQuery)

// setter 역할
document.querySelector("#xxx").innerText = "world"; (JS)
$("#xxx").text("world"); (jQuery)

2) val(), attr()

<script>
        
        $(document).ready(function(){  
          // https://api.jquery.com/category/attributes/

           //jQuery 이벤트
           $("#get").on("click",function(){
              // JS
              var id = document.querySelector("#userid").value;
              // JQuery
              var id2 = $("#userid").val();
              console.log(id, id2);

            ////////////////////////////////////
              // JS
              var link = document.querySelector("#xxx").href;
              
              // JQuery
              var link2 = $("#xxx").attr("href");
              console.log(link, link2);

           });
           
           $("#set").on("click",function(){
               // JS
               document.querySelector("#userid").value="world";

               // JQuery
               $("#userid").val("world2");
   

           ////////////////////////////////////
              // JS
              document.querySelector("#xxx").href="http://google.com";
              document.querySelector("#xxx").innerText="구글";
        
              //jQuery
              $("#xxx").attr("href", "http://jquery.com");
              $("#xxx").text("jquery");
            });

        });

    </script>

3) attr 메서드와 prop메서드 차이점

<body>
	    <input type="checkbox"  id="c1" checked>
	    <input type="checkbox"  id="c2" >
	</body>
     
        $(document).ready(function(){  
          // https://api.jquery.com/category/attributes/

           //즉시호출함수
           (function(){


               // attr(): 태그의 속성값을 조회 가능. ( 속성값 자체를 가져옴)
               // prop(): 태그의 속성값을 조회 가능. ( 속성값 상태를 가져옴) 예> checked, disable

              console.log("c1: attr:", $("#c1").attr("checked"), $("#c1").prop("checked"));  // checked true
              console.log("c2: attr:", $("#c2").attr("checked"), $("#c2").prop("checked"));  // undefined false

           })();


        });

4) CSS 관련

1) .addClass("class class2") : 하나 이상의 클래스 적용
2) .removeClass("class class2") : 하나 이상의 클래스 제거
3) .toggleClass("class class2") : 번갈아 addClass 와 removeClass 적용
4) .css("속성명","속성값");
.css({"속성명":"속성값", "속성명1":"속성값1"});

9. Manipulation

https://api.jquery.com/category/manipulation/

1) 선택된 요소의 형제로 삽입하는 방법

• .before()
• .after()

2) 선택된 요소의 자식으로 삽입하는 방법

• .prepend()
• .append()

3) 삭제

• 자신이 삭제 : .remove()
• 자식이 삭제 : .empty()

4) 치환

• .replaceWith()

10. Util

https://api.jquery.com/category/utilities/

1) 배열 데이터 이용한 처리

(1) $.each(array, function(idx, v){});

: 일반적인 array 반복할 때 사용

(2) $.grep(array, function(v, idx){ return boolean 값; });

: 필터링 기능. return true만 반환됨

(3) $.map(array, function(v, idx){ return 가공값; })

: 데이터 가공해서 반환

2) DOM 배열 이용한 처리

$("li").each(function(idx, element){});

<script>
       
       $(document).ready(function(){

        var sum = 0;
            $("li").each(function(idx, element){
                console.log(idx, element);

                var data = $(element).text();
                
                sum += Number.parseInt(data);
                $("#result").text(sum);
            });
       });    
</script>

11. Event

1) 이벤트 설정 및 해제

.on ("이벤트타입1 이벤트타입2" [,"selector", data], function(){});
.off ("이벤트타입" [,"selector", function(){}]);
.one ("이벤트타입1 이벤트타입2" [, data ], function(){});
==> 이벤트 핸들러 (함수)에서 this는 이벤트 소스를 가리킨다 (JS 객체)

2) trigger() 메서드

기능 : xxx 버튼을 눌렀는데 yyy 버튼을 누른 기능을 한다

$("#xxx").on("click", function(){
	$("#yyy").trigger("click");
});
$("#yyy").on("click", function(){
	console.log("yyy");
});

12. Ajax

https://api.jquery.com/jQuery.ajax/

$.ajax(url [,settings]);$.ajax([settings]);
==> 위의 settings는 JSON 포맷을 가짐

1) GET 방식

2) POST 방식

타겟: https://reqres.in/api/users
method: post
전달 데이터: {
"name": "morpheus",
"job": "leader"
}

응답 데이터:
{
"name": "morpheus",
"job": "leader",
"id": "976",
"createdAt": "2024-05-17T07:22:16.317Z"
}
새로운 값을 생성하고 성공했을 때: 201

가. JS 용 POST

  <script>
    
    $(document).ready(function(){  
     // https://api.jquery.com/category/events/

     // JS용 Ajax-POST 요청  
     $("#xxx").on("click",function(){
        var url = "https://reqres.in/api/users";

        var req = async function(){
            await fetch(url,{
                      method: "POST",
                      headers: {
                        "Content-Type": "application/json",
                        // 'Content-Type': 'application/x-www-form-urlencoded',
                      },
                      body: JSON.stringify({"name": "홍길동","job": "leader"})
                   })
                  .then(response=>response.json())
                  .then(json=>{
                    console.log(json);
                  })
                  .catch((error)=>console.log("error 발생",error))
                  .finally(()=>console.log("finally 발생"));
        };
        req(); // 호출

     });


     // JQuery용 Ajax-POST요청  
     $("#yyy").on("click",function(){

            $.ajax({
                method:"post",
                url:"https://reqres.in/api/users",
                dataType:'json', // "text",
                data:JSON.stringify({"name": "홍길동","job": "leader"}),
                contentType:"application/json",
                success:function(data, status, xhr){
                    console.log("data:", data);
                    console.log("status:", status);
                },
                error:function(xhr, status, error){
                    console.log("error:", error);
                }

            });


     });

    });

</script>