<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type='text/css'>
.high-light {background-color:yellow;}
.border1 {border:1px solid black;}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//문서 객체 클래스 속성 추가
$('h2').addClass('high-light');
$('h2').addClass('border1');
});
</script>
</head>
<body>
<h2>item - 0</h2>
<h2>item - 1</h2>
<h2>item - 2</h2>
<h2>item - 3</h2>
</body>
</html>
2
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type='text/css'>
.high-light-0 {background-color:yellow;}
.high-light-1 {background-color:orange;}
.high-light-2 {background-color:aqua;}
.high-light-3 {background-color:yellowgreen;}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//문서 객체 클래스 속성 추가 함수적용
$('h2').addClass(function(index){
return 'high-light-'+index;
});
//each 구문으로 만듦 동일한 결과
$('h2').each(function(index,item){
$(this).addClass('high-light-'+index)
})
});
</script>
</head>
<body>
<h2>item - 0</h2>
<h2>item - 1</h2>
<h2>item - 2</h2>
<h2>item - 3</h2>
</body>
</html>
3
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type='text/css'>
.high-light-0 {background-color:yellow;}
.high-light-1 {background-color:orange;}
.high-light-2 {background-color:aqua;}
.high-light-3 {background-color:yellowgreen;}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//클래스 추가, 삭제, 토글
document.getElementById('btn1').onclick = function(){
$('h2').addClass(function(index){
return 'high-light-'+index;
})
};
document.getElementById('btn2').onclick = function(){
$('h2').removeClass(function(index){
return 'high-light-'+index;
})
};
document.getElementById('btn3').onclick = function(){
$('h2').toggleClass(function(index){
return 'high-light-'+index;
})
};
});
</script>
</head>
<body>
<button id='btn1'>클래스 추가</button>
<button id='btn2'>클래스 삭제</button>
<button id='btn3'>클래스 토글</button>
<hr />
<h2>item - 0</h2>
<h2>item - 1</h2>
<h2>item - 2</h2>
<h2>item - 3</h2>
</body>
</html>
4
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//문서 객체 속성 검사 attr //한개만 출력
var src = $('img').attr('src');
console.log(src);
//같은 속성 객체 모두 처리
$('img').attr('src', function(){
console.log($(this).attr('src'));
});
//속성 전체 변경
$('img').attr('width', 100);
//속성 변경 함수
$('img').attr('height', function(index){
return (index+1)*100
});
//속성 2개이상 동시 변경
$('img').attr({
width : 100,
height : function(index){
return(index + 1)*100;
}
});
});
</script>
</head>
<body>
<img src="./images/Chrysanthemum.jpg" width='150' />
<img src="./images/Desert.jpg" width='150' />
<img src="./images/Lighthouse.jpg" width='150' />
<img src="./images/Penguins.jpg" width='150' />
</body>
</html>
5
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//사용자 임의 속성 추가, 제거
document.getElementById('btn1').onclick = function(){
$('img').attr('data-index', function(index){
return index;
});
};
document.getElementById('btn2').onclick = function(){
$('img').removeAttr('data-index');
};
});
</script>
</head>
<body>
<button id='btn1'>속성 추가</button>
<button id='btn2'>속성 제거</button>
<hr />
<img src="./images/Chrysanthemum.jpg" width='150' />
<img src="./images/Desert.jpg" width='150' />
<img src="./images/Lighthouse.jpg" width='150' />
<img src="./images/Penguins.jpg" width='150' />
</body>
</html>
6
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//css
var color = ['red','aqua','purple','greenyellow'];
//css 함수적용
$('h2').css('color',function(index){
return color[index];
});
//css 속성값 검사 //한개
console.log($('h2').css('color'));
//css 모두 검사
$('h2').css('color',function(index){
console.log($(this).css('color'));
});
});
</script>
</head>
<body>
<h2>header - 0</h2>
<h2>header - 1</h2>
<h2>header - 2</h2>
<h2>header - 3</h2>
</body>
</html>
7
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//javascript innerHTML
console.log(document.body.innerHTML);
//jQuery 문서 객체 내부 검사 html
console.log($('body').html());
});
</script>
</head>
<body>
<h2>header - 0</h2>
<h2>header - 1</h2>
<h2>header - 2</h2>
<h2>header - 3</h2>
</body>
</html>
8
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//태그 내부 선택 html 검사
var html1 =$('h2').html();
var html2 =$('h2').eq(1).html();
console.log(html1);
console.log(html2);
});
</script>
</head>
<body>
<h2>header - 0</h2>
<h2>header - 1</h2>
<h2>header - 2</h2>
<h2>header - 3</h2>
</body>
</html>
9
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//html 내용 채우기
$('div').html('<h2>html() 메서드</h2>')
//html 내용 채우기 함수
$('div').html(function(index){
return '<h2>html() 메서드 -' + index + '</h2>';
});
//text 내용 채우기
$('div').eq(3).text('<h2>html() 메서드</h2>')
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
10
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
document.getElementById('btn1').onclick = function(){
$('div:first').remove();
};
document.getElementById('btn2').onclick = function(){
$('div:last').empty();
};
});
</script>
</head>
<body>
<button id='btn1'>remove</button>
<button id='btn2'>empty</button>
<hr />
<div>
<h2>remove - 0</h2>
<h2>remove - 1</h2>
<h2>remove - 2</h2>
</div>
<div>
<h2>empty - 0</h2>
<h2>empty - 1</h2>
<h2>empty - 2</h2>
</div>
</body>
</html>
11
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//버튼 클릭시 해당 html 지우기
document.getElementById('btn1').onclick = function(){
var num = $('input').val();
$('h2').eq(num).empty();
};
//버튼 클릭시 해당 html 되돌리기
document.getElementById('btn2').onclick = function(){
//location.reload();
var num = $('input').val();
$('h2').eq(num).html('remove - '+num);
};
});
</script>
</head>
<body>
<input type='text' />
<button id='btn1'>remove</button>
<button id='btn2'>renew</button>
<hr />
<div>
<h2>remove - 0</h2>
<h2>remove - 1</h2>
<h2>remove - 2</h2>
</div>
</body>
</html>
12
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//문서 객체 생성, 삽입
$('<h2></h2>').html('Hello jQuery 1').appendTo('body');
$('<h2>').html('Hello jQuery 2').appendTo('body');
$('<h2>Hello jQuery 3</h2>').appendTo('div');
//문서 객체 이미지 생성, 삽입
$('<img />').attr({src: './images/Desert.jpg', width:200}).appendTo('div');
});
</script>
</head>
<body>
<div></div>
</body>
</html>
13
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//클릭시 이미지 생성, 삽입
document.getElementById('btn1').onclick = function(){
$('<img />').attr({
src: './images/Desert.jpg',
width:200
}).appendTo('div');
}
document.getElementById('btn2').onclick = function(){
//location.reload(); //전체 제거
$('img:last').remove(); //하나씩 제거
}
});
</script>
</head>
<body>
<button id='btn1'>이미지 넣기</button>
<button id='btn2'>이미지 제거</button>
<hr />
<div></div>
</body>
</html>
14
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//문서 객체 이동
$('img').css('width',250);
//1초마다 실행
setInterval(function(){
//첫번째 이미지 마지막으로 보냄
$('img').first().appendTo('body');
}, 1000);
});
</script>
</head>
<body>
<img src='./images/Chrysanthemum.jpg' />
<img src='./images/Desert.jpg' />
<img src='./images/Lighthouse.jpg' />
<img src='./images/Penguins.jpg' />
</body>
</html>
15
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h2 {border : 1px solid magenta;}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//jQuery 이벤트
$('h2').click(function(){
console.log('click 호출');
});
// on(이벤트)
$('h2').on('click',function(){
console.log('click 호출');
console.log($(this).html());
});
$('h2').on('mouseenter',function(){
console.log('mouseenter 호출');
});
});
</script>
</head>
<body>
<h2>header - 0</h2>
<h2>header - 1</h2>
<h2>header - 2</h2>
</body>
</html>
16
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h2 {border : 1px solid magenta;}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// on(이벤트)
$('h2').on('click',function(){
$(this).html(function(index,html){
return html +' *'
});
});
});
</script>
</head>
<body>
<h2>header - 0</h2>
<h2>header - 1</h2>
<h2>header - 2</h2>
</body>
</html>
17
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.reverse {background-color:black; color: white;}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 이벤트 2개 적용
$('h2').on({
mouseenter: function(){
$(this).addClass('reverse');
},
mouseleave: function(){
$(this).removeClass('reverse');
}
});
//hover 마우스 in, out 위와 동일한 결과
$('h2').hover(
function(){
$(this).addClass('reverse');
},
function(){
$(this).removeClass('reverse');
}
);
});
</script>
</head>
<body>
<h2>header - 0</h2>
<h2>header - 1</h2>
<h2>header - 2</h2>
</body>
</html>
18
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.reverse {background-color:black; color: white;}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 이벤트 제거 off
$('h2').on('click', function(){
alert('이벤트 발생');
$(this).off();
});
// 이벤트 한번만 (위와 동일한 결과)
$('h2').one('click', function(){
alert('이벤트 발생');
});
});
</script>
</head>
<body>
<h2>header - 0</h2>
<h2>header - 1</h2>
<h2>header - 2</h2>
</body>
</html>
19
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#canvas {border: 1px solid black;}
.colorbox {float: left; width: 100px; height: 40px; }
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//색깔 선택헤서 선그리기 //이벤트 객체
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var color = '#000000';
$(canvas).on({
//마우스 눌렀을 때
mousedown: function(event){
var position = $(this).offset(); //객체의 좌표값을 반환
var x = event.pageX - position.left; //event.pageX 브라우저기준 마우스 x좌표
var y = event.pageY - position.top;
context.beginPath(); //Path(선, 호) 호출시에 한개의 도형 그림
context.moveTo(x,y); //moveTo 새로운 시작점
},
//마우스 땠을 때
mouseup: function(event){
var position = $(this).offset();
var x = event.pageX - position.left;
var y = event.pageY - position.top;
context.lineTo(x,y); //선의 끝점
context.strokeStyle = color; //태두리 색 변경
context.stroke(); //stroke 메소드는 태두리 , fill 도형채우기색 호출
}
});
//클릭시 선택 객체의 색깔 저장
$('.colorbox').on('click', function(){
color = $(this).css('background-color');
})
});
</script>
</head>
<body>
<canvas id='canvas' width='700' height='400'></canvas>
<div>
<div class='colorbox' style='background-color: blue;'></div>
<div class='colorbox' style='background-color: red;'></div>
</div>
</body>
</html>
20
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//trigger 자동이벤트 호출
$('h2').click(function(){
$(this).html(function(index,html){
return html + '*';
});
});
//1초마다 실행
setInterval(function(){
$('h2').last().trigger('click');
},1000);
});
</script>
</head>
<body>
<h2>start :</h2>
<h2>start :</h2>
</body>
</html>
21
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//이벤트 제거
$('a').on('click', function(){
event.preventDefault(); //a태그의 링크 기능이 사라짐
event.stopPropagation(); //이벤트 전달 막음
$(this).css('background-color', 'blue');
});
//이벤트 버블링 없어짐
$('h2').on('click', function(){
$(this).css('background-color', 'red');
});
});
</script>
</head>
<body>
<h2>
<a href='http://www.naver.com'>네이버 바로가기</a>
</h2>
<h2>
<a href='http://www.daum.net'>다음 바로가기</a>
</h2>
</body>
</html>
22
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.outer {
width : 200px;
height: 200px;
background : orange;
padding : 50px;
}
.inner {
width : 100%;
height: 100%;
background : red;
}
</style>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//mouseover는 자식태그에도 적용됨
//mouseenter는 객체 안과 외부만 구분함
$('.outer').mouseover(function(){
$('body').append('<h1>MOUSEOVER</h1>');
}).mouseenter(function(){
$('body').append('<h1>MOUSEENTER</h1>');
});
});
</script>
</head>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
23
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//남은 글자수 띄우기 keyup
/*
keyup을 사용하는 이유는 한글이 keypress이벤트를 지원하지 않음
keydown을 사용하지 않는 이유는 글자가 입력되기 전
키보드 누름 ▶ keydown ▶ 글자입력됨 ▶ keypress ▶ 키보드 손 땜 ▶ keyup
*/
$('textarea').keyup(function(){
var inputLength = $(this).val().length;
var remain = 150-inputLength;
// 문서 객체에 입력
$('h1').html(remain);
// 문서 객체 색상 변경
if(remain >=0){
$('h1').css('color','black');
}else{
$('h1').css('color','red');
}
});
});
</script>
</head>
<body>
<div>
<p>지금 내 생각을</p>
<h1>150</h1>
<textarea cols='70' rows='5'></textarea>
</div>
</body>
</html>
24
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//무한스크롤 : 문서끝까지 스크롤 내리면 컨텐츠 더 생김
$(window).scroll(function(){
var scrollHeight = $(window).scrollTop() + $(window).height();
var documentHeight = $(document).height();
//(스크롤한 높이 + 처음페이지 높이)가 (문서높이)에 근접하면 추가html생성
if(scrollHeight >= documentHeight-100){
for(var i=0;i<10;i++){
$('<h1>Infinity Scroll '+scrollHeight+'</h1>').appendTo('body');
}
}
});
$(document).ready(function(){
for(var i=0;i<20;i++){
$('<h1>Infinity Scroll</h1>').appendTo('body');
}
})
});
</script>
</head>
<body>
</body>
</html>
25
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//change 이벤트 체크박스
$('#all-check').change(function(){
if(this.checked){
$('#check-item').children().prop('checked',true);
}else{
$('#check-item').children().prop('checked',false);
}
});
});
</script>
</head>
<body>
<input type='checkbox' id='all-check' />
<label>All</label>
<div id='check-item'>
<input type='checkbox' />
<label>A Option</label>
<input type='checkbox' />
<label>B Option</label>
<input type='checkbox' />
<label>C Option</label>
</div>
</body>
</html>
26
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//이벤트 막음
$('#my-form').submit(function(event){
//입력 양식의 value가져옴
var name = $('#name').val();
var password =$('#password').val();
//출력
alert(name + ' : '+password);
//summit 막음
event.preventDefault();
})
});
</script>
</head>
<body>
<form id='my-form' action='ex24.jsp'>
<table>
<tr>
<td>이름 : </td>
<td><input type ='text' name='name' id='name' /></td>
</tr>
<tr>
<td>비밀번호 : </td>
<td><input type ='password' name='password' id='password' /></td>
</tr>
</table>
<input type="submit" value="제출" />
</form>
</body>
</html>
댓글 없음:
댓글 쓰기