WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing

WEB/JQuery 2012. 9. 13. 01:12

① JQuery 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JQuery 3(동적 생성과 traversing)</title>

// $ >> jQuery 객체

// 버튼을 찾아서 click이벤트를 걸고 클릭시 alert("클릭"); 되도록

$(function(){

$(":button[value=실행]").click(function(){

// 모든 div에 이미지를 추가

$("div").append("<img src='teayeon2.jpg' width='50'/>")

.find(':odd').width(100).click(function(){

$(this).toggle(2000);

}).end().animate({height:"+=20", width:"-=100"},1000);

// end(): 끝내고 처음 선택자로 돌아간다.

// json 방식 : {name:value, name1:value1}

});

var no=1;

$("div.target").dblclick(function(){

$(this).prepend(no++);

});

$("div").css("border","solid thin blue")

.css("background-color", "#D0D0D0"); // background-color = backgroundColor

});

</script>

</head>

<body>

<div class="target">디아이브이1</div>

<div class="target">디아이브이2</div>

<div class="target">디아이브이3</div>

<div class="target">디아이브이4</div>

<div class="target">디아이브이5</div>

</body>

</html>

② 실행화면

JQuery 3(동적 생성과 traversing)

디아이브이1

디아이브이2

디아이브이3

디아이브이4

디아이브이5

저작자표시

'WEB > JQuery' 카테고리의 다른 글

WEB 5일차 두번째) JQuery UI : tab, accordion, datepicker. dialog (0)	2012.09.14
WEB 5일차 첫번째) JQuery복습 (0)	2012.09.14
WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제 (0)	2012.09.13
WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기 (0)	2012.09.13

모데스티

,

WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제

WEB/JQuery 2012. 9. 13. 01:11

① JQuery소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Insert title here</title>

$(function(){

// body가 로딩이 끝나고 난 뒤 실행된다.

// alert("정말??/");

$("#all").click(function(){

// this>> all의 function안에 다시 all을 써야하는 경우 대체할 수 있다.

// if($(this).attr("checked")=="checked")

var boo = false;

if($(this).is(":checked")){

// $("input[name=cb]").attr("checked","checked");

//$("input[name=cb]").attr("checked",false);

boo = true;

} $("input[name=cb]").attr("checked",boo);

});

// Jquery를 사용하지 않고 구현하기

function chk(all){

var cb = document.getElementsByName("cb"); // 배열

var boo = false;

if(all.checked) boo = true;

for(var i=0; i<cb.length; i++){

cb[i].checked=boo;

}

</script>

</head>

<body>

</body>

</html>

② 실행화면

Insert title here 전체
1번
2번
3번
4번
5번
6번
7번
8번
9번
10번

저작자표시

'WEB > JQuery' 카테고리의 다른 글

WEB 5일차 두번째) JQuery UI : tab, accordion, datepicker. dialog (0)	2012.09.14
WEB 5일차 첫번째) JQuery복습 (0)	2012.09.14
WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing (0)	2012.09.13
WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기 (0)	2012.09.13

모데스티

,

WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기

WEB/JQuery 2012. 9. 13. 01:07

① JQuery 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JQuery 1</title>

function execute() {

// Jquery에서는 메소드이름이 $

// $("#target").toggle(3000); // id가 target선택 ,hide() 숨기기, toggle() = hide()+show()

// $("img.ttt").toggle(1000); // img태그중 class가 ttt인 것 선택

// $("img:first").fadeOut(1000); // img태그중 첫번째 것

// $("img:last").fadeOut(1000); // img태그중 마지막 것, 이펙트와 관련된 것들은 동시실행

// $("img:even").toggle(1000); // img중 홀수번째를 toggle : index가 0부터 시작(0은 짝수)

// $("div img").attr("src","teayeon.jpg"); // div의 img태그에 있는 사진 바꾸기, 속성세팅

// document.getElementById("horse").src="teayeon.jpg";

// alert($("div img").attr("src")); // 속성값 가져오기

// class가 ttt가 아닌것 선택

// $("img:not(.ttt)").slideToggle(1000);

}

</script>

</head>

<body>

</div>

</body>

</html>

② 실행화면

JQuery 1

저작자표시

'WEB > JQuery' 카테고리의 다른 글

WEB 5일차 두번째) JQuery UI : tab, accordion, datepicker. dialog (0)	2012.09.14
WEB 5일차 첫번째) JQuery복습 (0)	2012.09.14
WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing (0)	2012.09.13
WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제 (0)	2012.09.13

모데스티

,

WEB 3일차 다섯번째) 정규식을 이용한 회원가입테이블 유효성검사

WEB/JavaScript 2012. 9. 13. 01:05

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function validate() {

// 이메일검사

// 4글자이상(\w=[a-zA-Z0-9_],[\w-]:'-'까지는 허용) @가 나오고

// hanmail.net, naver.com, lycos.co.kr, iei.or.kr

// 1글자 이상(주소).글자 가 1~3번 반복

var userid = document.getElementById("userid");

// 첫글자는 반드시 영문소문자, 4~12자로 이루어지고, 숫자가 하나 이상 포함되어야한다.

// 영문소문자와 숫자로만 이루어져야 한다.

// \d : [0-9]와 같다. {n,m} : n에서 m사이

if(!chk(/^[a-z][a-z\d]{3,11}$/, userid, "잘못된 형식의 ID입니다.")) return false;

if(!chk(/[\d]/, userid, "잘못된 형식의 ID입니다.")) return false;

//alert(re.test(userid.value));

var pass = document.getElementById("pass");

var pass1 = document.getElementById("pass1");

if(!pwchk(pass, pass1, "비밀번호가 다릅니다."))

//if(!pwchk(pass.value, pass2.value)) return false;

// 이름 검사 : 2글자 이상,한글로만 입력

// 통과하지 못하면 한글로 2글자 이상을 넣으세요 메세지 출력

var name = document.getElementById("name");

if(!chk(/^[가-힝]{2,}$/, name, "한글만 입력하세요!!!(2글자 이상)")) return false;

var email = document.getElementById("email");

if(!chk(/^[\w-]{4,}@[\w-]+(\.\w+){1,3}$/, email, "이메일 형식이 잘못되었습니다."));

var tel1 = document.getElementById("tel1");

var tel2 = document.getElementById("tel2");

var tel3 = document.getElementById("tel3");

if(tel1.value != ''){

if(!chk(/^0(2|1[016789])$/, tel1, "앞자리는 2~3자리 숫자")) return false;

if(!chk(/^\d{3,4}$/, tel2, "둘째자리는 3~4자리 숫자")) return false;

if(!chk(/^\d{4}$/, tel3, "셋째자리는 4자리 숫자")) return false;

}

var email = document.getElementById("email");

//return false;

}

function chk(re, e, msg){

if(re.test(e.value)) return true;

alert(msg);

e.value="";

e.focus();

return false;

}

function pwchk(e1, e2, msg){

if(e1 == e2) return true;

alert(msg);

e.value="";

e.focus();

return false;

}

</script>

</head>

<body>

<label for="userid">* 유저아이디</label>

<label for="pass1">* 비밀번호확인</label>

<input type="text" name="tel1" id="tel1" maxlength="3"/>-

<input type="text" name="tel2" id="tel2" maxlength="4"/>-

<option>프로그래머</option>

</select> <br />

<input type="radio" name="gender" value ="m" /> 남

<input type ="checkbox" name="hobby" value="reading" /> 독서

<input type ="checkbox" name="hobby" value="drama" /> 드라마보기

<input type ="checkbox" name="hobby" value="movie" /> 영화보기

<input type ="checkbox" name="hobby" value="basket" /> 농구

</form>

</body>

</html>

② 실행 화면

회원가입 유효성 체크

저작자표시

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 네번째) 자바스크립트의 정규식 (0)	2012.09.13
WEB 3일차 세번째) 자바스크립트의 DATE 함수 (0)	2012.09.13
WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기 (0)	2012.09.13
WEB 3일차 첫번째) 자바스크립트 (0)	2012.09.13

모데스티

,

WEB 3일차 네번째) 자바스크립트의 정규식

WEB/JavaScript 2012. 9. 13. 01:03

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function execute() {

// aaa와 bbb의 결과를 합쳐서 result에 보여주기

var aaa = document.getElementById("aaa");

var bbb = document.getElementById("bbb");

// 정규식을 이용한 숫자 검사

/*

정규식 작성법

1. var re = /정규식/;

2. var re = new RegExp("정규식");

*/

var re = /^[0-9]+$/; // ^[0-9]+$ 시작부터 끝까지 모두 숫자

// 유효성 검사(validation)

if(!re.test(aaa.value)){

alert("숫자만 넣어라.!!");

aaa.value=""; // 숫자가 아닐결우 aaa.value를 공백으로

aaa.focus(); // 다시 입력받기위해 커서가 aaa의 값이 들어오는 곳으로 옮겨진다.

return;

};

//alert(parseInt(aaa.value)+parseInt(bbb.value));

/* var result = document.getElementById("result");

result.innerHTML = Number(aaa.value)+Number(bbb.value); */

// 문자->숫자 : parseInt(), Number() (실수인 경우 : parseFloat())

var r = parseInt(aaa.value) + Number(bbb.value);

if(isNaN(r)){

r='숫자를 넣어라!';

}

document.getElementById("result").innerHTML = r;

}

</script>

</head>

<body>

<input type="text" id="aaa" /> +

<input type="text" id="bbb" /> =

</body>

</html>

② 실행화면

숫자와 문자 변환 및 정규식 + =

저작자표시

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 다섯번째) 정규식을 이용한 회원가입테이블 유효성검사 (0)	2012.09.13
WEB 3일차 세번째) 자바스크립트의 DATE 함수 (0)	2012.09.13
WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기 (0)	2012.09.13
WEB 3일차 첫번째) 자바스크립트 (0)	2012.09.13

모데스티

,

WEB 3일차 세번째) 자바스크립트의 DATE 함수

WEB/JavaScript 2012. 9. 13. 01:01

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

var no;

function init() {

var target = document.getElementById("target");

var t = new Date();

target.innerHTML = t.getFullYear() + "-" + (t.getMonth()+1) + "-" + t.getDate()

+ " " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds();

// target.innerHTML = new Date();

// setInterval은 window객체에 있는 메소드이다.

// 원래는 window.setInterval이지만 window는 생략가능하다.

no = setInterval(setTime, 1000); // setInterval가 실행되면 고유번호가 no에 대입

//alert(no);

}

function setTime() {

var target = document.getElementById("target");

var t = new Date();

target.innerHTML = t.getFullYear() + "-" + (t.getMonth()+1) + "-" + t.getDate()

+ " " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds();

// 2012-09-11 16:14:00 식으로 출력

}

</script>

</head>

<!--

onload : body가 만들어지고 난뒤에 실행

>> 첫화면에서 어떤 이벤트가 일어나게 하고 싶을경우

-->

</body>

</html>

② 실행 화면

날짜 (DATE)

저작자표시

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 다섯번째) 정규식을 이용한 회원가입테이블 유효성검사 (0)	2012.09.13
WEB 3일차 네번째) 자바스크립트의 정규식 (0)	2012.09.13
WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기 (0)	2012.09.13
WEB 3일차 첫번째) 자바스크립트 (0)	2012.09.13

모데스티

,

WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기

WEB/JavaScript 2012. 9. 13. 00:58

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function execute(){

// 실행을 클릭시 div target에 구구단이 나오도록

var target = document.getElementById("target");

var html ="<table align='center' border ='1' width='800'>";

html += "<tr align='center'>"

html += "<th>구분</th>"

for(var i=2; i<10; i++){

html += "<th>" + i + "단</th>";

}

html += "</tr>";

for(var i=1; i<10; i++) {

html += "<tr align='center'>"

html += "<th> X" + i +"</th>";

for(var j=2; j<10; j++){

html += "<td>"+ j + "*" + i + "=" + i*j + "</td>";

} html += "</tr>";

}

html += "</table>";

target.innerHTML = html;

}

</script>

</head>

<body>

</body>

</html>

② 실행 화면

구구단

저작자표시

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 다섯번째) 정규식을 이용한 회원가입테이블 유효성검사 (0)	2012.09.13
WEB 3일차 네번째) 자바스크립트의 정규식 (0)	2012.09.13
WEB 3일차 세번째) 자바스크립트의 DATE 함수 (0)	2012.09.13
WEB 3일차 첫번째) 자바스크립트 (0)	2012.09.13

모데스티

,

WEB 3일차 첫번째) 자바스크립트

WEB/JavaScript 2012. 9. 13. 00:56

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>자바스크립트</title>

// 한줄주석

/* 여러줄 주석 */

var no=1; // 오로지 var 타입의 변수만 존재, 일종의 멤버변수

function hello(){

// alert창은 Modal dialog : 경고용으로 사용

alert("안녕~세상아~!!!"); // 내장 함수(메소드)

// DOM(Document Object Model) : HTML을 Tree형태의 객체로 구조화 한 것

// getElementById : Id로 element를 찾아 가지고 온다.

var target = document.getElementById("target");

alert(target);

// innerHTML 같은 id를 갖는 태그안에 '안녕!!!!'을 넣게 된다.

target.innerHTML='안녕!!!!';

}

// gugu div에 계속해서 클릭할 때마다 증가된 숫자가 증가하도록

function add() {

var gugu = document.getElementById('gugu'); // 꼭 쓰도록 하자!!!

if(no%10==0){

gugu.innerHTML += '<h5>ㅋㅋㅋ</h5>';

} else {

gugu.innerHTML += '<input type="button" value="버튼'+no+'" />';

}

no++;

}

</script>

</head>

<body>

<!--

on으로 시작하는 것은 javascript에서만 사용

javascript는 Event Driven Model : 이벤트가 발생할 경우 행동을 한다.

-->

0

</div>

</body>

</html>

② 실행 화면

자바스크립트

0

저작자표시

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 다섯번째) 정규식을 이용한 회원가입테이블 유효성검사 (0)	2012.09.13
WEB 3일차 네번째) 자바스크립트의 정규식 (0)	2012.09.13
WEB 3일차 세번째) 자바스크립트의 DATE 함수 (0)	2012.09.13
WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기 (0)	2012.09.13

모데스티

,

WEB 2일차 여섯번째) div로 레이아웃 잡기

WEB/CSS 2012. 9. 13. 00:54

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

/* div {

border: thin red solid;

} */

.content {

position: absolute;

margin-left: 155px;

width: 645px;

}

.menu {

width: 150px;

position: absolute;

}

.out {

width: 800px;

/* 위 아래는 0px 좌우로는 auto */

margin: 0px auto;

}

div.menu ul {

list-style: none;

padding: 0px;

margin: 0px;

}

div.menu ul li:HOVER {

/* background-color: #E0E0E0; */

background-image:url("teayeon2.jpg");

background-position: 50%;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

태연

</div>

</body>

</html>

② 실행 화면

div로 레이아웃 잡기

태연

저작자표시

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 다섯번째) div (0)	2012.09.13
WEB 2일차 네번째) CSS 두번째 (0)	2012.09.13
WEB 2일차 세번째) CSS 첫번째 (0)	2012.09.13

모데스티

,

WEB 2일차 다섯번째) div

WEB/CSS 2012. 9. 13. 00:52

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.f{

float: left;

}

#box {

/*

position

alsolute : div를 원하는 위치에 놓는 것이 가능하다.(절대좌표)

relative : 해당 div앞에 있는 태그를 기준으로 위치가 결정된다.

fixed : 해당 좌표에서 고정되어 스크롤을 해도 위치가 변하지 않는다.

*/

position: fixed;

border: dashed blue;

width: 500px;

left: 50px; top: 50px

}

</style>

</head>

<body>

<div>

이 구역을 침범하지마!!!!

</div>

몽골마

<!--

상대경로 : 앞에 '/'가 없는 상태로 나오는 경로

>> 현재 경로를 기준으로 상대적으로 경로를 파악한다.

. : 현재경로, .. : 상위경로

-->

태연

몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마

</div>

<div>

나는 밑에 있고 싶어!!!

</div>

</body>

</html>

② 실행 화면

DIV 1

이 구역을 침범하지마!!!!

몽골마

태연

몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마

나는 밑에 있고 싶어!!!

저작자표시

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 여섯번째) div로 레이아웃 잡기 (0)	2012.09.13
WEB 2일차 네번째) CSS 두번째 (0)	2012.09.13
WEB 2일차 세번째) CSS 첫번째 (0)	2012.09.13

모데스티

,

'2012/09/13'에 해당되는 글 16건

WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing

'WEB > JQuery' 카테고리의 다른 글

WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제

'WEB > JQuery' 카테고리의 다른 글

WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기

'WEB > JQuery' 카테고리의 다른 글

WEB 3일차 다섯번째) 정규식을 이용한 회원가입테이블 유효성검사

회원가입 유효성 체크

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 네번째) 자바스크립트의 정규식

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 세번째) 자바스크립트의 DATE 함수

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 첫번째) 자바스크립트

'WEB > JavaScript' 카테고리의 다른 글

WEB 2일차 여섯번째) div로 레이아웃 잡기

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 다섯번째) div

'WEB > CSS' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

모데스티

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2012/09 »
일	월	화	수	목	금	토
						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