천천히 차근차근

아래와 같이 jquery 를 작성하면 새로운 클래스명을 사용하고 싶을 때, 클래스명을 더하고, 삭제하지 않아도 손 쉽게 클래스명을 변경하여 사용할 수 있다.😍 $('변경하려는 요소').attr('class', '변경하려는 클래스명');

jquery 클래스 클릭 이벤트(class click, 한개만 선택, 선택 외의 요소에게 css 다르게 적용) See the Pen jquery 클래스 클릭 이벤트(class click, 한개만 선택) by hyeryeonkim (@khr777) on CodePen.

this, not() jquery 의 this와 not() 함수를 활용하여 구현 See the Pen by hyeryeonkim (@khr777) on CodePen.

slick slider 참고 사이트 여러개 https://tony-study.tistory.com/41?category=311797 slick 슬라이더 CSS .product {width: 1048px;margin: 0 auto;} // 전체적인 width 설정 .product .slick-prev.slick-arrow {position: absolute;left: -85px;top: 50%;transform: translateY(-50%);background: url(/img/bx_left.. tony-study.tistory.com https://m.blog.naver.com/ka28/221999891981 [JQuery] slick slider 라이브러리 사용법 우리가 홈페이지를 만들다 보면 슬라이..

https://ossam5.tistory.com/148 [jQuery] 웹사이트에 사용가능한 슬라이더(Slider) 8가지 모음 제이쿼리 혹은 자바스크립트로 구성된 슬라이더 관련 플러그인을 알아보겠습니다. 1. SwiperJS - 주소 : swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile to.. ossam5.tistory.com

var pattern_num = /[0-9]/; // 숫자 var pattern_eng = /[a-zA-Z]/; // 문자 var pattern_spc = /[~!@#$%^&*()_+|?:{}]/; // 특수문자 var pattern_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글체크 if(!((pattern_num.test($("#career").val())) && !(pattern_eng.test($("#career").val())) && !(pattern_spc.test($("#career").val())) && !(pattern_kor.test($("#career").val()))) ){ alert("경력은 숫자만 입력 가능합니다."); return false; }

var telValue = $('#tel').val(); if ( telValue.match("-")) { alert('-을 제거해주세요.'); return false; }jQuery의 match 함수를 사용하면 특정 문자가 포함되었는지 여부를 확인할 수 있다.🍭

// 모든 텍스트의 변경에 반응합니다. $("#tel").on("propertychange change keyup paste input", function() { // 현재 변경된 데이터 셋팅 var newValue = $(this).val(); // 현재 실시간 데이터 표츌 //alert("텍스트 :: " + newValue); if ( newValue.match("-")) { $('.tel_hiper_error').removeClass('none'); } else { $('.tel_hiper_error').addClass('none') } });

function getParameterByName(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } var applPhone = getParameterByName('parameterName');

$("#payAmt").val(String(data.payAmt).replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'));

모두 참고용 let date = new Date() let year = date.getFullYear() let month = date.getMonth() + 1 month = month >= 10 ? month : '0' + month let day = date.getDate() day = day >= 10 ? day : '0' + day let hour = date.getHours() hour = hour >= 10 ? hour : '0' + hour let min = date.getMinutes() let sec = date.getSeconds() sec = sec >= 10 ? sec : '0' + sec let purchaseDay = y..

HTML hello#jQuery $('.change_greeting').text('konnichiha');

Hello World 안녕하세요? 지금은 밤입니다.// jQuery $(document).ready(function(){ $('.test').css('color', 'red'); }) $(document).ready(function() { $( "h1" ).css( "color", "green" ); }); $(function(){ $('.night').css('font-size', '2rem'); }); See the Pen RwKLLov by hyeryeonkim (@khr777) on CodePen.

| UserAgent를 통한 모바일 인식 자바스크립트 if(navigator.userAgent.match(/Mobile|iP(hone|od)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)){ //스마트폰일 때 실행 될 스크립트 }User agent에는 사용자 기기에대한 정보도 들어있기 때문에, 모바일환경을 인식할 수 있습니다. 위의 코드를 사용하면 태블릿을 제외한 스마트폰에서만 스크립트를 실행할 수 있습니다. 오류 발생(아이패드가 PC로 인식된다) if(navigator.userAgent.match(/Android|..

function renderFood(dish) { return ( ) }const renderFood = dish => ; 첫번째 function 정의 방법과 두번째 arrow function의 결과는 같다. 함수를 정의하는 방법은 위와 같이 두가지 방법이 있다.

App.js import React from "react"; function App() { return ( {foodLike.map((dish) => ( ))} {animalLike.map((animal) => { return ; })} ); } // 아래 코드들 // ~~~~ // ~~~~ // ~~~~ export default App; App에서는 음식과 동물 이름, 사진을 각 배열의 map 함수를 사용해서 필요한 컴포넌트에 props를 전달한다. map 함수를 사용할 때, return하는게 하나라면? {} 중괄호를 사용하지 않고 arrow function을 사용할 수 있다. HTML에서 JavaScript를 사용하려면 {}중괄호를 여닫아 사용한다. 음식, 동물 배열 const foodLike = ..

// Q1. make a string out of an array { const fruits = ["apple", "banana", "orange"]; const result = fruits.join(', '); console.log(result); } // Q2. make an array out of a string { const fruits = "🍎, 🥝, 🍌, 🍒"; const result = fruits.split(','); //const result = fruits.split(',', 2); split의 개수를 정할 수도 있다. console.log(result); } // Q3. make this array look like this: [5, 4, 3..

"use strict"; // Q1. make a string out of an array { const fruits = ["apple", "banana", "orange"]; let str = ''; for ( let fruit of fruits ) str += ' ' + fruit; console.log(str); // 이렇게구낭. console.log(fruits.toString()); } // Q2. make an array out of a string { const fruits = "🍎, 🥝, 🍌, 🍒"; } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array = [1, 2, 3, 4, 5]; c..

'use strict'; // Array // 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; // 2. Index position const fruits = ['🍎', '🍌']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); console.log(fruits[1]); console.log(fruits[2]); // 출력 : undefined // 배열의 제일 마지막 index를 출력할 때는 // 아래와 같이 출력하기도 한다. console.log(fruits[fruits.length - 1]); // 3. Loopi..

'use strict'; // 1. Literals and properties // Object // object = { key : value }; // object는 key와 value의 집합체이다. const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person) { console.log(person.name); console.log(person.age); } // 자바스크립트에서는 클래스가 없어도 이렇게 괄호로 객체를 생성할 수 있다. const ellie = { name: 'ellie'..