일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- JVM
- json
- html
- web.xml
- POI
- TO_DATE
- 태그
- Database
- was
- jQuery
- 정의
- eGov
- eGovFramework
- 오류
- javascript
- sql
- Ajax
- Java
- input
- 개념
- Oracle
- select
- controller
- spring
- mybatis
- array
- 함수
- 과정평가형
- CSS
- 배열
- Today
- Total
목록JavaScript (35)
web developer
.load() 웹 페이지의 내용을 동적으로 교체하기 위해서 Ajax로 서버에서 데이터 json 형식으로 받아 HTML 요소를 생성하여 페이지내의 원하는 위치의 내용을 바꾸는 작업을 많이 합니다. jQuery의 .load() 메소드는 주어진 URL로부터 HTML 데이터를 받아서 jQuery 셀렉터를 통해 선택된 해당 코드에 넣어줌으로써 동적으로 페이지의 내용을 교체하는 작업을 간단하게 처리할 수 있도록 해줍니다. // body 출처: https://offbyone.tistory.com/235 [쉬고 싶은 개발자]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cfVLxE/btrtt5GzN9Q/L7kZNxo0JexrdkP1msELwk/img.png)
ajax data 값을 controller로 넘기는 과정 1-1. Ajax 사용한 예시 (javascript단에서 데이터를 가져와서 controller로 넘기기 위해) $.ajax({ url : "test.action", type : "post", data : { name : "뜨루", age : "28", gender : "여자" }, success : function(data) { }, error : function() { alert("error"); } }); 2-1. Ajax에서 Controller로 값(parameter) 넘길 때 : String으로 받는 경우 @RequestMapping(value = "/test.action", method = { RequestMethod.POST }) pub..
.toggleClass() : 정의 .toggleClass()로 선택한 요소에 클래스(Class) 값을 주거나 없앨 수 있습니다. .toggleClass() : 문법 .toggleClass( 'className' ) $( 'p' ).toggleClass( 'VVS' ); 'p' 요소에 'VVS' 클래스가 없으면 추가하고, 있으면 제거합니다. .toggleClass() : 예시 See the Pen Untitled by 안중현 (@pogba10) on CodePen. 참고 - .click() : 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. [jquery] .click / 선택한 요소를 클릭했을 때 특정 작업을 수행하기 .click() : 정의 - .click()은 선택한 요소를..
.click() : 정의 - .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. .click() : 문법 .click( 'handler' ) - 기본 형태는 위와 같습니다. $( 'button' ).click( function() { // function } ); - button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. .click() : 예시 See the Pen Untitled by 안중현 (@pogba10) on CodePen. $(function() { $('button').click( function() { $('h2').toggleClass('basic'); }); }); - $('h2').toggleClass('basic') :..
.attr() : 정의 - HTML 요소(element)의 속성(attribute)의 값(value)을 가져오거나 속성을 추가할 때는 .attr()을 사용합니다. .attr() : 문법 .attr('attributeName', 'value') - 선택한 요소에 속성을 추가합니다. $( 'div' ).attr( 'class' ); - div 요소의 class 속성의 값을 가져옵니다. $( 'h1' ).attr( 'title', 'Hello' ); - h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 합니다. .attr() : 예시 See the Pen .attr() by 안중현 (@pogba10) on CodePen. var test = $( 'h1' ).attr( 'class' ); - h..
.find() : 정의 .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. .find() : 문법 .find( 'selector' ) 기본 형태는 위와 같습니다. $( 'h1' ).find( 'span' ) h1 요소의 하위 요소 중 span 요소를 선택하는 것을 의미합니다. See the Pen Untitled by 안중현 (@pogba10) on CodePen. 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. $( 'p.b span.ip' ).css( 'font-size', '2em'); 하위 선택자를 이용해서 같은 결과를 만들 수 있습니다. 출처 : https://www.codingfactor..
.children()이란? .children()은 어떤 요소의 자식 요소를 선택합니다. .children() : 문법 기본 형태는 아래와 같습니다. .children( [selector] ) (1) $().children() : 자식 요소 선택 See the Pen Untitled by 안중현 (@pogba10) on CodePen. $('ul').children('li'); // return 'li' 배열(li 두개) ul 요소의 자식 요소인 li를 선택합니다. (2) $().children().css() : css 변경 ul 요소의 자식 요소 중 ip를 클래스 값으로 가지는 요소의 색을 빨간색으로 만듭니다. p 요소도 ip를 클래스 값으로 갖고 있지만, ul 요소의 자식 요소가 아니어서 선택되지 않습..
$.each() 메소드 : 2 type jquery를 사용해 배열을 관리하고자 할 때 each() 메소드를 사용할 수 있습니다. each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다. // jQuery 유틸리티 메서드 $.each(object, function(index, item){ }); // jQuery 일반 메서드 $(selector).each(function(index, item){ }) each() 메소드는 위와 같은 두 가지가 있습니다. $.each() 메소드 : 설명 $.each() 메소드는 객체와(Object) 배열(Array) 모두에서 사용할 수 있는 일반적인 반복 함수입니다. 다시 말해, 배열과 length ..
.unwrap() unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예제 제목 $('h2').unwrap(); h2 요소의 바로 상위의 태그(div)를 제거하는 경우 $('div').contents().unwrap(); .contents()를 이용하여 자식 요소를 그대로 둔 채 태그(div)를 제거한 경우 출처 : https://www.codingfactory.net/10216
.wrap() .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예제 $( 'p' ).wrap( '' ); p 요소를 div로 wrapping한 경우 $( 'p' ).wrap( '' ); class나 id 값을 추가한 경우 $( 'p' ).wrap( '' ); 여러 태그로 wrapping한 경우 출처 : https://www.codingfactory.net/10214
.contents() .contents() 함수는 일치하는 요소 내부의 텍스트 노드를 포함한 자식요소들을 가져올 수 있는 함수입니다. .contents() 함수는 jQuery 객체는 DOM 요소 집합들을 표현할 수 있고, DOM 트리에서 선택된 요소들의 자식 요소들을 찾아 내는 동시에 새로운 jQuery 객체를 생성할 수도 있습니다. .contents() 함수와 .children() 함수는 유사한 함수입니다. 단, 반환되는 결과에 텍스트 노드(text node)의 존재여부의 차이점이 있습니다. 또한, contents 함수는 아이프레임의 내용도 가져올 수 있습니다. 단 조건이 있는데 아이프레임을 품은 페이지와 아이프레임의 페이지가 같은 도메인에 위치하고 있어야 합니다. 출처: https://findfun...
제이쿼리를 통해 클래스를 추가하는 방법과 직접 스타일을 부여하는 방법과의 차이점 사실 제이쿼리(jQuery)를 사용하여 클래스명을 추가하거나 제거하는 방법이외에 직접 스타일을 부여할 수 있습니다. 예를들어, 아래와 같은 attr() 또는 css() 메소드를 사용하는 방법이 존재합니다. 하지만 이런 경우에 inline 형태로 웹페이지에 스타일이 부여되기 때문에 아래와 같은 제약이 생기게 됩니다. * inline 스타일 방식은 태그에 직접 CSS코드를 기술하는 방식이다. (태그에 style속성을 직접 부여) ※ 이런 단점들 때문에 보통 클래스에 스타일을 정해두고 이 클래스를 추가하거나 제거하는 방법이 사용됩니다. $("Selector").removeClass() .removeClass() 메서드는 선택한 요..