jQuery/jQuery HTML7 jQuery - Dimensions(면적,넓이) 오늘은 jQuery Html이 마지막 내용인 Dimensions( 면적, 넓이)에 대해서 알아보겠습니다. jQuery Dimension 의 사용방법 - width() - height() width()와 height()는 넓이와 높이값을 반환합니다. - innerWidth() - innerHeight() innerWidth()와 innerHeight()는 width(),height()와 같이 넓이와 높이를 반환하지만 padding값만을 포함하여 반환합니다. 즉, 넓이와 높이를 100px, 100px 라고 해도 padding 값을 주면 더 넓어지게 되는데 그 넓어지는 값을 반환하게 됩니다.(단, padding만 해당됨) - outerWidth() - outerHeight() outerWidth()와 oute.. 2013. 5. 24. jQuery classes css() 이번장에서는 jQuery css() 구문에 대해서 알아보겠습니다. css() 는 선택된 요소에 대해서 하나 또는 그 이상의 속성값을 줄 수 있습니다. css("propertyname"); css("propertyname","value"); css({"propertyname":"value","propertyname":"value",...}); propertyname 속성값을 의미하고 css 속성에 하나가 아닌 여러개가 들어갈수 있음을 나타냅니다. CSS() 관련예제 머릿글 입니다. 첫번째 구문입니다. 두번째 구문입니다. 세번째 구문입니다. 마지막 구문입니다. 클릭하세요! // 이미지를 보면 알겠지만 빨강,초록,파랑 등 백그라운드의 색상이 버튼을 클릭하면 노란 백그라운드로 바뀌는것을 보여줍니다. 즉 $("p.. 2013. 5. 23. jQuery CSS Classes 이번 장에서는 jQuery CSS Classes에 대해서 알아보겠습니다. JQuery와 CSS 조작을 위한 여러 가지 방법이 있습니다. 우리는 다음과 같은 방법을 살펴 보겠습니다 . addClass() 선택한 요소에 하나 이상의 클래스를 추가합니다. removeClass() 선택한 요소에서 하나 이상의 클래스를 제거합니다. toggleClass() 선택된 요소에서 클래스를 추가/제거가 동시에 가능케 합니다. addClass() 관련예제 첫번째 머리글 두번째 머리글 첫번째 문장입니다. 두번째 문장입니다. 이곳은 important 문장입니다.! Add classes $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass(".. 2013. 5. 23. jQuery - Remove Elements 이번장에서는 jQuery 중에서 remove 즉 지운다는 의미인데 이 함수에 대해서 알아보겠습니다. jQuery remove 함수중엔 remove()와 empty() 있습니다. remove() : 선택한 모든 요소를 지웁니다. empty() : 선택한 자식 요소를 지웁니다. 예제를 보면 이해가 더 빠를겁니다. 간단예제(사용법) $("#div1").remove(); $("#div1").empty(); remove() 관련예제 div 문장입니다. div 첫번째 문장 div 두번째 문장. Remove div // Remove div 버튼을 클릭하면 id div1의 모든 값을 지웁니다. empty() 관련예제 div 문장입니다. div 첫번째 문장 div 두번째 문장. empty div // empty div .. 2013. 5. 22. jQuery Add Elements 이번 장에서는 jQuery add에 대해서 알아보겠습니다. jQuery add 요소에는 여러가지 함수가 있는데 append(), prepend(), after(), before() 에 대해서 알아보겠습니다. append() 함수는 선택한 요소의 끝에 문구를 추가 할 수 있습니다. prepend() 함수는 선택한 요소의 앞에 문구를 추가 할 수 있습니다. after(), before() 의 역할은 선택한 모든 요소의 뒤,앞에 html 또는 javascript 구문등을 추가 할 수 있습니다. append() 와 prepend() 의 간단예제 $("p").append("append 구문을 보여주세요."); $("p").prepend("prepend 구문을 보여주세요."); 관련예제 첫번째 구문입니다. 두 번째.. 2013. 5. 21. jQuery html Set text(), html(), val(), attr() 이번 장에서는 html 구문 form 구문등을 jQuery 를 이용하여 변경하는 방법에 대해서 알아보겠습니다. jQuery text(), html(), val(), attr() 앞 장에서 설명한바와 같이 text, html, var, attr 각각의 속성 값을 제어 할 수 있습니다. 간단예제 $("#btn1").click(function(){ $("#test1").text("안녕하세요!!!"); }); $("#btn2").click(function(){ $("#test2").html("안녕하세요!!!"); }); $("#btn3").click(function(){ $("#test3").val("Park's 블로그"); }); // 버튼 id btn1을 클릭하면 id text1의 값이 "안녕하세요!!!" .. 2013. 5. 20. jQuery HTML Get Content and Attributes text(), html(), val(), attr() 이번 장에서는 jQuery HTML을 어떻게 컨트롤 할 수 있는지에 대해서 알아보겠습니다. jQuery 는 DOM을 조작할 수 있습니다. DOM 은 Document Object Model의 줄임말입니다. Get Content text(), html(), val(), attr() text() - 텍스트의 내용을 설정하거나 반환할 수 있습니다. html() - 선택한 요소의 내용을 설정하거나 반환할 수 있습니다. val() - 폼 필드의 값을 설정하거나 반환할 수 있습니다. attr() - 속성값을 설정하거나 반환할 수 있습니다. text(), html() 사용방법 간단한 예제 $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $(".. 2013. 5. 17. 이전 1 다음
