[Front-end🦁] #30 jQuery

1.かっこいい授業

1. Promise

2. jQuery

1.CDN接続

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.プラグイン

3. ajax

// 버튼을 클릭했을 때 비동기 처리.
$('#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.小回顧