건덕지머리 건덕지머리

1. readonly $('#id").attr("readonly" true); //설정$('#id").attr("readonly" false); //해제 2. disabled $('#id").attr("disabled" true); //설정$('#id").attr("disabled" false); //해제 출처: http://differentcolor.tistory.com/entry/jQuery-readonly-disabled-사용법 [개인메모장]

출처 : http://hobbiez.tistory.com/321 1) checked 여부 확인$("input:checkbox[id='ID']").is(":checked") == true : false /* by ID */$("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */ 2) checked/unchecked 처리$("input:checkbox[id='ID']").prop("checked", true); /* by ID */$("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */ 3) 특정 라디오버튼 선택 / 모든 라디오버튼 선택해제$("input:r..

http://demos.jquerymobile.com/1.3.0-rc.1/docs/demos/widgets/listviews/ jQuery MobileNavigation Home Listviews API A listview is coded as a simple unordered list (ul) or ordered list (ol) with a data-role="listview"attribute and has a wide range of features.Jump to section Read-only, unorderedA listview is a simple unordered list containing linked list items with a data-role="listview" attribute...

이벤트 종류 - click : 클릭되었을 때 - mouseenter : 마우스 포인터가 위에 있을 때 - mouseleave : 마우스 포인터가 벗어났을 때 - hover : mouseenter와 mouseleave를 한꺼번에 - focus : 포커스를 얻었을 때 - blur : 포커스를 벗어났을 때 이벤트 핸들러 작성 - 이벤트가 발생 했을 때 처리하는 부분 작성 jQueryObject.click(function(){ 처리 내용 }); mouseenter, mouseleave 예제 div! hover 예제 - hover 이벤트는 mouseenter/mouseleave의 두 이벤트를 동시에 설정할 수 있는 숏 컷과 같다. - jQueryObject.hover(mouseenter이벤트핸들러, mousele..

ㅇ .empty()는 셀렉터 안의 내용만 사라진다.ㅇ .remove()는 셀렉터의 속성과 내용 모두 사라진다.

ㅇ 사용 방법은 .append(), .appendTo()와 같다.append()/appendTo() 내용 보기

ㅇ .append()는 셀렉터 하단에 Element를 추가할 수 있다. - jQueryObjectA.append(jQueryObjectB); // jQueryObjectA 하단에 jQueryObjectB를 붙입니다. - 여러의 Elmenet를 붙이려면 jQueryObjectA.appen(jQueryObjectB, jQueryObjectC, jQueryObjectD); 와 같이 입력하면 된다. basket apple banana orange 샘플 보기 ㅇ .appendTo()는 셀렉터를 특정 Element 하단에 추가시킬 수 있다. - jQueryObjectB.appendTo(jQueryObjectA); // jQueryObjectA 하단에 jQueryObjectB를 붙입니다. basket apple ba..

ㅇ 한 Element에 여러개의 class를 적용하는 방법 - 예를 들어 style에 이미 css1, css2, css3라는 class의 style이 정의되어 있다고 가정하자. - 그리고 를 활용해서 css1, css2, css3를 모두 적용하고 싶다면 구분자를 공백으로 하고 여러개의 class명을 적어주면 된다. 내용 ㅇ .attr('class','값') vs .addClass()/removeClass()의 차이점 - .attr()은 class 값을 기존에 적용된 것은 모두 무시하고 새로 적용 대상을 선정하는 것이다. - .addClass(), .removeClass()의 경우는 기존에 적용된 것을 기반으로 추가/삭제를 하는 것이다. DIV1 DIV2 DIV3 DIV4

ㅇ attr()로 할 수 있는 것들은 대략 아래와 같다. - 이미지의 속성(그림 등) 변경 - 요소의 class 속성을 변경하여 모양 제어 - input 요소 등의 disabled 속성을 변경하여 Control 제어 - option 속성의 selected 속성을 변경하여 select 요소 안에서 선택되어 있는 항목 변경하기 - a 요소의 href 속성을 변경하여 링크된 곳 바꿔 쓰기 - a 요소의 target 속성을 변경하여 별도의 원도우 열기 등의 제어 - 스타일시트를 읽어들이는 link 요소의 href 속성을 변경하여 별도의 스타일시트로 전환 예를 들면

간단히 말하면jQueryObject.empty();를 사용하면 된다.그리고 이는jQueryObject.text('');jQueryObject.html('');과도 같은 기능이다.

.text()와 .html()로 내용을 바꾸는 것에 대해서는 같은 역할이나.text()는 htmlentity를 문자로 치환해서 내용 변경을하고, .html()은 그냥 내용 변경을 한다. 예를들면 원래 있던 텍스트 원래 있던 텍스트 원래 있던 텍스트 원래 있던 텍스트 직접 실행해 보면 알겠지만div3에 저장된 내용에서 는 > 로 저장되었다.

jQueryObject.css('프로퍼티명','값'); 예를 들어 아래와 같이 div가 있을 경우에 DIV1 DIV2 DIV3 다음과 같이 css 값을 변경할 수 있다. $(function(){ $('#div1').css('border', '3px dotted red'); $('#div2').css('background','green'); $('#div3').css('opacity', 0.5); }); 그리고 한번에 여러개의 프로퍼티 값을 변경하려면 { } 를 사용하면 된다. .css('프로퍼티명1','값1','프로퍼티명2','값2')는 안된다!! $(function(){ $('#div3').css({ color: 'red', display: 'block', top: 120, left : 100 }); ..

ㅇ show() / Hide() - jQueryObject.show(); jQueryObject.hide(); - 시간을 줄 수도 있다.(단위 밀리세컨드) ex) jQueryObject.show(500); // 0.5초로 표시하는 애니메이션 ㅇ fadeIn() / fadeOut() - jQueryObject.fadeIn(); jQueryObject.fadeOut(); - 애니메이션 속도는 밀리세컨드 단위로 줄 수도 있고, 'fast', 'slow'로 지정할 수 있다. ex) jQueryObject.fadeIn(1000); jQueryObject.fadeOut('slow'); - 애니메이션 종료 시에 Javascript를 추가로 실행할 수도 있다. ㅇ slideDown() / slideUp() - jQue..

HTML 문서가 아래와 같이 있다. 17 셀렉터 객체 정보를 변수에 담을 수 있다. var student = $('#student'); 그리고 여기에 담겨진 객체의 하위 요소에 대해서 추가로 셀렉터를 지정할 때 find()를 사용한다. var student = $('#student'); var age = student.find('.age'); var img = student.find('img'); age.css('background','pink'); img.css('border','3px solid red');

아래의 소스는 Javascript 상식으로 생각해 보면 가 보이지 않는 것처럼 생각되겠지만 생각대로 안된다. 이 DIV는 보이지 않습니다. 샘플 확인 이와 같은 상황을 곰곰히 생각해 보면 HTML과 jQuery의 실행 순서에 의할 수 있을 것 같다. 보다는 $("#DIV_ID").hide(); 가 먼저 실행되기 때문에 셀렉터가 가리키는 곳(id=DIV_ID)의 정보가 생성되어 있지 않아 에러가 발생한다. 이를 위해 jQuery 부분에 $(function(){ }); 를 넣어 주면 페이지가 로딩이 완료된 다음 jQuery가 실행됨을 알 수 있다. 이 DIV는 정말로 보이지 않습니다. 샘플 확인 그리고 이는 우리가 이 DIV는 보이지 않습니다. 샘플 확인

jQuery 다운로드 http://www.jquery.com 에서 다운로드 버튼을 클릭하여 다운 받습니다. jQuery를 작성할 새로운 파일을 만들고 다음과 같이 입력하면 됩니다.

아주 기본 중에 기본인데, 이미 자바스크립트로 개발을 해본 유저라면 셀렉터 라는 말이 생소하다. (물론 나만 그럴 수도 있겠다.) 정말로 간단하게 셀렉터라는 말은 $(....) 를 말한다. 이는 HTML 내의 Element를 객체화 하는 것이다. (내가 이런 말을 쓸 줄이야... 나름 유식해 진 것 같다.) jQuery와 친해지려면 일단 셀렉터가 기본이니 눈에 익도록 해 보자! 그리고 id값을 가진 Element를 객체화 하려면, "#"을 사용하면 된다. Layer내 내용 $( ) = 셀렉터(selector) ID 셀렉터 : #idValue --> 하나만 사용되는 셀렉터이고, 여러개에 동시에는 적용 안되는 단점이 있음 --> ex) $('#ID') 타입 셀렉터 : element --> 특정 HTML 태그..

여기에 Syntax Highlight 적용을 해 보겠습니다. $('#DIV_ID').show(); DIV Content