일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 파일 입출력
- 자바
- GUI
- 다형성
- spring
- Method
- JavaScript
- jsp
- kotlin #return #jump
- 설치
- Event
- 윈도우 #단축키
- springframework
- css
- 데이터베이스
- html
- function
- 연산자
- list
- 코틀린#클래스#상속
- Java
- array
- property
- 상속
- File 클래스
- String
- jQuery
- 오라클
- javaservlet
- 연락처 프로그램
- Today
- Total
목록2017/04 (43)
Binary World
* 대부분의 jQuery 함수들은 매개변수의 개수에 따라서 getter와 setter로 사용 가능 - html(): HTML 요소 내부의 html 코드를 리턴 - html('문자열'): HTML 요소 내부에 html 코드를 씀(setter) - text(): HTML 요소 내부의 텍스트(문자열)을 리턴 - text('문자열'): HTML 요소 내부에 텍스트(문자열)을 씀 - attr('attr 이름'): 속성(attribute)의 값을 리턴 - attr('attr 이름', 'attr 값'): 속성(attr)의 값을 설정 - css('css 프로퍼티 이름'): CSS 프로퍼티 값을 리턴 - css('css 프로퍼티 이름', 'value'): CSS 프로퍼티에 값을 설정 - val(): input 상자에 입..
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657jQueryp { border: 1px solid grey; width: 200px; height: 200px; background-color: lightgreen; font-size: 200%; text-align: center;} $(document).ready(function() { // $('selector').event(function() {}); // 하나의 HTML 요소에 여러개의 event handler를 등록 // $('selector').on({ // event1: function() {}, // ev..
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869jQuery jQuery Eventhover // $(document).ready(function() {});$(function() { // mouseover, mouseenter: // 마우스가 해당 영역 위로 올라갔을 때 $('#bulb').mouseover(function() { console.log($(this).attr('src')); $(this).attr('src', 'images/bulb_on.gif'); }); // mouseout, mouseleave: // ..
- jQuery의 기본 문장 : $('selector').action();- $('selector'): HTML 요소를 찾음. CSS 선택자(태그, 클래스, 아이디);- action(): 해당 HTML 요소에 행해질 동작(기능) 123456789101112131415161718192021222324252627282930313233343536373839404142434445jQuery jQuery 기본 문법모두 숨기기클래스 숨기기아이디 숨기기 단락 1단락 2, 클래스 c1단락 3, 클래스 c1단락 4, 아이디 p1 // jQuery의 기본 문장 : $('selector').action();// $('selector'): HTML 요소를 찾음. CSS 선택자(태그, 클래스, 아이디);// action(): ..
* jQuery 라이브러리를 포함시키는 방법 1. http://jquery.com/download/ 페이지에서 jQuery 라이브러리를 다운로드-> WebContent/js 폴더에 복사-> --> // document가 다 등록된 후에 실행이 되기 때문에// 스크립트를 head에서 선언해도 상관없음$(document).ready(function() { $('h2').click(function() { $(this).hide(); });}); jQuery 사용하기클릭하세요! 그럼 제가 사라집니다.Another h2 tag Colored by Color Scriptercs
- Event Capturing: 이벤트 처리 순서가 부모 요소 -> 자식 요소- Event Bubbling: 이벤트 처리 순서가 자식 요소 -> 부모 요소 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253JavaScriptdiv { border: 1px solid grey; padding: 20px;}p { border: 1px dotted red;} Event Capturing/Bubbling Event Capturing: 부모 -> 자식 Event Bubbling: 자식 -> 부모 var div1 = document.getElementById('div1');var p1 = d..
* 이벤트 핸들러 등록 방법1:- element.event = function() {}; * 이벤트 핸들러 등록 방법 2:- element.addEventListener(event, function, useCaption);- event: 이벤트 이름(click, mouseover, ...)- function: 이벤트 핸들러(리스너) -> 필수- useCaption: true/false -> 선택(기본값은 false)- 장점: 하나의 이벤트에 여러개의 이벤트 핸들러를 등록할 수 있음 123456789101112131415161718192021222324252627282930313233343536373839JavaScript 자바스크립트에서 이벤트 핸들러 등록 방법버튼 1 var output = docume..
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758JavaScript#para { border: 1px solid grey; width: 200px; height: 100px; font-size: 2em; text-align: center;} HTML 마우스 이벤트마우스를 올려 보세요...... // onmouseover: 마우스 커서가 영역 위로 올라왔을 때// -> 배경색 바꿈. "마우스를 눌러주세요..." 라고 변경function mouseOver(para) { para.style.backgroundColor = 'lightpink'; para.innerHTM..