[Front-end๐ฆ] #30 jQuery
1. ๋ฉ์ฌ ์์
1. Promise
์ด์ ๋ฐฐ์ด ๊ฒ์ ๊ฐ๋จํ๊ฒ ๋ณต์ตํ๊ณ , ์ฝ๋ฐฑ์ง์ฅ์ Promise๋ก ๊น๋ํ๊ฒ! ๋ง๋ค์๋ค.
2. jQuery
jQuery Library : js ์ฝ๋ฉํ ๊ฒ์ ๊ทธ๋ฅ ๋น๋ ค ์ฐ๊ฒ ๋ค.
Framework : ์ด๋ฏธ ์ง์ฌ์๋ ๊ฒ์ ๊ท์น์ ๋ง์ถฐ์ ์ฌ์ฉํ๋ ๊ฒ. ๋ ๊ณ ์ฒ๋ผ ์ค๋ช
์๋๋ก ์กฐ๋ฆฝ!
์ง๋ ํด๋ผ๊ณ ๋ ํ์ง๋ง ์ค๋ฌด์์๋ ์ฌ์ ํ ์ ์ด์ฟผ๋ฆฌ๋ฅผ ๋ฌด์ํ ์๊ฐ ์๋ค. ์ด์ ๋ณด๋ผ๋ ํน๊ฐ์์๋ ๋ฌด์ ์ฌ ํ์ด์ง๋ค ์ค์ jQuery ๋ก ๋ง๋ค์ด์ง ํ์ด์ง๋ค์ด ๋ง๋ค๊ณ ๋ค์๋ค.
1. CDN ์ฐ๊ฒฐ
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๋ฅผ ์ ์๋ฉด ํ๋ฒ์!! ์ฒ๋ฆฌํ ์ ์์ ๊ฒ ๊ฐ๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([Front-end๐ฆ] #30 jQuery), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ddosang/Front-end-30์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค