3장 jQuery로 페이지에 생명 불어넣기

DHTML : Dynamic HTML 동적 HTML이란 뜻이며 그냥 컨텐츠만 출력해주는 페이지가 아닌, 유저로부터 정보를 받아와서 정보를 가지고 양방향 상호작용을 하는 페이지를 의미한다.

HTML, CSS, javascript 3가지 언어로 구성한다고 보면 되는데

3장에서는 jQuery를 사용해 동적 웹페이지를 구성하는 방법을 본격적으로 알아본다.

3.1 엘리먼트 프로퍼티와 어트리뷰트 조작하기

  <img id="myImage" src="image.gif" alt="이미지" class="someClass" title="이미지다." />

태그명 : img 마크업(어트리뷰트) : id, src, alt, class, title 어트리뷰트에 상응하는 프로퍼티를 “어트리뷰트 프로퍼티”라 부르기로 한다.

어트리뷰트 프로퍼티와 어트리뷰트는 동기화 된다고 생각하면 된다. 어트리뷰트 프로퍼티명은 대부분 어트리뷰트 명과 일치한다. 다만 class 명만 className이라는 어트리뷰트 프로퍼티명을 사용한다고만 주의할 것.

3.1.1 엘리먼트 프로퍼티 조작하기

each 커맨드

엘리먼트를 읽고 수정하는 커맨드

  $('img').each(function(n){
    this.alt='아이디가 ' + this.id + '인 image['+ n + '] 이다.';
  })

위와 같이 each를 사용하면 해당 모든 엘리먼트 프로퍼티에 쉽게 값을 설정할 수 있다.

3.1.2 어트리뷰트 값 가져오기

attr 커맨드

읽고 쓰기에 모두 사용하는 커맨드

  <img id="myImage" src="image.gif" alt="이미지" class="someClass" title="이미지다." custom="값" />

끝에 ‘custom=값’ 추가하였음

  $("#myImage").attr("custom");

위와 같이하면 custom 어트리뷰트 값을 가져올 수 있다.

3.1.3 어트리뷰트 값 설정하기

  attr(name, value)

  $('*').attr('title',function(index){
    return '나는 ' + index + '번 엘리먼트이고 내 이름은 ' + (this.id ? this.id : 'unset') + '이다.';
  })

각 엘리먼트의 title 값을 해당 함수의 반환값으로 지정하겠다는 것임. 매번 엘리먼트를 가져올 때마다. 함수를 호출한다.
두번째 방법 여러 어트리뷰트의 이름과 값을 명시한다.

  $('input').attr(
    { value : '', title: '값을 입력하세요.'}
  );

3.1.4 어트리뷰트 제거하기

removeAttr(name) 을 사용해서 프로퍼티 값을 제거할 수는 있으나 어트리뷰트가 제거되는 것은 아니다.

3.1.5 어트리뷰트 가지고 놀기

  $("a[href^=http://]").attr("target","_blank");

http:// 로 시작하는 링크에 target 어트리뷰트를 _blank로 설정한다.

3.2 엘리먼트 스타일 변경하기

3.2.1 클래스 추가하고 제거하기

class = “someClass anotherClass yetAnotherClass” 라고 한다면 클래스의 종류가 3가지인 것이지만 className 안에는 배열 형태로 3가지가 들어가는 것이 아니라 문자열 전체가 들어가게 된다는 것이다. 그러므로 클래스를 추가하고 제거할 때엔 커맨드를 사용하여 조작한다.

addClass(name), removeClass(name)

클래스 name을 추가/제거 한다. toggleClass(name) 을 사용하면… class에 name 이라는 이름이 있다면 제거하고 없다면 추가하는 메서드이다.

3.2.2 스타일 얻고 설정하기

css()메서드 사용하기

  $("div.expandable").css("width",function(){
    return $(this).width() + 20 + "px";
  });

width 값을 변경하고 싶을 때 위와 같이 사용한다.

width(), height()는 css(“width”,”500px”) css(“height”,”500px”) 와 동일한 것이다.

style.width, style.height는 style 어트리뷰트를 통해 설정되었을 때만 값을 가져올 수 있다.

  <body onresize="report()">
  function report() {
    $('#display').html(
      $('#testSubject').width()+'x'+$('#testSubject').height()
    );

위와 같이 코딩하면 글의 크기가 바뀔때마다 report() 함수를 호출하는데 report 함수는 display라는 아이디가 있는 곳에 글의 크기를 출력해주게 작성하였다.

3.2.3 스타일과 관련된 유용한 커맨드

hasClass() 메서드

$("p:first").hasClass("surpriseMe")
surpriseMe 라는 클래스가 있으면 true를 반환한다. getClassName이라는 메서드를 사용할 수 있다.

3.3 엘리먼트 콘텐츠 설정하기

DOM API를 사용하여 수정 innerHTML을 사용하여 수정

3.3.1 HTML과 텍스트 콘텐츠 대체하기

html() 메서드

html(text) 를 작성하여 html 코드의 콘텐츠를 수정할 수 있다.

text() 메서드

text() 메서드는 html의 text를 결합한 문자열을 반환한다. text(content)에서 ‘<>’를 포함한다면 html 엔티티로 대체된다고 한다.

3.3.2 엘리먼트 복사하기와 이동하기

append() 커맨드

마지막에 콘텐츠 추가 가능

  $('p').append('<b>텍스트</b>')

이렇게 추가하면 모든 p 엘리먼트 뒤에

  <b>텍스트</b>

가 붙게 된다.

엘리먼트 하나만 다른 위치로 이동시키거나 복사하려면 appendTo()를 사용 appendTo의 경우 엘리먼트가 여러개일 경우 복사가 되고 하나일 경우에는 이동 된다.

prepend(), prependTo() 역시 append, appendTo 와 비슷하나 앞에 이동,복사 시키는 커맨드이다.
before(), insertBefore()
after(), insertAfter() 역시 비슷한경우다.
참고1
```
  <input type="radio" name="command" value="prependTo"/>
```
위와 같은 input 엘리먼트가 있고 해당 라디오버튼 중 선택된 애를 가지고 오고 싶다고하면 $('input[name=command]:checked') 를 사용하면 name=command인 모든 라디오 버튼 중 체크 된 애를 가지고 오는 방법이다. 뒤에 .val()을 입력하여 value 값을 가지고 왔다.
참고2
```
var command = $('input[name=command]:checked').val();
$('#car')[command]('#targets p:first')
```
를 보면
commad 값으로 체크된 라디오 버튼의 값을 가져온 후 걔를 command에 담았다.
그 후 셀렉터로 ‘#car’라는 id를 가진 자동차 이미지를 선택한 후 command의 문자열을 []에 넣어 해당 메서드를 불러왔다.
그러면
$('#flower')[insertBefore]('#targets p') 위와 같이 command 대신에 insertBefore를 그대로 입력시켜 주어 insertBefore를 그대로 실행시키는 건 안될까하여
해봤는데 안된다. 왜그런지 생각해보니
$(‘#flower’)를 통해서 ‘#flower’ 아이디를 가진 엘리먼트를 가져왔다.
보통 메서드를 불러올 때는 . 을 써서 호출해준다.
자바스크립트에선 []를 사용해서도 객체의 메서드를 호출할 수 있는데
이 때, [메서드 명]이라기 보다는 [“메서드 명”] 이런식이다.
큰 따옴표를 써줘야하는 이유는 []이렇게 해서 불러올 때는 보통 중간에 공백이 있는 경우기 때문에 문자열로 불러와야해서 그런 것이다.

3.3.3 엘리먼트 감싸기

특정 클래스를 가진 엘리먼트를 감싸고 싶을 때

wrap() 커맨드를 사용

$(“a.surprise”).wrap(“<div class='hello'> </div>”)

엘리먼트 말고 엘리먼트의 콘텐츠를 감싸고 싶을 때

wrapInner() 커맨드 사용

3.3.4 엘리먼트 제거하기

remove() 를 사용하면 엘리먼트가 제거가 되고
empty()를 사용하면 content가 제거 됨

3.3.5 엘리먼트 복사하기

clone() 커맨드

복사본의 객체를 넘긴다 해야하나.. 예를들어 $('img').clone().appendTo('fieldset.photo');
모든 이미지 엘리먼트의 복사본을 만들어 photo 클래스를 가진 모든 fieldset 엘리먼트에 덧붙인다.

3.4 폼 엘리먼트 값 다루기

form 엘리먼트는 특별한 프로퍼티를 가지기에 얘는 따로 편리한 함수를 제공한다. 그리고 폼 플러그인 이라는 애가 있는데 얘는 더 강력한 기능을 지원해준단다..

val() 메서드

폼의 value 프로퍼티를 반환한다. 다중 선택 가능한 엘리먼트의 경우, 반환값은 선택된 값의 배열이다.

아무 것도 선택되지 않은 체크박스나 라디오버튼의 경우는 undefined를 반환한다.

jQuery-3장 jQuery로 페이지에 생명 불어넣기