제이쿼리에서는 attr()과 같이 속성을 설정하는 함수는 제공하지만, hasAttr()과 같이 속성(attribute)의 유무를 판별하는 함수는 제공하지 않습니다. 그렇기 때문에 hasAttr()처럼 속성의 유무를 판별하려면 별도의 is()나 filter() 함수를 사용해야 하는데요. 오늘은 jQuery를 사용해서 속성 유무를 판별하는 방법을 알아보겠습니다. Javascript로 attribute 유무 판별하기 DOM에서 기본으로 제공하는 기능 중 Element의 hasAttribute()를 사용하면 속성을 판별할 수 있습니다. jQuery를 굳이 별다르게 조작할 필요 없이 말이죠. 아래의 방법은 jQuery 객체가 가진 참조값을 이용해 Element에 접근해서 속성 유무를 판별하는 방법입니다. $(th..
jQuery 라이브러리를 사용하게 되면 많이 이용하는 메서드가 바로 click()이나 change() 같은 이벤트를 다룰 때 사용하는 이벤트 핸들러 메서드입니다. 그런데 click(), change() 같은 이벤트 핸들러가 잘 동작하다가 특정 상황에서 동작하지 않는지 이유를 알고 계신가요? 그리고 click()나 change()가 동작하지 않을 때 on()을 사용하면 문제가 해결되는 걸까요? 오늘은 on()과 click()의 차이 그리고 그 차이점을 통해서 click() 대신 on()을 써야 하는지 알아보겠습니다. click()이 동작하지 않으면 on()을 쓰자 click()와 on()의 차이점을 알아보기 전에 click() 이벤트 핸들러가 정상적으로 동작하지 않는 경우 on()을 사용해서 이벤트를 처리..
jQuery를 사용할 수 있는 방법은 무엇이 있을까요? jQuery를 사용하기 위해서는 jQuery 모듈을 우리가 사용하는 프로젝트에 포함시켜야 합니다. jQuery뿐만 아니라 어떤 자바스크립트 라이브러리가 되었던 우리가 명시적으로 사용한다는 스크립트를 추가해야 사용이 가능해집니다. CDN 방식을 이용해서 jQuery를 사용하기 CDN(Content Delivery Network)은 콘텐츠 전송 네트워크라는 의미로 간단하게 설명하면 네트워크(인터넷)를 통해서 콘텐츠(jQuery 라이브러리 파일)를 배포하는 방식을 말해요. 즉 사용하는 사람 입장에서 쉽게 이용할 수 있도록 만들어진 방식이에요. jQuery의 CDN 주소는 공식 홈페이지를 통해서 확인할 수 있습니다. CDN 방식으로 배포되는 타입은 unco..
jQuery에서 제공하는 data()는 DB(Database)와 같은 데이터 저장소 역할을 합니다. data()가 데이터 저장소와 같은 역할을 한다면 화면을 개발할 때 무슨 필요가 있냐고 생각할 수 있지만, 화면에서 특정 기능이 동작하기 데이터가 필요한 경우 매번 서버와 통신하는 것은 불필요합니다. 특히 불필요하게 서버와의 통신이 빈번하게 일어나면 서버에 과부하를 주는 요소가 되기 때문에 어느 정도의 데이터는 화면에서 관리하고 사용하는 게 화면을 개발할 때 편리합니다. 그럼 오늘은 jQuery의 data()에 대해 학습해보도록 하겠습니다. data()는 어떤 원리로 동작하는 걸까? jQuery의 data()는 앞서 이야기드렸듯이 데이터를 설정하는 기능입니다. 그런데 한 가지 의문스러운 부분은 DB도 아니..
jQuery를 사용하게 되면 바로 학습하게 되는 Event가 바로 $(document). ready()입니다. 왜 jQuery 배우게 되면 이 Event를 알게 되는 걸까요? 오늘은 jQuery의 대표 기능 중 하나인 $(document). ready() Event를 알아보도록 하겠습니다. 문법 .ready(handler) .ready()는 DOM(Document Object Model)이 완전히 불러와지면 실행되는 Event입니다. 일반적으로 브라우저가 HTML을 보여주기 위해서는 먼저 문서 구조를 만들고 만들어진 문서 구조 위에 디자인을 입히는 형식을 취합니다. 이 과정에서 디자인이 입혀지지 않은 상태로 문서 구조가 만들어진 시점에 실행되는 Event가 바로. ready()입니다. 대부분의 브라우저에..
시작하기 jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리입니다. 지금은 Angular, React, Vue 같은 화면을 다루는 여러 가지 기술들이 있어 화면 개발을 보다 쉽게 할 수 있지만, 화면과 관련된 기술이 발전하기 전에는 jQuery 만큼 화면 개발을 쉽게 해 주는 라이브러리는 존재하지 않았습니다. 또한 화면 개발에 있어 프로그래머들이 가장 다루기 힘들어하는 크로스 브라우징을 jQuery는 강력히 지원하였고 많은 프로그래머들은 열광했습니다. 현재는 v3.6.0 버전까지 릴리즈 되었습니다. Write less, do more - jQuery가 가진 철학 jQuery가 기본적으로 가진 철학은 "write less, do mo..