본문 바로가기

javascript37

jQuery DOM wrap 메소드 요소를 감싸기 jQuery wrap,wrapAll, wrapInner 메소드 앞서 포스팅 한 것은 한엘리먼트를 두고 앞이나 뒤에 생성하는 것이였다. 이번엔 아래그림과같이 한 엘리먼트를 놔두고 감싸는 엘리먼트를 만들어보자. wrap 메소드 앞서 여러 생성 메소드를 학습했다면 쉽다.다음과 같다. $('p').warp(' '); //$('내부에 엘리먼트').warp('외부엘리먼트'); $('p').warp(' '); //위와같이 아이디 설정도 가능하다. 위와 같이 해준다면 표현은 다음과 같이 나올것이다 어쩌고 저쩌고........... 주의 할 점은 두가지이다. 인라인 엘리먼트로 블록엘리먼트를 감싸던지(ex)p엘리먼트를 img로)같은 엘리먼트를같은 엘리먼트로 감싼다던지(ex)p를p로 감싸기)이런 실수를 범하지 않는다. 감싸.. 2009. 11. 22.
jQuery DOM after, befoer 메소드 요소뒤, 앞에 생성하기 jQuery after, befoer 메소드 .after()은 정해진 엘리먼트 뒤에 생성되고 before()은 앞에 생성된다.예를보자 먼저 html은 다음과 같다. 여기앞에 그리고 뒤에 어쩌고 저저고 생성됨 .after() $('p').after('after로 뒤에 생성 '); 결과는 다음과 같다. 여기앞에 그리고 뒤에 어쩌고 저저고 생성됨 after로 뒤에 생성 된 것 .before() $('p').before('bfore로 앞에 생성 '); 결과는 다음과 같다. before로 앞에 생성 된 것 여기앞에 그리고 뒤에 어쩌고 저저고 생성됨 insertAfter(), insertBefore() 이 두메소드 역시 Not only A but also B = B as well as A 와 같다고 보면된다. A... 2009. 11. 12.
jQuery DOM트리 prepend, prependTo 메소드 jQuery prepend() 메소드 append()메소드와 사용법은 같다. 그럼 차이점은 무언인가? pre-앞이란 뜻이있듯이 preapend는 앞에 생성된다.앞서 포스팅 append() 메소드를 보면 뒤에 생성된것을 볼 수 있다.preapend는 앞에 생성된다. 사용방법은 똑같다. $(document).ready(function() { $('p').preppend('노말'); $('p').prepend('굵게'); $('가늘게').prependTo('p'); }); 결과는 아래와 같다 가늘게굵게노말본문 적용된 페이지는 여기로http://sianasiatiger.cafe24.com/study/D_append.html 2009. 11. 10.
jQuery DOM트리 append, appendTo 메소드 jQuery append() 메소드 먼저 DOM이뭔지 다시 잠깐보자 "객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다.DOM은 HTML 문서의 요소(엘레멘트; element)를 제어하기 위해 웹 브라우저에서 처음 지원됐다. DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단이었다. 브라우저 사이에 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었다." jQuery 또한 이런 접근을 통해 모델을 구현한다.엘리먼트안에 새 엘리먼트를 만들거나.엘리먼트를 감싸거나, 엘리먼트 앞뒤에 추가하는 메소드를 지원한다. 그중 append()메소드가 엘리먼트안에 자식엘리먼트를 추가하는 .. 2009. 11. 10.
jQuery animate() 애니메이션 메소드 jQuery animate() 애니메이션 메소드 앞서본 보여준 애니메이션메소드가 있었다. jQuery hide, show ,fade 애니메이션 메소드 animate()는 간단하기도 하고 때로는 사용자정의에 따라 다양하게 이용될수 있다.사용법부터 보자. animate()는 4개의 인자를 가진다. .css()와 비슷한 속성값 속도, 역시 1/1000초 단위 외부 플러그인(pulg-in)효과주기 콜백함수 이 네가지에서 속성값은 필수 이고 나머지는 지정안해도 무방하다. 예제를 보자. $('#box').animate({ 'width':'500px',opacity:0.4}); 위의 예제는 #box라는 아이디에접근하고 가로길이를 500px 그리고 투명도를 0.4로 하게한다.이번엔 여기에 속도를 줘 보자 $('#box.. 2009. 10. 29.
jQuery hide, show ,fade 애니메이션 메소드 jQuery hide, show ,fadeIn, fadeOut 메소드 엘리먼트를 간단히 숨기고,보여주기는 css로도 충분히 가능하다.또 jQuery에서 css()메소드로도 마찬가지다.이에대한 간단한 예부터 보자 어쩌고 저쩌고 위 엘리먼트를 단순히 보이게 안보이게 할려면 다음과 같이 하면 된다. p{display:none;} /*안보임*/ p{display:block;} /*블록 스타일로 보임*/ jQuery에서 css메소드를 이용한것을 보자 #('p').css('display','block'); 마지막으로 하나더 있으니 css()메소드가 아닌 hide(), show()를 이용하는것이다. 각 명칭대로 보여주기, 감추기 기능이다.예제를 보자 $('p').show();//보여줌 $('p').hide();//감.. 2009. 10. 25.
jQuery를 이용한 CSS 효과 jQuery CSS 메소드 css를 jquery에서 별도로 지정하여 효과를 줄수있다. 이때 장점은 브라우저를 넘나들어 모두 가능하다는점이다.문제시 되는 IE6에서도 유사클래스등 지원되지않는것을 jQuery로 해결할 수 있다.복습겸 먼저 css사용법을 다시보자 CSS 지정 css는 다음과 같이 사용 한다. 선택자{ 프로퍼티: 값;} 예제를 보자 #example{backgound: #fcc;} /*선택자는 아이디인 #example 그리고 프로처티는 배경인backgound 마지막으로 그배경색은 #fcc로 한것*/ 이 같은 것을 브라우저를 넘나들어 사용할 수 있도록 jQuery를 이용한것을 보자 jQuery css()메소드 jQuery에서 사용해보자 방법은 다음과 같다. .css('프로퍼티' ,'값') 만약 여.. 2009. 10. 24.
jQuery 이벤트 전파 jQuery 이벤트 전파, 이벤트 객체 명확화 버블링같은 문제점을 해결하기위해 필요한것은 이벤트가일어나는 엘리먼트 그리고 이벤트 핸들러를 명확히 할 필요가 있다. 어디서 이벤트가 시작하고 끝나는지는 정해주는것이다.먼저 폰트가 커지는 클릭이벤트예시를보자 하나 둘 셋 하나 둘 셋 li엘리먼트를 클릭시 이벤트를 일어나게할것이다.생성되는 클래스의 스타일은 폰트가 크게되도록해줬다. .boxing{font-size:24px;} 클릭시 클래스를 생성해주는 이벤트는 다음과 같다. $(document).ready(function(){ $('ul li').click.function() { /* li엘리먼트에접근 click메소드 즉 마우스를 클릭했을떄 아래 함수실행*/ $('ul li').addClass('boxing');.. 2009. 10. 22.
jQuery 이벤트 버블링 부작용 jQuery 이벤트 부작용페이지의 이벤트가 발생하면 DOm전체계층에 요소들이 이벤트를 처리 할 수 있을때가있다. 이벤트가 있는 html이다음과 같다고 보자. 이벤트 캡처링(capturing)여러 엘리먼트 가있을때 이에 한번클릭에 반응하는것을 이벤트 캡처링이라고 한다.아래그림처럼 최상위 엘리먼트에서 그하위엘리먼트로 이벤트가 주어진다. 이벤트 버블링(bubbling)반대로 내부에 엘리먼트부터 이벤트가 일어나는것이 이벤트 버블링이라고 한다. 하위 엘리먼트가 일어나고 그 뒤에 부모 엘리먼트로 이벤트가 일어난다. 위와같은 이벤트 발생순서 (이벤트 전파라고 한다)는 브라우저개발에서 다르게 구현되었다. 후에는 DOM표준에 따르면서 위두가지 모델이모두 사용하게되었고 이벤트 핸들러는 두과정모두에 등록될 수 있다. (이이.. 2009. 10. 21.
jQuery 합성이벤트 toggle() hover() jQuery 합성이벤트 toggle() hover() 보통 이벤트는 하나의 사용자 행위에 의해 발생한다.그리고 하나의 행동에 대해 하나의 응답을 내놓는다. 합성이벤트는 하나이상의 사용자 행위에 별개의 응답을 말하는 이벤트이다. 이에 대표적인 메소드가 toggle() ,hover()이다. toggle() toggle()은 클릭에따른 메소드이다. 한번클릭할때 그리고 다시클릭할때 이벤트를 보여준다.인자로 두개의 함수를 가진다. $().toggle(function(A) {} , function(B) {}); 한번클릭하면function(A)가 발생하고 한번더클릭하면 function(B)가발생한다.적용된예제를보자 원클릭 커짐 한번더 클릭 원래대로 .boxing{ font-size:24px; font-weight:b.. 2009. 10. 20.