jQuery는 앞단에서 중요 핵심이라고 생각한다. 제이쿼리를 사용할때 타겟을 잘 잡아서원하는 값을 java단으로 보내줘야 원할하게데이터가 흐를수 있다. 제이쿼리는 책을보며 따라치는 것도좋지만 미리 만들어져 있는 예제들을수정해보며 타겟잡는 연습을 해보는것이 좋다고 생각한다.아래 링크에 들어가 https://www.w3schools.com/jquery/jquery_traversing_descendants.asp 여러가지 제이쿼리 예제를 볼수 있으며 아래처럼 Try it Yourself 를 눌러실행 예제를 볼수있다. 소스를 직접 수정해 Run을 눌러 실행도 해볼 수 있다.
jQuery에서 문서 객체의 내부 검사에 사용되는 메소드는 2가지가 있다.html(), text() html()은 문서 객체 내부의 글자와 관련된 모든 기능을 수행한다.(html태그인식)text()는 문서 객체 내부의 글자와 관련된 모든 기능을 수행한다. 위 두 메소드의 차이는 html태그의 인식 여부이다.간단하게 아래와 같이 테스트를 해보자.
jQuery의 배열 객체는 따로 만들지 않고 선택자로 여러 개의 문서 객체를 선택할 때 생성된다. 간단하게 style태그를 생성해 하이라이트를 넣어주자15line의 addClass는 문서 객체에 class속성을 추가하는 메소드이다.반대로 removeClass 가 있으며 이 메소드는 문서 객체의class 속성을 제거한다. addClass를 사용해서 h1태그에 하이라이트가 적용된다. 아래는 크롬 개발자도구로 확인한 모습이다. 이제 이번 포스팅의 주제인 배열관리를 위한 each를 알아보자. 17line에서 $('h1')으로 타겟을 잡게되면h1태그 전체를 다 잡게된다. body태그에는 5개의h1태그가 있으므로 5개의 h1태그를 잡게 되는것이다. each를 사용해 5개의 각 객체를 다르게 설정 할 수 있다.테스트..
선택자 중에 : 기호를 포함하는 선택자를 필터 선택자라고 부른다. 입력 양식 선택자 jquery의 입력 양식 필터 선택자이다.(자주 쓰이는 편은 아니다.) (필터 선택자 자체를 잘 사용하지 않는다.) setTimeout 을 사용한 이유는 시간초내에 다른option을 선택할 수 있도록 하기 위함이다. 위치 필터 선택자 함수 필터 선택자 여러가지의 함수 필터 선택자가 있지만 eq만 알면 될 것 같다.eq(n)은 n번째 위치한 문서 객체를 선택한다.n에는 배열의 인덱스 처럼 0부터 시작한다.
자손 선택자와 후손 선택자는 기본 선택자의 앞에 붙여 사용하며 기본 선택자의 범위를 제한한다. body태그 바로 아래 있는 div태그를 자손이라 한다.그리고 body태그의 아래에 있는 모든 문서 객체를후손 이라고 한다. 라고 책에 쓰여져 있지만 역시 프로그래밍 이론 공부는보면서 쳐보는게 제일 좋다. 자손 선택자는 자손을 선택하는 선택자이며 요소A> 요소B의 형태로 사용된다.아래에서는 body태그의 자식으로 범위를 한정해전체가 선택된다. 크롬 개발자 도구로 확인을 해보면 div태그에만 css가 적용되어있다. 후손 선택자는 이름 그대로 후손을 선택하며 요소A 요소B 의 형태로 사용하며요소A의 후손으로 범위를 한정한다.아래는 body 태그의 모든 후손을 선택한다. 크롬 개발자 도구로 확인을 하면body 태그의..
이번 포스팅에서는 자바스크립트와 제이쿼리의 실행 속도비교를 해보겠다. 간단하게 비교하는 방법이라 소스가 짧다.먼저 input태그를 하나 만들어주고자바스크립트와 제이쿼리에서 id가 text인 타겟에 속도테스트라는value값을 넣어줄 수 있도록 해주자. 다음 실행 속도비교를 위해 timer 라는 function을 하나 만들어주고performance.now()를 이용해 실행 속도를 체크하자. (performance.now()는 API문서를 참고했고 링크는 제일 밑에있다.) 아래는 만약을 위해 적어준다 실행을 하고 크롬 개발자도구의 콘솔창에서 확인을 하면 차기아 많이나야 약 3배 정도의 차이가 나는데단위가 ms 이니 거의 똑같다고 보면된다. 하지만 방금 테스트를 위해선 그냥 input태그에 5글자를 넣어준것이다..
요즘 웹 앱 에서 서버에 데이터를 요청하는HTTP통신을 필수로 구현해야 하는 기능이다.과거 웹 사이트가 정적인 텍스트나 간단한 이미지를나타내는데 그쳤다면 이젠 사용자와의 상호 작용에 따라데이터를 동적으로 화면에 표시해 줘야 하기 때문이다. 여기서 HTTP는 브라우저와 서버 간에 데이터를주고받는 통신 프로토콜이다. 브라우저에서 특정데이터를 보내달라고 request를 보내면 서버에서 response로해당 데이터를 보내주는 방식이다.서버에 해당 데이터를 보내달라고 메시지를보내는 것이 HTTP요청을 보내는것과 같다. 웹 앱의 HTTP 통신의 대표적인 것으로 jQuery의 ajax가 있다.ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기..
