jQuery는 앞단에서 중요 핵심이라고 생각한다. 제이쿼리를 사용할때 타겟을 잘 잡아서원하는 값을 java단으로 보내줘야 원할하게데이터가 흐를수 있다. 제이쿼리는 책을보며 따라치는 것도좋지만 미리 만들어져 있는 예제들을수정해보며 타겟잡는 연습을 해보는것이 좋다고 생각한다.아래 링크에 들어가 https://www.w3schools.com/jquery/jquery_traversing_descendants.asp 여러가지 제이쿼리 예제를 볼수 있으며 아래처럼 Try it Yourself 를 눌러실행 예제를 볼수있다. 소스를 직접 수정해 Run을 눌러 실행도 해볼 수 있다.
자바스크립트를 공부했을때Date를 사용해 오늘 날짜를 구했을때가 있었다.new Date()를 사용했는데오늘 회사에서 새로운 사실을 알았다. Date 에서 난 연도를 가져올때 당연히 getYear()로값을 가져올 줄 알았는데getYear() 이 아닌 getFullYear()로연도를 가져온다는 것이였다. 지금까지 공부해오면서 사실 new Date() 를 사용해본적이자바스크립트를 공부할 때 처음에 한 번 써본게 다 였던것같다. 왜냐하면 현재 연도나 오늘 날짜를 가져올 일 이 없었기 때문이다.게시판같은걸 만들때 오늘 날짜와 현재 시각을 insert할때는그냥 DB에서 바로바로 넣을 수 있었기 때문에new Date() 같은게 필요없었다. 근데 오늘 오랜만에 자바스크립트로오늘날짜를 구해오는 부분을 봤다.오늘 날짜가 ..
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개의 각 객체를 다르게 설정 할 수 있다.테스트..
자바스크립트 배열에 들어 있는 내용을 HTML 페이지에 출력하는 방법이다.script에 배열 array를 선언한다.그 안에 4개의 객체를 만들어주고속성은 name 과 link가 있다. 출력을 위해 $.each()를 만들어준다. 매개변수로 index와 item을 갖는다.index는 배열의 인덱스 또는 객체의 키를 의미하고item은 해당 인덱스나 키가 가진 값을 의미한다.
선택자 중에 : 기호를 포함하는 선택자를 필터 선택자라고 부른다. 입력 양식 선택자 jquery의 입력 양식 필터 선택자이다.(자주 쓰이는 편은 아니다.) (필터 선택자 자체를 잘 사용하지 않는다.) setTimeout 을 사용한 이유는 시간초내에 다른option을 선택할 수 있도록 하기 위함이다. 위치 필터 선택자 함수 필터 선택자 여러가지의 함수 필터 선택자가 있지만 eq만 알면 될 것 같다.eq(n)은 n번째 위치한 문서 객체를 선택한다.n에는 배열의 인덱스 처럼 0부터 시작한다.
속성 선택자는 기본 선택자 뒤에 붙여 사용한다.속성 선택자는 입력 양식과 관련된 태그를 선택할 때 많이 사용한다. 아래에서 input태그들은 태그 선택자로 구분할 수 없다.id, class 속성을 입력해 아이디 선택자나클래스 선택자를 사용 할 수 있지만 복잡하고 비효율적이다.그래서 속성 선택자를 사용한다. 속성 선택자를 활용해 아래와같이 사용할 수 도있으니꼭 알아두자
자손 선택자와 후손 선택자는 기본 선택자의 앞에 붙여 사용하며 기본 선택자의 범위를 제한한다. body태그 바로 아래 있는 div태그를 자손이라 한다.그리고 body태그의 아래에 있는 모든 문서 객체를후손 이라고 한다. 라고 책에 쓰여져 있지만 역시 프로그래밍 이론 공부는보면서 쳐보는게 제일 좋다. 자손 선택자는 자손을 선택하는 선택자이며 요소A> 요소B의 형태로 사용된다.아래에서는 body태그의 자식으로 범위를 한정해전체가 선택된다. 크롬 개발자 도구로 확인을 해보면 div태그에만 css가 적용되어있다. 후손 선택자는 이름 그대로 후손을 선택하며 요소A 요소B 의 형태로 사용하며요소A의 후손으로 범위를 한정한다.아래는 body 태그의 모든 후손을 선택한다. 크롬 개발자 도구로 확인을 하면body 태그의..
