[Front-end🦁] #30 jQuery

1. 멋사 수업

1. Promise

어제 배운 것을 간단하게 복습하고, 콜백지옥을 Promise로 깔끔하게! 만들었다.

2. jQuery

jQuery Library : js 코딩한 것을 그냥 빌려 쓰겠다.
Framework : 이미 짜여있는 것에 규칙을 맞춰서 사용하는 것. 레고처럼 설명서대로 조립!

지는 해라고는 하지만 실무에서는 여전히 제이쿼리를 무시할 수가 없다. 어제 보라님 특강에서도 무신사 페이지들 중에 jQuery 로 만들어진 페이지들이 많다고 들었다.

1. CDN 연결

https://code.jquery.com

3.x 버젼의 minified 를 사용했다.

• uncompressed : 모든 것이 있음.
• minified : 기능상 빠진 것은 없으나 변수명이나.. 여러가지가 압축되어 있음
• slim : 몇가지 기능이 빠짐.
• slim minified : 슬림을 압축

2. 기본 사용법

// 아래 두 코드는 같은 코드.
document.getElementById('one').innerText = 'hello jQuery';
$('#one').text ('hello jQuery');
// tag로 잡기.
$('p').hide(); // display : none

// html, css 건드리기
$('.실습').html('<strong>실습</strong> 중 이에요!');
$('.실습').css('color', 'red');
$('.실습').css('backgroundColor', 'blue');
$('img').attr('src', 'a.jpg');

3. filter

//filter - index가 0부터 시작.
eq // equal ( = )
ne // not equal ( <> )
lt // little ( < )
le // little or equal ( <= )
gt // greater ( > ) 
ge // greater or equal ( >= )
// 사용 예시. 2보다 큰 자식들만 yellow
$("li:gt(2)").css( "backgroundColor", "yellow");

// 속성 filter
:attributeContains // input[name*='man’]
:attributeEquals // input[name='newsletter’]

// 자식
:first-child, :last-child
:nth-child(2)
:nth-child(even), :nth-child(odd)
:nth-child(3n)

// 컨텐츠 필터
:contains(text)
:empty
:has(selector)

$("name").val(); // 속성값 읽어오기
("name").val();  // 속성값 쓰기, text, html
$("span").parent();
$("div").children();
$("div").first();
$("div").last();
// append prepend 자식 앞 뒤에 추가
// 만약 바닐라였다면..? 순회하면서.. 추가....
$("ul").prepend("<li>Some appended text.</li>");
$("ul").append("<li>Some appended text.</li>");
// ul 의 앞 뒤로.
$("ul").before("<h2>시작</h2>");
$("ul").after("<h2>끝</h2>");
$(".div1").remove(); // 삭제

// class를 편집할 수 있다.
$("div").addClass("important");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");
$("p").css("background-color");
$("p").css("background-color","yellow");

// 기타 효과
$("p").hide();
$("p").show();
$("p"),toggle();
$("#div1").fadeIn();
$("#div1").fadeOut();
$("#div1").fadeToggle();
$("#div3").fadeIn(3000);

4. event

// 메모장 내용 가져오기.
<textarea name="메모장" id="메모장" cols="30" rows="10"></textarea>
<button class="btn2">메모장 내용 경고창으로 출력</button>
<script>
$('.btn2').click(function () {
  let note = $('#메모장').val();
  alert(note);
});
</script>

// animation : hover 같은 Event 도 가능.
// mouseenter, mouseleave .. 이런건 찾아보고 사용하면 된다.
$('.btn3').click(function() {
    $('.box2').animate({
        width: '300px',
        height: '300px',
        opacity: 1
    }, 'slow')
});

5. 플러그인

• jQuery UI (progressbar, selectmenu, etc)
• jQuery validation (유효성 검사)
• jQuery lightbox (모달 창처럼 만들어줌)
• Bootstrap
• etc

3. ajax

방법

• jQuery의 ajax, axios(axios 는 node, react 에서 많이 사용)
• fetch
• XMLHttpRequest

github에 json 올려두고 받아와서 마치 서버와 통신을 하는 것처럼 하는 실습을 진행했다.

// 버튼을 클릭했을 때 비동기 처리.
$('#btn_data').click(function() {
    //$.ajax({경로, 동기화 여부, 성공하면 할 일})
    $.ajax({
        url:'주소', 
        async: true,
        dataType: 'JSON',
        success: function(result){
            // $("#data").text(result);
            loaddata = result;
        }
    });
});

// http method 형태로 잘 보여준다.
axios.get(url).then((response) => { console.log(response) })

2. 작은 회고

• jQuery 에 대해서 공부했다. 배우고 느낀점! 너무 편하다!!! 근데 나는 역시 정석적인 방법이 좋다. 바닐라 굿~
• ajax 비동기 처리에 대해서 공부했다.
• swift 에서 비동기와 closure... 에 대해 머리 썩혔는데 closure도 함수인걸 생각하면 ajax를 잘 알면 한번에!! 처리할 수 있을 것 같다.