[Front-end🦁] #30 jQuery

1.かっこいい授業

1. Promise

昨日習ったことを簡単に復習して、Promiseでcallback地獄をきれいに片付けましょう!できました.

2. jQuery

jQuery Library:jsコードを借ります.
Framework:組織化されたルールとルールを組み合わせて使用します.レゴのように説明書通りに組み立てる!
負けたのは負けだが、実際の仕事ではJクエリを無視することはできない.昨日はボラの特別講座でも武神社のページにjQueryで作られたものが多いと聞きました.

1.CDN接続

https://code.jquery.com

3.xバージョンのminifiedを使用しました.

非圧縮:すべて存在します.

minimized:機能的に漏れはありませんが、変数名があります...複数種類の圧縮タイプ

Slim:いくつかの機能が少なくなりました.

超薄型:圧縮超薄型

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検証(検証)

jQuery lightbox(モードウィンドウと同様)

Bootstrap

etc

3. ajax

に道を教える

jQueryのajax、axios(axiosはノードに使用され、reactでよく使用される)

fetch

XMLHttpRequest

jsonをgithubに置いて持って帰って、サーバーと通信するような実習をしました.

// 버튼을 클릭했을 때 비동기 처리.
$('#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を勉強しました.勉強して感じた!気持ちよかった!!!でも私はやはり固定的な方法が好きです.バニラgood~

ajax非同期処理を学びました.

swiftで非同期をオフにします...もしあなたがajaxについて全然知らないならば、closureも関数で、ajaxを知っている限り、一度だけ!処理できるようです.