Coding Story/JQuery
[ JQuery ] 제이쿼리 함수 ( attr, val, data 등 )
JQuery 는 태그 등 엘리먼트에서 값이나 스타일, 또는 속성 등을 조작하기 위한 함수들을 정말 많은 방법으로 지원하는데 어떤 함수들이 있는지 살펴보도록 하자. attr ( ) attr 은 엘리먼트의 속성 값을 가져오거나 변경할 수 있는 함수이다. 하나의 인자를 주면 해당 속성 값만을 조회하고 두 개를 주면 해당 속성 값을 변경한다. . . TestContent prop ( ) 엘리먼트의 속성 값을 가져오거나 변경한다는 점에서 attr ( ) 와 유사하지만, 아무 속성 값이 아니라 true 와 false 값 만을 가지는 속성 값을 관리한다. . . TestContent addClass ( ) 클래스가 없는 엘리먼트에 class 속성을 추가한다. . . TestContent removeClass ( ) ..
[ JQuery ] 제이쿼리 동적으로 생성된 버튼에 이벤트 달기
JQuery 로 버튼에 이벤트를 달 때 우리는 보통, $(document).ready(function( ) { ... }) 안에 이벤트 선언을 하던, $(function() { ... }) 안에 이벤트 선언을 한다. 만약 아래처럼 첫 번째 버튼을 클릭하면 두 번째 버튼을 그려주는 코드가 있다고 가정하자. 첫 번째 버튼 첫 번째 버튼 ( firstButton ) 을 클릭하면 두 번째 버튼 ( secondButton ) 이 성공적으로 생성될 것이다. 이는 $(document).ready(function( ) { ... }) 안에 첫 번째 버튼의 이벤트를 선언해놨기에, 화면이 열리면서 해당 코드를 읽어 첫 번째 버튼에게 이벤트를 적용시켜주기 때문이다. 자, 그렇다면 이렇게 동적으로 생성 된 두 번째 버튼 ( ..
[ JQuery ] 제이쿼리 셀렉터 ( Selector ) ID, CLASS로 찾기
셀렉터(Selector)란? 이전 포스팅에서 JQuery 를 사용하는 이유가 엘리먼트를 쉽게 선택하고 이를 제어하기 위함이라 언급했다. 여기서 말한 엘리먼트를 쉽게 선택할 수 있도록 해주는 녀석이 바로 Selector 이다. JQuery 를 사용하는 가장 큰 이유가 이 Selector 라는 놈을 사용하기 위해서라고 해도 손색이 없다. 서론은 그만하고, 본론으로 넘어가보자. HTML 에선 태그들에게 id, class 등을 아래와 같이 선언하곤 하는데, AAAAA BBBBB 기존의 JavaScript 로 위의 엘리먼트들의 html 값을 뽑아내고 싶다면 getElementById, getElementsByClassName 등을 이용했을 것이다. 하지만 JQuery 는 저렇게 할 필요 없이 id 는 "#" 으로..
[ JQuery ] 제이쿼리란 무엇인가?
JQuery 란? 우리는 화면을 그려낼 때 JavaScript 를 기반으로 자주 만들어내곤 한다. 물론 JavaScript 만 써도 충분히 화면 작업이 가능하다. 하지만 보다 효율적이고 직관적이게 엘리먼트를 선택하고 제어할 수 있도록 해주는 JavaScript 라이브러리가 존재하는데 이게 바로 JQuery 이다. JavaScript 를 보다 쉽게 쓰기위해 사용하는 쿼리라고 생각하면 된다. 그럼 예제를 통해 JQuery 에 대해 알아보도록 하자. 시작하기 앞서 JQuery 를 사용하려면 아래의 경로를 head 태그 내에 명시해주어야 한다는 걸 알고 넘어가자. 자, 그럼 본론으로 돌아가서 만약 alert message 를 띄우는 button 을 만든다고 가정할 때, JavaScript 로만 만들면 아래와 비..