かけがえのない愛

5.1 엘리먼트를 나타내고 감추기

5.1.1 접을 수 있는 리스트 구현하기

• show(), hide()

5.1.2 엘리먼트의 표시 상태 바꾸기

• toggle()

5.2 엘리먼트 표시상태를 애니메이션으로 표현하기

5.2.1 엘리먼트를 점진적으로 보이고 감추기

• hide(speed, callback) - 매개변수 없으면 display 스타일 프로퍼티 값이 즉시 none으로 설정, speed 는 1/1000초 설정, 또는 slow, normal, fast
• show(speed, callback) - jQuery를 이용해 감췄다면 이전 값으로 설정한다. 그렇지 않으면 block으로 설정
• toggle(speed, callback) - 감춰진 경우는 show()를 수행, 드러난 경우는 hide()를 수행

5.2.2 엘리먼트 페이드인 / 페이드 아웃/ 페이드 투하기

• fadeOut(speed, callback) - 불투명도를 0%로 줄여가면서 화면에서 제거
• fadeIn(speed, callback)
• fadeTo(speed, opacity, callback) - 확장엘리먼트의 불투명도를 현재의 설정 값에서 opacity 매개변수 값으로 설정 한다. (0.0~1.0) 화면에서 제거하지는 않는다.

5.2.3 슬라이드 효과를 사용하여 엘리먼트를 나타내고 감추기

• slideDown(speed, callback) - 감춰진 모든 일치하는 엘리먼트가 높이 값이 증가하면서 나타난다. (펼쳐지는...)
• slideUp(speed, callback) - 드러나 있는 모든 일치하는 엘리먼트가 점차적으로 높이 값이 감소하면서 화면에서 제거된다.
• slideToggle(speed, callback) - 감춰진 확장엘리먼트는 slideDown()을, 드러나 있는 확장 엘리먼트에는 slideUp()을 수행한다.

5.2.4 애니메이션 멈추기

• stop() - 확장 집합에 있는 엘리먼트에 현재 진행하는 에니메이션을 중지한다.

5.3 사용자 정의 애니메이션 생성하기

• 자신만의 애니메이션을 만들 수 있다.
• animate(properties, duration, easing, callback)
• animate(properties, options)

5.3.1 사용자 정의 스케일 애니메이션

• $('.animateMe').each(function(){

    $(this).animate(

        {

            widh: $(this).width() * 2,

            height: $(this).height() * 2

        },

        2000

   );

});

5.3.2 사용자 정의 드롭 애니메이션

• $('.animateMe').each(function(){

               $(this)

                  .css('position', 'relative')

                  .animate(

                       {

                            opacity: 0,

                            top: $(window).height() - $(this).height() - $(this).position().top

                        },

                        'slow',

                        function(){ $(this).hide(); });

           }); - 화면에서 떨어지는 효과

 

5.3.3 사용자 정의 퍼프 애니메이션

• 담배 연기 같이 공중에 퍼지는 것처럼 보이게 하려고 한다.
• $('.animateMe').each(function(){

    var position = $(this).position();

    $(this)

        .css({position:'absolute', top:position.top, left:position.left})

        .animate(

              {

                   opacity: 'hide',

                   width: $(this).width() * 5,

                   height: $(this).height() * 5,

                   top: position.top - ($(this).height() * 5 / 2 ),

                   left: position.left - ($(this).width() * 5 / 2)

              },

              'normal');

});

                    

 

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

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

• $('img').each(function(n){ this.alert='아이디가 '+this.id+'인 image['+n+']이다.'; }); - 0 부터 시작하는 index n을 매개변수로 받는다.
• var allAlts = new Array();

$('img').each(function(){ allAlts.push(this.alt); });  - 모든 alt 배열을 얻음

3.1.2 어트리뷰트 값 가져오기

• $("#myImage").attr("custom") - costom 어트리뷰트의 값
• 브라져에 따라 다른 프로퍼티명 때문에 발생하는 귀찮은 문제를 해결해 준다. (ex className 등)

3.1.3 어트리뷰트 값 설정하기

• $('*').attr('title', function(index) {

return '나는 ' + index + '번 엘리먼트이고 내 이름은 ' + (this.id ? this.id : 'unset') + '이다';

});

• $('input').attr(

{ value: '', title: '값을 입력하세요.' }

); - value title등 설정

3.1.4 어트리뷰트 제거하기

• removeAttr(name) - 자바스크립트 DOM 엘리먼트에서 대응하는 프로퍼티가 제거되는 것이 아니 값이 변경될 뿐이다.

3.1.5 어트리뷰트 가지고 놀기

• $("form").submit(function() {

$(":submit", this).attr("disabled", "disabled");

}); - form의 submit 버튼을 비 활성화

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

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

• addClass
• removeClass
• toggleClass
• $('tr').toggleClass('striped'); - 번갈아 가며 클래스를 적용

3.2.2 스타일 얻고 설정하기

• $("div.expandable").css("width", function() {

return $(this).width() + 20 + "px";

});

• $("div.myElements").width(500); - $("div.myElements").css("width", "500px")와 같은 코드
• $("div.myElements").height(500);
• var val = $("div.myElements").width(); - 가져오기

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

• $("p:first").hasClass("surpriseMe") - 클래스를 갖는지 true false 반환
• $("p:first").is(".surpriseMe") - 위와 같은 코드
• $("p:first").attr("class").split(" "); - 앨리먼트에 정의된 클래스 목록을 공백으로 구분된 문자열대신 배열로 얻음(undefined 발생 할 수 있다. 아래로 해결 )
• $.fn.getClassNames = function() {

if(name == this.attr("className")) {

return name.split(" ");

}

else {

return [];

}

};

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

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

• html(text)
• var text = $('#theList').text();

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

• $('p').append('<b>테스트<b>');
• $("p.appendToMe").append($("a.appendMe"))
• $('#flower').appendTo('#targets p:first') - 확장집합의 모든 엘리먼트를 target의 끝으로 이동
• prepend(), prependTo() - append(), appendTo()와 유사하게 동작하지만 대상 엘리먼트 앞에 삽입
• before(), insertBefore() - 엘리먼트를 대상의 첫번째 자식으로 삽입하는 대신 대상의 바로앞 형제로 삽입
• after(), insertAfter() - 엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로뒤 형제로 삽입

3.3.3 엘리먼트 감싸기

• $("a.surprise").wrap("<div class='hello'></div>") - surprise 클래스가 있는 링크를 hello클래스를 지닌 div로 감싼다.
• $("a.surprise").wrap($("div:first")[0]); - 첫번째 <div>엘리먼트를 복사하여 감싼다.
• .wrapAll() - 일치하는 모든 엘리먼트를 감싼다.
• .wrapInner() - 일치하는 엘리먼트의 텍스트 노드를 포함한 콘텐츠를 감싼다.

3.3.4 엘리먼트 제거하기

• $("div.elementToReplace").after("<p>div를 대체한다.</p>").remove(); - 뒤에 추가하고(after 원본 반환) 앞을 제거함 (대체되는 것 같음)
• $.fn.replaceWith = function(html) {

return this.after(html).remove();

}; - 이렇게 만들어서 확장 사용 가능

• $("div.elementToReplace").replaceWith("<p> div를 대체한다.</p>"); - 위에서 확장해 사용

3.3.5 엘리먼트 복사하기

• $('img').clone().appendTo('fieldset.photo'); - 모든 이미지 엘리먼트를 복사해서 photo클래스 fieldset에 붙인다.
• $('ul').clone().insertBefore('#here').end().hide(); - 복사본 삽입후 원본 감추기

3.4 폼 엘리먼트 값 다루기

• .val() - 첫번째 엘리먼트의 value 프로퍼티 반환
• $('[name=radioGroup]:checked]').val(); - 첫 엘리먼트만 처리하므로 체크박스 그룹 사용 어려움. serialize()커맨드나 공식 Form 플러그인을 사용하는 것이 좋다.
• .val(value) - 값을 설정
• $('input, select').val(['하나', '둘', '셋']); - input과 select 엘리먼트를 찾아 발견된 체크박스, 라디오버튼, 옵션을 선택 (알아서 선택하니 편리)