JQuery는 DOM작업을 쉽게 처리할 수 있도록 도와주는 라이브러리다. 때문에 자바스크립트 문법이나 라이브러리를 대체하는 프로그래밍 언어는 아니다. 어떤부분에서 쉽게 처리되는지 문법적인 차이를 살펴보자. 1. 변수 선언 // 기존 js 방식 $jsTitle = document.getElementById('title'); console.log($jsTitle); // jquery 방식 $title = $('#title'); console.log($title); 자바스크립트에서는 getElement를 통해 가져온 반면 ,제이쿼리의 경우는 변수를 바로 가져올 수 있는 것을 확인할 수 있다. HTML에 다음과 같은 id의 버튼이 있다고 가정해보자. 클릭1 그러면 JQuery에서 2, 3번과 같이 적용해볼 수 ..

JQuery로 체크박스 전체 선택, 전체 해제, 그리고 선택한 체크박스에 해당하는 값을 얻어오는 것을 구현하겠다. 1. html로 테이블을 구성한다. 팁 : table>tr*7>td*3 를 입력하고 엔터를 누르면 7열 3행의 테이블이 자동완성된다.) 확인 제목 글쓴시간 1111 11:11:11 2222 11:11:11 3333 11:11:11 4444 11:11:11 5555 11:11:11 6666 11:11:11 전체 체크박스읜 id는 'all'이고 개별적인 체크박스들의 name은 'chk'로 설정한다. 2. 전체 선택/ 해제 에 대한 자바스크립트 작성(JQuery 식대로 function 구성) $('#all').click(function () { if ($("#all").is(":checked"))..

제이쿼리(JQuery) : HTML 이벤트 처리 등 다양한 기능을 부여하는 오픈소스 기반의 자바스크립트 라이브러리 JQuery에 대해 잘 정리해준 글을 포스팅하고 정리는 스킵하겠다. 해당 글에서 개념, 장단점, 상황 등을 알 수 있다. 가장 큰 특징 : 호환성이 가장 큰 장점, 변화하는 기술이기 때문에 현재 가장 인기 있지만 하향세 中이라는 점. 제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래 (samsungsds.com) 제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래 제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래 www.samsungsds.com CDN : content delivery nerwork의 약자로, 라이브러리를 가져와 사용..

onmouseover: 마우스를 올렸을 경우, onomouseover 이벤트를 발생시킨다. onmouseleave: 올렸던 마우스가 나갔을 경우, onomouseleave 이벤트를 발생시킨다. (onmouseleave의 경우 onomouseover과 매우 비슷한데자식요소들까지 영향을 주느냐 안주느냐의 차이점이라고 한다.) onmouseover, onmouseleave 을 확인해보면 각각 이벤트를 'onmouseover!', 'onmouseleave!' 로 작성하여 콘솔창에 띄우게 해보았다. 마우스를 갖다대고 땔때마다 콘솔창에 텍스트가 뜨는 것을 확인할 수 있다. 이를 활용하여 색상이 변경되는 메뉴를 만들어보겠다. 미션: 마우스를 갖다대면 흰색으로 바뀌는 메뉴 상자를 만들어보자!! 1. html 구성: 상..

onclick: 브라우저에게 해야할 일을 알리는 바인딩 이벤트를 발생하기 위해서 onclick함수를 사용함. name.onclick = 'javascriptCode' element onclick = "javascriptCode" 미션: 세개의 회색 상자가 있고 박스를 누르면 눌린 상자의 색이 바뀌게 하자! 1. html 로 세개의 회색 상자 구성 에 2. html에 선택상자 구성하기 에 html, css, java라는 3개의 선택상자 구성한다. html css java 해당 텍스트는 div1 클래스에 쌓여 있고, 클릭하였을때 각각의 펑션으로 이동하게 된다. 3. onclick 펑션 구성하기 를 열어 클래스를 변경하여 스타일을 변경시킨다. function changeClass1() { let $target..

onclick : 마우스를 클릭할 때 브라우저에게 해야할 일을 알리는 바인딩 이벤트. name.onclick = 'javascriptCode'; 미션 : prompt에 받은 문자열을 화면에 크게 띄운 다음, 하단에 있는 빨강, 파랑, 초록 버튼을 누를 때마다 버튼명대로 문자색상을 변경할 것. 1. prompt에 문자열을 받는다. var num = String(prompt('텍스트를 입력해 주세요', '')); 2. 문자형태만 받기 위해 isNaN(Not a Number)이란 함수를 사용한다. 매게변수가 숫자인지 검사하는 함수로 isNaN(value) 형태로 쓴다. 숫자면 false, 숫자가 아니면 true를 반환한다. if (isNaN(num) == true && isNaN(num) != null) { ..