본문 바로가기

jQuery/DOM&jQuery29

간단한 jQuery 갤러리 간단한 jQuery 갤러리간단한 클릭이벤트 레이아웃 갤러리.클릭시 하단 박스와 그아래 텍스트를 변경한다. 대략적인 레이아웃 박스구조. html소스 총 5명의 사진을 올릴것이다. 이미지는 썸네일이미지5장, 보여줄이미지 5장. 유사반복되는 중간에 생략했다. 1234567891011121314151617181920212223242526아이돌 갤러리 아이유 소유 아이유 Colored by Color Scriptercs 클릭시 하이퍼링크의 주소와 제목이 하단이미지박스의 주소와 텍스트으로 된다 1cs이 주소와 제목이 아래에 적용12 텍스트cs jQuery없이 스크립트로만 구현하면 길어진다.12345678910111213141516171819function showPic(whichpic) { var source = .. 2015. 10. 30.
jQuery 1.4 변경점 jQuery 1.4 변경점 지난 1월달에 jquery 1.4가 나왔다. 변화된점을 요약. 참고한 출처는 여기다http://firejune.com/1527.자세히 설명되있으므로 참조 collection방식 프로그램밍을 해본 이들이라면 c언어를 접해봤을 것이고 클래스(class)에 대해 알것이다.집합된 객체(object)에 변수 함수등을 설정해준다. 이번에 나온 jquery 1.4도 이와 비슷하게 지원된다. 먼저 종전에 사용한 방법을 보자 아래의 html에서 아이디(id), css, 실행함수를 나오도록 해보자 jquery 1.4 그리고 종전의 방식으로 여기에 추가해보자 $('a').attr('id', 'new') .css({'color':'#fcc','font-size':'28px' }) .click(fun.. 2010. 3. 17.
입력 검색 폼(form) 꾸미기 간단한 검색 폼 간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다. 입력하세요 css에서 label을 블럭 엘리먼트로 변경해준다. label{ display:block;} 그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다. 입력하세요 한라인 줄이기 위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다. var $search = $('#search').addClass('overlabel'); html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다. .ov.. 2010. 2. 22.
jQuery 기능적 폼(form) 만들기 jQuery 기능적 폼(form) 만들기 jQuery 이용하여 좀더 기능적으로 form을 만들어보자.기본적인 폼의코드는 다음과 같다 개인 정보 입력 이름 (필수) 연락방법을 선택하세요 (적어도 하나) E-Mail (선택) Phone (선택) Fax (선택) 이름을입력할 input엘리먼트는 클래스명을required 그리고 나머지들은 클래스명을 conditional로 주었다.이코드를 다음과 같이 수정할것이다. legend엘리먼트를 다른 엘리먼트로 대체하여 좀더 편리하게 css로 꾸미게 한다 반드시 입력할 이름란에 '*'를 또 다른 입력란에는 '**'를 필수, 선택 대신으로 대체시킨다 필요한 선택입력 항목 박스를 클릭시 텍스트 입력 박스가 보이도록 또 감추도록한다. 엘리먼트 수정 legend엘리먼트는 css로.. 2010. 2. 18.
jQuery DOM empty clone 메소드 복사하기 jQuery DOM clone 메소드 .clone()은 엘리먼트를 복사하는 메소드이다. 클론은 이벤트 또한 복제하는데 하나하나 살펴보자 아메바...... 위의 엘리먼트를 복제해보자 $('p').clone(); 자 위의것 대로 하면 될것같지만 복사해서 놓을 위치를 정해줘야 된다. 그래서 .insertAfter()등의 메소드를 사용한다. $('p').clone().insertAfter('p'); 위와같이하면아래와같이 복사되어 나올것이다 아메바......아메바...... 이벤트까지 복제 이벤트 까지 복제하는예제를 보자.변수에 true를 넣으면 이벤트까지복제 반대로 false를 넣어주면 엘리먼트만 복제된다. 누르면 버튼이 복제되어 생겨남 위의 버튼을 누르면 복제되도록하려면 $('button').click(fun.. 2009. 11. 28.
jQuery DOM empty remove 메소드 제거하기 jQuery DOM empty remove 메소드 제거하기위한 메소드로는 .empty()와 .remove()가 있다..empty()의경우는 검색된 요소안의 모든 엘리먼트를 제거하고 .remove()의 경우는 검색된 엘리먼트와 자식들을 제거한다.차례대로 보자 empty 메소드 empty메소드는 비운다는 말 그대로 모든걸 지운다.해당엘리먼트의 자식과 텍스트모두 제거한다 모두 사라 집니다. 위의 코드에 아래를 삽입하면 아무것도 나오지 않는다. $('p').empty(); //p란 엘리먼트에 접근후 //p엘리먼트의 자식과 텍스트 제거 remove 메소드 이메소드는 접근하여 검색된 엘리먼트와 자식,텍스트를 제거한다. 사라짐 안사라짐 위에서 selected란 클래스의 엘리먼트를 사라지게 할것이다. $('p').re.. 2009. 11. 25.
jQuery DOM wrap 메소드 대치하기 text replaceAll, replaceWith 메소드 대치란 원래있던 값대신에 다른 값을 생성하여 넣어주는 것을 말한다. 이런것이가능한 메소드는 .text(), .replaceAll()그리고 .replaceWith()등이 있다. text 메소드 .text()메소드는 텍스트를 대치해준다.안녕하세요?를 반갑습니다로 대치해보겠다. 안녕하세요? 이걸 대치하려면 다음과 같다. $('p').text('반갑습니다'); 결과는 안녕하세요? 대신에 반갑습니다가 나올것이다 replaceWith 메소드 이메소드는 .text()메소드 처럼 대치하느데 그 대상이 엘리먼트인다.예제를보자문자대신에 그림을 대치시켜보자. 네이버 간판으로 바뀜 $('p').replaceWith(''); 네이버 간판으로 바뀜 대신에 아래그림이 나올.. 2009. 11. 24.
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.